ANIMAÇÕES E FERRAMENTAS VIRTUAIS - apostila

Prévia do material em texto

W
BA
01
76
_V
2.
0
ANIMAÇÕES E FERRAMENTAS 
VIRTUAIS
2
Felipe Orsini Martinelli
São Paulo
Platos Soluções Educacionais S.A 
2021
 ANIMAÇÕES E FERRAMENTAS VIRTUAIS
1ª edição
3
2021
Platos Soluções Educacionais S.A
Alameda Santos, n° 960 – Cerqueira César
CEP: 01418-002— São Paulo — SP
Homepage: https://www.platosedu.com.br/
Diretor Presidente Platos Soluções Educacionais S.A
Paulo de Tarso Pires de Moraes
Conselho Acadêmico
Carlos Roberto Pagani Junior
Camila Braga de Oliveira Higa
Camila Turchetti Bacan Gabiatti
Giani Vendramel de Oliveira
Gislaine Denisale Ferreira
Henrique Salustiano Silva
Mariana Gerardi Mello
Nirse Ruscheinsky Breternitz
Priscila Pereira Silva
Tayra Carolina Nascimento Aleixo
Coordenador
Henrique Salustiano Silva
Revisor
Gabriela Silveira Barbosa
Editorial
Alessandra Cristina Fahl
Beatriz Meloni Montefusco
Carolina Yaly
Mariana de Campos Barroso
Paola Andressa Machado Leal
Dados Internacionais de Catalogação na Publicação (CIP)_________________________________________________________________________________________ 
Martinelli, Felipe Orsini
M385a Animações e ferramentas virtuais / Felipe Orsini 
Martinelli, São Paulo: Platos Soluções
 Educacionais S.A., 2021.
 44 p.
 ISBN 978-65-89881-53-7
1.Software. 2. Ferramentas virtuais. 3. Animação. I. Título.
 
CDD 006.6
____________________________________________________________________________________________
 Evelyn Moraes – CRB: 010289/O
© 2021 por Platos Soluções Educacionais S.A.
Todos os direitos reservados. Nenhuma parte desta publicação poderá ser 
reproduzida ou transmitida de qualquer modo ou por qualquer outro meio, 
eletrônico ou mecânico, incluindo fotocópia, gravação ou qualquer outro tipo de 
sistema de armazenamento e transmissão de informação, sem prévia autorização, 
por escrito, da Platos Soluções Educacionais S.A.
https://www.platosedu.com.br/
4
SUMÁRIO
Introdução ao Photoshop ____________________________________ 05
Tratando e editando imagens _______________________________ 18
Introdução ao Animate _______________________________________ 30
Recursos de Interação no Animate ___________________________ 43
ANIMAÇÕES E FERRAMENTAS VIRTUAIS
5
Introdução ao Photoshop
Autoria: Felipe Orsini Martinelli
Leitura crítica: Gabriela Silveira Barbosa
Objetivos
• Compreender o fluxo de trabalho básico da 
ferramenta Photoshop.
• Analisar as principais ferramentas do Adobe 
Photoshop para trabalhar com imagem digital e 
animação.
• Editar arquivos de imagem otimizando o trabalho 
em um projeto de animação.
6
1. Introdução
A criação de animações depende de inúmeros fatores, desde o 
surgimento de uma ideia até a concepção do produto final. Os 
projetos digitais, por sua vez, dependem dos recursos disponíveis 
de hardware e software. No mercado, há vários deles com essa 
finalidade. Em relação ao hardware, costuma-se trabalhar com 
monitores e tablets de desenho, mouse e escaneamento de desenhos 
feitos à mão. Em relação aos softwares, podemos citar os produtos da 
empresa norte-americana Adobe (Photoshop, After Effects, Character 
Animator, Animate etc.) e da canadense ToonBoom (Harmony, 
StoryBoard Pro etc.), esses são exemplos pagos e comumente usados 
em estúdios de animação. Além deles, segundo Peruyera (2020), 
pode-se utilizar softwares gratuitos como Krita, GIMP, Blender, entre 
outros, que, embora sejam menos utilizados, possuem inúmeros 
recursos para uso em animações. Nesse sentido, ainda vale frisar 
que, apesar de cada software possuir um fluxo de trabalho específico, 
vários recursos são similares entre todos eles.
Ou seja, apesar da diferença entre softwares, eles possuem várias 
propriedades em comum, cuja compreensão auxilia no processo 
de criação, desde como organizar os arquivos até como exportar 
os arquivos para um arquivo de vídeo, produto final da animação. 
Isso sem contar os princípios de animação, que serão os mesmos 
independentemente do software usado. Considerando a praticidade, 
as ferramentas disponíveis, além de uma boa curva de aprendizagem, 
as funções serão explicadas a partir do Adobe Photoshop, com o 
foco da discussão em ferramentas que, também, existem em outros 
softwares. Além disso, a interface dos softwares do pacote Adobe é 
bem parecida, de modo que ela se torna muito fácil aprender a usar 
os outros softwares do pacote depois de ter aprendido a usar um 
deles (FAULKNER; CHAVEZ, 2016).
7
2. Comandos básicos do Adobe Photoshop
O Photoshop é uma ferramenta que possui inúmeros propósitos dentro 
do meio digital, como tratamento de imagens, criação de pinturas 
digitais, edição de vídeos, criação de mockups e, o ponto essencial desta 
disciplina, criação de animações. A interface é composta de abas, ou 
painéis, referentes às diferentes funcionalidades, como a Figura 1 que 
mostra a tela principal com um arquivo aberto, em que é possível ver 
uma aba do lado esquerdo do layout, com vários ícones, sendo cada 
um deles uma das ferramentas disponíveis. Além disso, há outras abas, 
em que cada uma tem sua especificidade. A aba de propriedades, ou 
properties (a depender do idioma no qual a interface do programa está 
configurada), alterará seu conteúdo conforme a camada selecionada. 
Por exemplo, caso um texto seja selecionado, opções para tipografia 
aparecerão na tela. Caso seja um quadrado desenhado, o software 
mostrará informações de preenchimento e contorno, entre outras 
possibilidades. O arquivo que foi criado no exemplo da figura é 
transparente, o que é indicado na maioria dos softwares como um 
quadriculado cinza e branco.
Figura 1 - Tela inicial do Adobe Photoshop com as principais abas
Fonte: captura de tela do Adobe Photoshop.
8
Para criar animações, qualquer software pode ser escolhido, contanto 
que possua algumas ferramentas fundamentais para animar, como: 
uma linha do tempo, o uso de camadas e o onion skin, ou casca de 
cebola. Esse último recurso não é obrigatório, contudo, ele auxilia muito 
a produzir um projeto com qualidade técnica e estética. Na Figura 1, 
apresentada anteriormente, há uma aba de linha do tempo, ou timeline, 
no canto inferior da tela. Para exibi-la, basta acessar o item Janela, ou 
Window, no menu superior do programa e escolher a opção Linha do 
Tempo, ou Timeline. A partir desse painel é possível criar uma sequência 
de vídeo ou de frames para uma animação.
Além disso, outro painel importante está localizado do lado esquerdo, 
no qual estão as ferramentas. Nesse painel há desde ferramentas para 
deslocamento de camadas e seleção até ferramentas para desenhar e 
pintar uma camada. Neste item, podemos reparar que a maioria das 
ferramentas possuem um pequeno triângulo no canto inferior direito, que 
indica que essa ferramenta agrupa outras, normalmente, ferramentas 
parecidas com ela, que podem ser acessadas ao clicar na ferramenta e 
manter pressionado por um tempo. A Figura 2 exemplifica o painel citado, 
com a ferramenta de seleção rápida (quick selection tool). Ao clicar na 
ferramenta, o menu abre mostrando as outras duas ferramentas: seleção 
de objeto (object selection tool) e varinha mágica (magic wand tool). Por sua 
vez, essas três ferramentas servem para selecionar de maneira precisa 
áreas específicas de uma imagem, como uma pessoa ou um objeto. A 
letra W, que aparece depois do nome das ferramentas, se trata da tecla de 
atalho no teclado do computador para utilizá-las.
Figura 2 - Recorte da interface do Photoshop com um botão do 
painel de ferramentas selecionado
Fonte: captura de tela do Adobe Photoshop.
9
Uma característica importante para o trabalho com camadas é a 
possibilidade de se lidar com transparência, independentemente de ser 
uma transparência com duas ou mais opções. O formato GIF, famoso 
pelas imagens animadas disponíveis na Internet, é um tipo de imagem 
que trabalha com apenas duas opções: um pixel 100% opaco ou 0% 
opaco, nessa última opção, ele será transparente. Já oformato PNG lida 
com transparência gradual, podendo ter opacidade de 0% a 100% em 
cada pixel, permitindo que sejam feitos gradientes de transparência 
na imagem, o que fundamental inserir objetos em cenários. O arquivo 
editável do Photoshop permite a transparência entre camadas, em que 
elas serão ajustadas conforme as propriedades do formato escolhido 
para salvar o arquivo final. Comumente, utiliza-se o formato de imagens 
JPG, que não aceita transparências.
3. Conceito de camadas
Os softwares que lidam com imagens trabalham com a ideia de camadas 
com transparência. Nesse sentido, imagine uma folha de papel em que 
algum objeto será desenhado. Na mesma folha, caso um segundo objeto 
seja desenhado por cima do primeiro, o primeiro desenho será excluído da 
composição, pois ele foi sobreposto. Agora, imagine que os objetos foram 
desenhados em folhas separadas e recortados para serem adicionados 
à composição. Dessa forma, segundo a Adobe (2021), é possível ajustar a 
posição desses objetos, isto é, qual estará por cima e qual por baixo, entre 
outras funcionalidades. A partir desse exemplo, você pode compreender 
a ideia de camadas, que funcionam como folhas de papel independentes 
uma da outra. No meio digital, além do deslocamento, é possível alterar a 
escala e adicionar transparência e filtros, de modo que uma camada seja 
alterada sem interferir nas demais.
No Photoshop é possível criar e excluir camadas, agrupá-las e aplicar 
efeitos como sombra e relevo. Tais ações são facilmente requisitadas 
10
por meio de atalhos ou da aba de camadas, normalmente disponível no 
canto inferior direito da tela (Figura 3). Note que, a ordem das camadas 
dessa aba é a mesma em que será exibida no projeto, ou seja, a camada 
chamada “texto” estará por cima de todas as outras, pois ela está no 
topo do painel de camadas, enquanto a camada “fundo” estará no final 
das demais camadas. Uma observação importante é de que as camadas 
não são fixas em sua ordem, podendo ser reorganizadas ou nomeadas 
conforme sua função no projeto.
Figura 3 - Painel de camadas do Adobe Photoshop
Fonte: captura de tela do Adobe Photoshop.
Conforme a figura anterior, no canto inferior, da esquerda para a 
direita, há as opções de vincular, ou “linkar”, uma camada a outra. 
Com essa opção ativada, caso você movimente uma camada, a 
outra camada que está ligada a ela irá segui-la. Por exemplo, caso 
a camada “desenho” seja movida, a camada “layer com máscara” irá 
acompanhá-la. Ainda, há a opção para inserir efeitos de camada, 
como a sombra externa, o que é feito na camada “retângulo”. Por 
sua vez, o terceiro botão é usado para aplicar uma máscara na 
camada, o que acontece na camada “layer com máscara”. A máscara 
11
é um recurso que serve para ocultar uma área da imagem, sendo 
muito útil em edições sem que se exclua informação da imagem. O 
quarto botão é usado para criar camadas de preenchimento e de 
ajuste, função útil para quando se quer ajustar a cor em uma cena 
sem alterar diretamente seus pixels (FAULKNER; CHAVEZ, 2016), o 
que é mostrado na camada chamada “preenchimento de cor”, a qual 
cobre todo a tela com a cor azul. O quinto botão serve para agrupar 
as camadas em uma pasta e, por fim, os últimos botões servem para 
criar novas camadas e para excluir a camada selecionada. Nesse 
contexto, é importante observar que o arquivo do Photoshop sempre 
terá uma camada, dessa forma, caso haja apenas uma camada no 
projeto, o botão de exclusão estará desabilitado.
Além disso, há vários tipos de camada. No exemplo da figura anterior, a 
camada chamada de “texto” é uma camada textual, diferente da camada 
“retângulo” que armazena uma forma vetorial, ou a camada “desenho” 
que é uma camada de imagem composta por pixels, ou matricial. A 
camada “fundo” também é matricial, possuindo uma fotografia, no 
entanto, repare que essa camada possui um cadeado, o que indica que 
sua edição está bloqueada.
Em suma, para que você entenda melhor o conceito de imagem 
vetorial, podemos defini-la como aquela que é composta de 
formas calculadas a partir de coordenadas na tela e de operações 
matemáticas. Ou seja, trata-se de imagens que podem ser 
redimensionadas, sendo recalculadas quando isso ocorre. Já as 
imagens matriciais armazenam a informação de cor de cada pixel 
existente, dessa forma, em uma imagem que possua 10 pixels de 
altura e 10 pixels de largura haverá informação para 100 pixels. Caso 
essa imagem seja ampliada, o software tentará preencher os outros 
pixels com uma média dos 100 pixels originais. Por causa disso, a 
imagem perde qualidade no processo. Contudo, isso não ocorre na 
imagem vetorial, pois basta recalcular a posição dos pontos da forma 
e preencher novamente a imagem. As imagens vetoriais podem 
12
ser produzidas com o uso das ferramentas de criação de formas 
geométricas, com a caneta (pen tool) ou com a criação de texto e, 
posteriormente, a conversão para forma.
As formas vetoriais possuem duas características fundamentais: o 
preenchimento e o contorno, ou fill e stroke. O preenchimento se 
trada da cor de dentro da forma, podendo ser preenchida com uma 
cor sólida, um gradiente ou um padrão de imagem. O contorno, 
segundo Adobe (2021), percorrerá o traço feito vetorialmente na 
forma, podendo ser contínuo, tracejado, entre outras possibilidades. 
Essas propriedades podem ser ajustadas no painel de propriedades, 
quando uma camada de forma, ou shape layer, é selecionada, como o 
exemplo na figura a seguir.
Figura 4 - Painel de propriedades de uma forma vetorial
Fonte: captura de tela do Adobe Photoshop.
No painel, há as opções de transformação para deslocamento, escala e 
rotação, além de espelhamento. Depois disso, temos as opções de fill e 
13
stroke, além da espessura do contorno, que está indicada como 1 px, ou 
1 pixel. No caso do exemplo anterior, a linha de contorno será tracejada, 
o que pode ser configurado na opção logo ao lado da espessura. Além 
disso, há outras configurações úteis como a forma que a linha fará o 
contorno, se as bordas são retas ou curvas, no caso de um retângulo, 
além do pathfinder.
O pathfinder é uma ferramenta muito útil ao se trabalhar com formas 
vetoriais, sendo possível realizar algumas combinações, como unir 
duas formas. Nesse caso, suponha que você queira fazer uma forma 
de boneco de neve. Para isso, em vez de tentar traçar com a caneta, 
você pode criar três elipses e uni-las por meio do pathfinder. A 
segunda opção é de remover uma forma do fundo, o que fará com 
que o preenchimento seja invertido de dentro para fora da forma 
criada. O terceiro botão serve para a interseção de duas formas, 
deixando apenas a área em comum das duas. Por fim, o quarto 
botão é o inverso do terceiro, deixando apenas as áreas que não são 
comuns às duas formas. Esses recursos podem ser utilizados também 
por meio do recurso de combinar formas (ADOBE, 2021), disponível 
no menu superior, no item Camadas, ou Layers, e depois no item 
combinar formas, ou combine shapes. A Figura 5 exemplifica as 
possibilidades disponíveis no recurso de combinar formas, facilitando 
a visualização entre as suas diferenças.
Figura 5 - Exemplos de uso da função de combinar formas
Fonte: elaborada pelo autor.
14
4. Uso de ferramentas de texto
Todo software que lida com imagens possui ferramentas para inserir 
texto nos projetos. O texto terá diversas propriedades que podem ser 
alteradas, o que trará maior liberdade criativa e facilidade no processo 
de criação. A característica mais importante que se pode citar é a 
fonte tipográfica, que se trata do tipo de letra usado ao digitar algo. As 
fontes possuem variações, sendo o conjunto delas chamado de família 
tipográfica. Nesse contexto, ainda podemos citar que a maioria das 
fontes profissionais possuem famílias, como Arial, Times New Roman 
e Helvetica. Além de variações de peso e espessura, podemos citar 
as mudanças de negrito (bold), itálico (italic) e sublinhado (underline). 
Outra propriedade é o tamanho, normalmentemedido em pontos, ou 
points, mostrado como pt. Por padrão, um ponto é estabelecido como 
1/72 de uma polegada dentro de uma imagem com 72 ppi (pixels per 
inch). No entanto, essa medida pode ser alterada nas configurações 
do software (ADOBE, 2021). Além delas, há várias propriedades de 
espaçamento entre caracteres e entre linhas que podem ser ajustadas 
conforme as necessidades de um projeto. As duas abas que lidam com 
essas propriedades são mostradas na Figura 6, a aba de Caractere, ou 
character, e Parágrafo, ou paragraph.
Figura 6 - Painéis para edição de texto no Adobe Photoshop
Fonte: captura de tela do Adobe Photoshop.
15
No painel de caractere é possível selecionar a fonte, o estilo da fonte, 
o espaçamento entre as letras e entre as linhas dentro do mesmo 
parágrafo, a proporção de altura e largura das fontes e, por fim, a cor 
do texto. As configurações de parágrafo afetarão o texto como um todo, 
podendo modificar o alinhamento para esquerda, meio, direita ou várias 
opções para o texto ficar justificado. Há, também, as configurações de 
espaço no início das linhas, espaçamento entre parágrafos, entre outros. 
Uma outra opção importante é a hifenização, ou hyphenate, que se trata 
do processo de inserir um hífen para separar uma palavra ao final de 
uma linha e começo de outra linha. Caso essa opção esteja habilitada, o 
texto será ajustado conforme o tamanho da linha, dividindo as palavras 
automaticamente.
5. Importação e exportação de imagens
É possível inserir um arquivo de imagem já existente dentro do projeto 
do Photoshop. Para isso, a forma mais simples é arrastando o arquivo 
de uma pasta para a interface do programa. Além disso, ela pode ser 
inserida por meio da opção de Inserir Incorporado, ou Place Embedded, e 
Inserir Vinculado, ou Place Linked (ADOBE, 2021). A diferença entre essas 
duas opções é que, na primeira, a imagem é copiada para dentro do 
projeto, não havendo mais ligação com o arquivo externo. Já na segunda 
opção, a imagem é inserida, porém ainda depende do arquivo externo 
existir, ou seja, ainda está vinculada ao arquivo original. Em outras 
palavras, caso uma imagem vinculada seja apagada do computador, 
ela desaparecerá do projeto. Da mesma forma, caso ela tenha alguma 
alteração, essa alteração será visível dentro do projeto. Nesses casos, 
podemos ver a diferença entre os dois tipos de imagem pelo painel de 
camadas, conforme a figura a seguir.
16
Figura 7 - Painel de camadas texto no Adobe Photoshop
Fonte: captura de tela do Adobe Photoshop.
Nessa figura podemos reparar que a camada que foi vinculada possui 
um ícone de corrente, indicando que ela está vinculada ao arquivo 
externo. Esse vínculo é útil quando trabalhamos com arquivos pesados, 
os quais não deixarão o projeto mais pesado, o que seria o caso se 
fossem imagens incorporadas. Já a camada “incorporada” foi convertida 
automaticamente para um objeto inteligente, ou smart object. Esse é 
um recurso em que a camada é preservada com as suas propriedades, 
inclusive a quantidade original de pixels (ADOBE, 2021). Assim, se uma 
camada deste tipo possui seu tamanho reduzido e depois ampliado 
novamente, não pendendo sua qualidade, algo que acontece com uma 
camada comum.
Por fim, ao salvar um arquivo em um editor de imagens, há 
propriedades intrínsecas ao programa que precisam ser armazenadas 
no arquivo. Desse modo, não é possível salvar muitas dessas 
propriedades na maioria dos formatos comuns de imagem. Por padrão, 
o Photoshop salvará no formato .psd, o GIMP em .xcf, o Illustrator em .ai, 
e assim por diante. Esses formatos podem ser chamados de formatos 
nativos de cada ferramenta. Ao salvar em um desses formatos, temos 
a garantia de que propriedades, filtros e camadas serão mantidos 
da maneira que são tratados dentro do software. No entanto, é 
comumente enviamos um projeto ou o abrimos em outro software que 
17
não reconhece esse padrão. Dessa forma, é importante salvar em um 
formato de imagem facilmente aberto, sendo os mais usados o .JPG e o 
.PNG. Para animações, há o .GIF, além de formatos menos conhecidos 
como o .APNG e o .MNG. Uma consideração importante a respeito 
desses formatos é que, ao salvar uma imagem em um deles, perde-se as 
propriedades de edição, como a separação por camadas ou os ajustes 
de filtro e efeitos.
Para salvar em formatos de imagem como .PNG e JPG., pode-se salvar 
pela opção normal de Salvar o Arquivo ou de Salvar Como. Caso se 
queira salvar em .GIF é necessário acessar o item de exportar, localizado 
no menu Exportar, ou Export, por meio do qual também é possível 
renderizar o arquivo em vídeo, o que fará com que o projeto seja 
carregado no Adobe Media Encoder, software do pacote Adobe usado 
para renderizar vídeos, entre outras funcionalidades.
No entanto, imagine criar um arquivo com 100 frames e precisar refazê-
los para alterar a cor de fundo da imagem (algo comum no mercado), 
pois os clientes pedem mudanças no produto final? Por isso, ainda que 
o projeto esteja finalizado, é importante manter o arquivo editável do 
Photoshop, caso alguma alteração seja necessária.
Referências
ADOBE. Adobe Photoshop Learn & Support, 2021. Disponível em: https://helpx.
adobe.com/support/photoshop.html. Acesso em: 21 fev. 2021.
FAULKNER, A.; CHAVEZ, C. Adobe Photoshop CC: classroom in a book, guia de 
treinamento oficial. Porto Alegre: Grupo A, 2016. [Minha Biblioteca]
PERUYERA, M. Laboratório de artes visuais: audiovisual e animação. Curitiba: 
InterSaberes, 2020. [Biblioteca Virtual 3.0]
https://helpx.adobe.com/support/photoshop.html
https://helpx.adobe.com/support/photoshop.html
18
Tratando e editando imagens
Autoria: Felipe Orsini Martinelli
Leitura crítica: Gabriela Silveira Barbosa
Objetivos
• Apreender como realizar ajustes básicos em uma 
imagem digital.
• Compreender os principais padrões de cor e como 
são utilizados em projetos de imagem digital.
• Aplicar efeitos e filtros em imagens para projetos de 
animação.
19
1. Introdução
As ferramentas de computação gráfica e manipulação digital de imagens 
são muito úteis para criações artísticas, trazendo inúmeras vantagens 
do meio digital em relação às artes tradicionais. Esses recursos podem 
ser utilizados em projetos de animação para mudanças visuais, 
como a inserção de sombras nas camadas de personagens, criando 
profundidade na imagem, ou a utilização de um efeito parecido com o 
recorte de papéis, ou, ainda, o cut-out. Neste ponto estão os recursos 
de efeitos e filtros, disponíveis nos principais softwares que lidam com 
imagens digitais.
Além disso, outros recursos, como uso de máscaras, são de grande 
utilidade para tratar imagens, sendo úteis para o processo de edição. 
Para compreender esses conceitos, é importante aprender sobre os 
padrões da imagem digital e seus principais usos, o que você aprenderá 
no próximo tópico.
2. Padrões de cor
O padrão de cor, ou modelo de cor, é uma maneira de definir cores 
seguindo uma referência, um modelo em que se pode determinar um 
valor específico para cada uma delas. Como o próprio nome indica, 
os padrões servem para “padronizar” a colorização de documentos. 
Dessa forma, uma cor com um valor específico será sempre a mesma 
em vários computadores ou meios de impressão. Devido as diversas 
finalidades que os editores de imagem possuem, há vários padrões, em 
cada um serve a um propósito específico.
O padrão mais utilizado no meio digital é o RGB, proveniente de Red, 
Green e Blue (em português, Vermelho, Verde e Azul), consideradas as 
três cores primárias aditivas desse modelo. Segundo Paula Filho (2011), 
20
esse padrão segue o princípio de que, a partir de uma intensidade para 
cada uma dessas três cores, é possível criar milhões de outras cores, 
indo do preto até o branco. Precisamente, 16.777.216 cores podem 
ser criadas, usando valores que vão de 0 até 255 para cada uma das 
três cores fundamentais. Quando essas três cores estão com o mesmo 
valor, cria-se a cor preta (0, 0, 0), um tom de cinza (120,120, 120 – 
por exemplo) ou a cor branca (255, 255, 255) (ADOBE, 2021). Outro 
ponto importante é de que esse padrão é utilizado nos monitores de 
computadores e celulares para exibir imagens, sendo esse o padrão 
ideal para se trabalhar com imagens que serão exibidas apenas em meio 
digital. A Figura 1 mostra uma tela de LCD ampliada, em que você pode 
ver a composição dos pixels na sequência de luzes: vermelha, verde, 
azul, vermelha, verde e azul.
Figura 1 - Tela de LCD ampliada
Fonte: Patarapoom Tungchanta/iStock.com.
Em seguida, podemos citar o padrão HSB, em que o H corresponde a 
hue, ou matiz, que é a propriedade que distingue uma cor de outra, por 
exemplo um azul de um verde; o S vem de saturation, ou saturação, 
21
que corresponde à cor com mais ou menos ruído, indo da cor cinza 
até a cor vibrante; assim, um valor baixo de saturação mostra uma cor 
mais “apagada”, próxima dos tons de cinza, enquanto um valor alto 
mostra uma cor “viva”; por fim, a última letra é B de brightness, ou brilho, 
que mostra uma cor mais clara ou mais escura, indo do preto até o 
branco. Essa última propriedade pode variar em outros três padrões 
relacionados, o HSI, em que temos I de intensity (intensidade), HSL com o 
L de luminosity (luminosidade), e o HSV com o V de value (valor). 
A Figura 2 mostra a ferramenta de seleção de cor do Adobe Photoshop, 
em que é possível ver a diferença em um valor HSB. A faixa com várias 
cores é o valor de matiz, enquanto no quadrado grande há a variação de 
saturação e brilho em uma matiz. Por sua vez, a cor no canto superior 
direito é a cor com saturação e brilho no valor máximo de 100%. No 
canto inferior esquerdo, os dois valores estão em 0%. Nesse exemplo, 
a matiz é da cor azul. Na figura a seguir, observe que, na ferramenta, a 
mesma cor é mostrada com o valor nos padrões RGB, Lab e CMYK, além 
do HSB.
Figura 2 - Seletor de cores (color picker) do Adobe Photoshop
Fonte: captura de tela do Adobe Photoshop.
Ademais, pode-se citar o modo CIE Lab, que corresponde às cores que 
podem ser vistas pela visão humana, descrevendo como uma cor se 
22
parece e não uma quantidade específica de luz em um canal de cor. Esse 
é um modo útil para converter cores de um padrão para outro, que é 
composto pela luminosidade, indicado pela letra “L”; o componente “a”, 
que indica cores do verde ao vermelho; e o componente “b”, que indica 
do azul ao amarelo (ADOBE, 2021).
Por fim, diferentemente dos padrões que lidam diretamente com luz, 
há o CMYK, que é um padrão voltado para impressão. Logo, trata-se de 
uma padronização em cima de quatro cores para tinta: ciano, magenta, 
amarelo e preto, ou cian, magenta, yellow e black, cores consideradas 
como subtrativas, o que quer dizer que a adição de cores irá aproximá-
las da cor preta, considerada a ausência de luz. Esse efeito é o oposto 
do RGB, modelo no qual a adição de cores irá em direção à cor branca 
que é a presença de luz em uma frequência alta. Como o CMYK se trata 
de um modelo para impressão, as cores exibidas na tela e no resultado 
impresso podem variar. A existência da pigmentação preta se deve ao 
fato de que não há como misturar as outras três cores para se chegar no 
preto, além dos problemas de deslocamento do material gráfico durante 
a impressão das três cores. A Figura 3 mostra uma comparação entre 
o modelo RGB e o CMY, que seria o CMYK sem o preto. Repare que, a 
junção das cores ciano, magenta e amarelo cria uma cor escura, mas 
não chega no preto, motivo pelo qual há a quarta pigmentação.
Figura 3 - Comparação entre os padrões citados
Fonte: petrroudny/iStock.com.
23
Em um projeto de animação, os padrões mais utilizados são RGB e 
HSB. O RGB é o padrão em que os principais formatos de arquivo 
armazenarão as cores, porém, esse não é um formato tão intuitivo para 
se trabalhar. Não existe uma relação numérica direta entre um azul claro 
e um azul escuro, relação que é facilmente verificada no padrão HSB, 
sendo extremamente útil ao se trabalhar com o ajuste de cores em um 
projeto de imagem digital.
3. Uso de máscaras em camadas
Quando se trabalha com imagens digitais, é necessário exibir apenas 
um trecho de uma camada. Isso pode ser feito excluindo o trecho que 
não se quer mais com a ferramenta de borracha, ou pela seleção e, 
posterior, exclusão. No entanto, essas ações excluem os pixels sem 
a possibilidade de recuperá-los. Caso um arquivo tenha um trecho 
excluído e seja salvo e fechado, ao abri-lo novamente, aquele trecho 
não poderá ser recuperado. Diante disso, a ferramenta de máscaras 
é de grande importância, pois, ela produz o mesmo efeito visual (uma 
parte não é mais visível), porém, preservando essa área. Com isso, a 
imagem original não será modificada, em outras palavras, a máscara, 
assim como no mundo real, esconde algo. Caso essa área oculta seja 
necessária na composição gráfica, basta alterar a máscara para que 
essa parte se torne visível, sendo, também, um tipo de edição não 
destrutiva.
No Photoshop, assim como na maioria dos editores de imagem, 
é possível criar máscaras de bitmap, isto é, máscaras feitas de 
uma malha de pixels. Essa máscara pode ser chamada de máscara 
de corte, estando ligada diretamente a uma camada de imagem 
(FAULKNER; CHAVEZ, 2016). Além disso, temos as máscaras vetoriais 
que, assim como as imagens vetoriais, não terão alteração na 
resolução, por serem compostas de traços vetoriais. Dessa forma, 
24
a máscara pode ser inserida pelo menu superior ou pelo painel de 
camadas. Ela é representada por um retângulo que terá as cores 
conforme o que é mostrado ou não, assim: o que estiver pintado de 
branco na máscara será exposto na imagem, o que estiver pintado de 
preto será escondido e o que estiver em tons de cinza será exibido 
parcialmente, conforme a figura a seguir.
Figura 4 - Exemplo de aplicação de máscara
Fonte: adaptada de captura de tela do Adobe Photoshop e https://pixabay.com/pt/photos/
animal-de-estima%C3%A7%C3%A3o-corgi-cachorro-3389729/. Acesso em: 11 maio 2021.
No exemplo, a camada possui uma área preta que é escondida na 
exibição da imagem. Enquanto isso, a área branca é mostrada até chegar 
na área em que há um gradiente com vários tons de cinza. Por sua vez, 
a segunda camada foi inserida para exibir o resultado de quando a 
máscara é incorporada definitivamente na camada, criando uma edição 
destrutiva. Além disso, outro detalhe importante é que há um ícone 
de corrente entre a camada e sua máscara, isso indica que a máscara 
possui sua movimentação dependente da camada original e vice-versa. 
Ou seja, caso a camada original seja movida, rotacionada ou tenha 
seu tamanho alterado, o mesmo ocorrerá com a máscara. No entanto, 
https://pixabay.com/pt/photos/animal-de-estima%C3%A7%C3%A3o-corgi-cachorro-3389729
https://pixabay.com/pt/photos/animal-de-estima%C3%A7%C3%A3o-corgi-cachorro-3389729
25
caso clique na corrente, essa dependência é retirada, sendo possível 
movimentar a camada sem que a máscara saia do lugar. Por fim, caso 
se queira que o efeito da máscara seja aplicado de maneira definitiva na 
camada, como foi feito na segunda camada, basta clicar na miniatura da 
máscara no painel de camadas e selecionar a opção de aplicar máscara 
(apply mask).
Ademais, outro ponto importante no uso de camadas são as 
ferramentas de seleção. Elas podem ser usadas nas seleções 
retangulares, circulares, poligonais ou nas ferramentas de seleção por 
meio de cores e contornos. Essas ferramentas auxiliam no fluxo de 
trabalho, criando seleções de objetos sem a necessidade de realizar 
o contorno manualmente. Nesse contexto, temos três ferramentas: 
a primeira delas é a varinha mágica (magic wand), que serve para 
selecionar um conjunto de cores parecidas, que podem estar próximas 
ou não na imagem; a segunda ferramenta é a seleção rápida (quick 
selection tool), que quando é clicada e arrastada pela imagem vai 
detectando os contornos dos objetos; por fim, temos a ferramenta 
de seleção de objeto (object selection tool),que identifica um objeto 
dentro de uma área selecionada e realiza o contorno do mesmo 
automaticamente. Em muitos casos, essas ferramentas realizam um 
ótimo trabalho, contudo, em outros casos ainda é preciso realizar alguns 
ajustes manuais. A Figura 5 mostra a tela de selecionar e mascarar 
(select and mask), em que é possível fazer um refinamento da máscara. 
Note que, há várias opções de ajuste, com pincéis e configurações 
de suavidade e contraste. Assim, podemos perceber na imagem do 
exemplo que a mão está avermelhada, em razão de não ter sido incluída 
na seleção para a máscara. O cenário, que é branco, encontra-se rosado, 
pois faz parte da seleção que será escondida quando a máscara for 
aplicada.
26
Figura 5 - Tela da ferramenta de selecionar e mascarar
Fonte: adaptada de captura de tela do Adobe Photoshop e https://www.pexels.com/pt-br/
foto/retrato-animal-retrato-de-animais-conceitual-abstrato-4588047/. Acesso em: 11 maio 
2021.
4. Aprofundamento nos filtros e efeitos
Quando se trabalha com camadas é interessante utilizar efeitos que 
facilitarão o fluxo de trabalho. Nesse sentido, na aba de camadas é 
possível inserir diversos efeitos diretamente nas camadas, como sombra 
projetada ou brilho interno. Por sua vez, esses efeitos serão aplicados à 
camada, sendo atualizados conforme o seu conteúdo é alterado, ou seja, 
caso seja inserido um elemento a mais em uma camada com sombra, o 
efeito será aplicado a esse novo pedaço da camada automaticamente.
As opções de efeitos são encontradas no menu de estilo de camada, o 
qual pode ser acessado clicando duas vezes no nome da camada, ou 
pelo botão de efeitos no painel de camadas. Além disso, há opções de 
estilos, que são combinações de efeitos preestabelecidas, e as opções 
de mesclagem (blending options), com diversas opções como sombra 
projetada (drop shadow), brilho interno (inner glow), chanfro e entalhe 
https://www.pexels.com/pt-br/foto/retrato-animal-retrato-de-animais-conceitual-abstrato-4588047/
https://www.pexels.com/pt-br/foto/retrato-animal-retrato-de-animais-conceitual-abstrato-4588047/
27
(bevel e emboss), entre outros. Com isso, pode-se criar composições 
com efeitos de textura, relevo e sombra. Uma observação importante 
é de que esses efeitos podem ser sobrepostos e, inclusive, duplicados. 
Dessa forma, podemos inserir três efeitos de contorno em uma 
camada, cada um com uma cor e espessura distintas. Ademais, há 
outras configurações para inserir uma cor por cima de toda a camada, 
um gradiente ou um padrão de imagem, o que pode ser usado para 
produzir diversos efeitos de textura. A Figura 6 apresenta um exemplo 
de camada sem efeitos e com os efeitos de brilho interno e acetinado.
Figura 6 - Exemplo de efeitos de camada
Fonte: elaborada pelo autor.
Um ponto importante sobre esses efeitos é de que, caso precise da 
camada sem os efeitos, basta desativá-los, já que eles não alteram os 
pixels da camada diretamente. A esse tipo de tratamento de imagem 
é dado o nome de edição não destrutiva, pois, ele preserva os pixels 
originais da camada.
Outra aplicação possível é o uso de filtros, disponível no menu superior 
da tela, no item Filtro, ou Filter, em que há opções de filtros para 
desfoque, criação de ruído (como deixar uma camada com a textura 
granulada), entre outros. Além disso, outra possibilidade interessante 
28
é a galeria de filtros artísticos, que possui a aplicação de filtros para 
deixar a imagem parecida com uma pintura ou com um desenho. Esses 
filtros podem ser aplicados de maneira não destrutiva, ao ser aplicados 
a uma camada de objeto inteligente (ou smart object). Os smart filters, 
traduzidos como filtros inteligentes, serão aplicados sem alterar a 
imagem, preservando os seus pixels originais, seguindo o princípio dos 
objetos inteligentes. Uma vantagem do uso de filtros dessa maneira é 
de que, caso deseje editar os valores usados no filtro, basta editá-los. 
Assim, segundo a Adobe (2021) também é possível remover o filtro 
com facilidade, pois eles não foram incorporados aos pixels originais 
da imagem. A Figura 7 mostra um exemplo de uma mesma imagem 
convertida em smart object, com três filtros diferentes aplicados a ela: 
desfoque de movimento, carvão (da galeria de filtros, que simula um 
desenho desse material) e adição de ruído.
Figura 7 - Exemplos de filtros com o uso de smart objects
Fonte: adaptada de https://pixabay.com/pt/photos/animal-de-estima%C3%A7%C3%A3o-
corgi-cachorro-3389729/. Acesso em: 11 maio 2021.
Já a Figura 8 mostra a diferença entre a aplicação do mesmo filtro de 
mosaico em camada comum e em smart object. Nesse exemplo, observe 
que, quando utilizamos um smart filter é possível aplicá-lo apenas em 
uma área da imagem, por meio do uso de uma máscara. Caso queira 
editar o filtro, clique em seu nome no painel de camadas e realize as 
https://pixabay.com/pt/photos/animal-de-estima%C3%A7%C3%A3o-corgi-cachorro-3389729/
https://pixabay.com/pt/photos/animal-de-estima%C3%A7%C3%A3o-corgi-cachorro-3389729/
29
alteração desejadas. Perceba, também, que, com exceção da área não 
afetada na imagem da esquerda pela máscara, as duas camadas se 
tornam visualmente idênticas no projeto.
Figura 8 - Diferença de camadas com o mesmo filtro
Fonte: adaptada de captura de tela do Adobe Photoshop e https://pixabay.com/pt/photos/
animal-de-estima%C3%A7%C3%A3o-corgi-cachorro-3389729/. Acesso em: 11 maio 2021.
Referências
ADOBE. Adobe Photoshop Learn & Support, 2021. Disponível em: https://helpx.
adobe.com/support/photoshop.html. Acesso em: 4 mar. 2021.
FAULKNER, A.; CHAVEZ, C. Adobe Photoshop CC: classroom in a book, guia de 
treinamento oficial. Porto Alegre: Grupo A, 2016. [Minha Biblioteca]
PAULA FILHO, W. de P. Multimídia: conceitos e aplicações. Rio de Janeiro: LTC, 
2011.
https://pixabay.com/pt/photos/animal-de-estima%C3%A7%C3%A3o-corgi-cachorro-3389729/
https://pixabay.com/pt/photos/animal-de-estima%C3%A7%C3%A3o-corgi-cachorro-3389729/
https://helpx.adobe.com/support/photoshop.html
https://helpx.adobe.com/support/photoshop.html
30
Introdução ao Animate
Autoria: Felipe Orsini Martinelli
Leitura crítica: Gabriela Silveira Barbosa
Objetivos
• Compreender o fluxo de trabalho básico da 
ferramenta Animate.
• Identificar as diferenças entre tipos de projetos a 
serem desenvolvidos no Adobe Animate.
• Escolher o tipo mais apropriado de interpolação 
para um movimento específico.
31
1. Introdução
De acordo com Labrecque (2012), o Animate é um software de animação 
mantido pela Adobe, sendo o sucessor do Flash, ferramenta que foi 
responsável pelo conteúdo de vários sites na Internet durante anos, 
desde simples animações de botões até jogos repletos de recursos de 
interação. Dessa forma, o Animate pode ser utilizado para criação de 
animações, sites, jogos digitais e aplicativos interativos. Ele trabalha 
de forma integrada com tecnologias variadas, tanto para web, 
com a exportação de documentos html5, quanto para celulares e 
computadores, produzindo para realidade virtual.
Embora essa ferramenta conte com vários recursos para interpolação 
de movimento, um dos grandes destaques da animação digital, é 
possível criar projetos seguindo as técnicas de quadro a quadro. 
Independentemente da técnica escolhida, é importante aprender seu 
manuseio, começando pelas suas funcionalidades básicas, o que será 
feito no próximo tópico.
2. Comandos básicos do Adobe Animate
O Adobe Animate segue a mesma organização de interface dos outros 
softwares da Adobe, possuindo as funções principais de criar um arquivo 
novo, ou de abrir um arquivo já existente, na primeira tela do programa. 
Ao escolher a opção de criar um arquivo novo, o programa exibe uma 
janela com algumas configurações de altura e largura (width e height), 
taxa de frames (frame rate) e tipo de plataforma (platform type). A taxa 
de frames indica com quantos frames serão trabalhados por segundo, 
ou seja, quantas vezes a imagem na tela será modificada. Esse valor 
pode ser facilmente alterado depoisque o arquivo foi criado. A opção 
de tipo de plataforma está relacionada com a finalidade do projeto, 
o que é importante de ser pensado desde o início do processo de 
32
elaboração. Para isso, temos duas opções, o Action Script 3 e o HMTL5 
Canvas. O Action Script 3, ou AS3, é o nome dado a uma linguagem de 
programação de scripts, enquanto o html5 é a linguagem de marcação 
utilizada para desenvolvimento de programação frontend.
Ao se criar o arquivo, o software abrirá a tela principal de trabalho. 
Note que, os painéis exibidos na tela podem variar, conforme a 
disposição escolhida na opção Janela – Área de Trabalho (ou Window 
– Workspace), disponível no menu superior da tela. Observe na Figura 
1 a área chamada Essenciais (Essentials). Caso mude os painéis de 
lugar, ou os feche, e precise retornar à organização original, selecione 
a opção Redefinir Essenciais, ou Reset Essentials. Além disso, há outras 
configurações, cada uma otimizada para um tipo de trabalho, sendo 
possível criar uma configuração própria e salvá-la.
Figura 1 - Área de trabalho do Animate
Fonte: captura de tela do Animate.
Ao centro se encontra a área da cena, também, chamada de palco. 
Segundo Pinto (2014), essa área se trata da área visível do projeto, assim, 
qualquer elemento que estiver fora dessa área não aparecerá quando 
o projeto for executado. À esquerda da tela, encontram-se as principais 
ferramentas para desenhar na tela. Repare que, há ferramentas para 
33
construir formas geométricas, como retângulos e elipses, além do 
pincel e da caneta. Uma diferença entre o Animate e o Photoshop é de 
que, no primeiro software, tudo que for traçado com o pincel resultará 
em formas vetoriais, independentemente da forma desenhada. Dessa 
maneira, tudo que é desenhado na tela é uma forma, ou shape, que 
possui preenchimento e contorno (fill e stroke). Além disso, você pode 
usar cores e gradientes de cores tanto como preenchimento quanto 
contorno (ADOBE, 2021). Nesse sentido, é importante explicar os 
modos de desenho, que, embora haja essa distinção entre contorno 
e preenchimento, ao traçar uma forma, ou pintar com o pincel, o 
contorno será considerado uma forma separada com o seu próprio 
preenchimento. Por causa disso, é importante verificar o que está 
selecionado para modificar as cores. Contudo, isso pode ser evitado 
selecionando a função de modo de desenho de objeto (object drawing 
mode), no painel de propriedades em todas as ferramentas de desenho. 
Com esse modo ativado, tudo que for desenhado será inserido em 
um objeto separado do resto da composição, unindo o contorno e o 
preenchimento. Além disso, as ferramentas de pincel possuem várias 
configurações de espessura, pressão e a possibilidade de usar um pincel 
com traçado personalizado.
Outra ferramenta importante é o lápis, que pode ser ajustado pela 
opção “modo de lápis”, disponível nas propriedades da ferramenta, para 
criar formas mais fiéis ou menos fiéis ao que é traçado. Há três opções 
disponíveis: correção, suavização e tinta (na versão em inglês, straighten, 
smooth e ink). Segundo a Adobe (2021), a opção de correção converterá 
o traçado em uma forma geométrica aproximada do que foi desenhado, 
como uma elipse ou um retângulo. Já a opção de suavização deixará 
as linhas mais suaves, enquanto a opção de tinta não fará nenhuma 
modificação. A Figura 2 mostra a diferença entre o traço feito e o que 
fica na tela ao soltar o mouse com as três possibilidades do lápis, na 
ordem em que foram apresentadas anteriormente, à direita, indicando 
onde a opção pode ser alterada.
34
Figura 2 - Opções da ferramenta lápis
Fonte: captura de tela do Animate.
Outras ferramentas que podem ser citadas são: a caneta, que 
trabalhará com o traçado a partir de linhas retas e curvas, sendo uma 
ferramenta fácil de se usar com o mouse; a ferramenta de texto, que 
serve para inserir blocos de texto no projeto; balde de tinta, para pintar 
preenchimentos.
3. Camadas e símbolos
Como a grande maioria dos softwares de animação, o Animate trabalha 
por meio de camadas, em que cada uma delas pode ter vários objetos, 
imagens importadas ou outros elementos. Além disso, toda camada 
terá um ponto de transformação, ou transformation point. Nesse caso, 
segundo Pinto (2014), o princípio é o mesmo do ponto âncora em 
outros softwares: toda mudança que acontecer de escala, rotação ou 
deslocamento ocorrerá tomando esse ponto como base. Assim, caso 
se queira criar um relógio, todos os ponteiros devem ter esse ponto no 
centro da imagem do relógio. Uma consideração importante é que o 
ponto de transformação pode ser ajustado em um lugar fora da área da 
camada, fazendo com que a camada gire em um eixo fora dela própria.
35
Ainda em relação às camadas, é possível criar uma hierarquia entre elas, 
de modo que, caso a camada A se mova, a camada B a acompanhará. 
Esse recurso é útil na movimentação de personagens, em que existe 
uma dependência direta na movimentação das partes do corpo, por 
exemplo, a mão não pode se mover sozinha pelo espaço, dependendo 
da movimentação do braço, enquanto ele está dependente da 
movimentação do corpo. Essa função pode ser habilitada pela opção de 
exibir parentesco entre as camadas (show parenting view), conforme o 
exemplo da Figura 3, com camadas do corpo de uma personagem.
Figura 3 - Exemplo de hierarquia entre camadas
Fonte: captura de tela do Animate.
Na tela, para animal algo é preciso transformá-lo em um objeto, 
conforme o que foi citado anteriormente, ou em um Símbolo Gráfico, 
ou Graphic Symbol, podendo haver vários símbolos em uma mesma 
camada. Para isso, basta selecionar o conteúdo e clicar no botão 
“Converter para Símbolo Gráfico”, ou Convert to Graphic Symbol, no painel 
de propriedades. Há três tipos de símbolos: Movie Clip, Button e Graphic. 
Contudo, há várias diferenças entre eles, por exemplo, o Movie Clip e o 
Graphic servem para criar movimentações. Embora pareçam a mesma 
coisa, uma diferença fundamental entre eles é de que o Movie Clip pode 
ser controlado por código, enquanto o Graphic não (ADOBE, 2021). Já o 
Button serve para criar botões de interação, animados ou não.
36
Outro ponto importante é de que nas camadas é possível inserir 
desenhos, textos ou arquivos importados. Essa última possibilidade 
é feita pelas opções de importação disponíveis no menu de arquivo, 
ou file, em que se pode importar diretamente para o palco, ou para a 
biblioteca. A biblioteca é um espaço presente em todo projeto, onde 
serão colocados todos os gráficos criados e arquivos importados para 
dentro do projeto. A biblioteca é muito útil para organizar o projeto, 
além de servir para inserir várias vezes um mesmo objeto. Então, 
imagine que haja um prédio que aparece repetidas vezes em diversas 
partes de um projeto. Caso seja necessário mudar a cor de uma janela, 
basta realizar essa ação no objeto que se encontra na biblioteca e a 
alteração será repassada para todos os outros objetos vindos dele. Ou 
seja, existe uma hierarquia entre as propriedades do objeto principal e 
suas cópias.
Depois disso, devemos abordar a linha do tempo, ou timeline, 
normalmente exibida na parte inferior da interface, sendo esse 
um painel fundamental para qualquer projeto de animação. Existe 
uma referência numérica dos frames, sendo fácil clicar no número 
correspondente e inserir um frame ali. Há três tipos de quadros, ou 
frames, que podem ser inseridos: quadro-chave (keyframe), quadro-
chave em branco (blank keyframe) e quadro (frame). O quadro-chave é 
aquele em que há alguma mudança importante, ou armazenamento de 
propriedade de uma camada. Nele podemos inserir códigos de script 
(ADOBE, 2021) ou, ainda, criar uma animação quadro a quadro apenas 
com o uso de frames chave, considerando que cada desenho novo será 
um novo quadro-chave. Quando se cria um quadro-chave, ele terá a 
informação visual do quadro anterior, o que pode ser muito útil quando 
a animação possui pequenas variações entre os quadros. Já o quadro-chave em branco é útil quando se precisa desenhar todo o quadro, 
pois inserirá um quadro-chave sem nenhuma informação visual. Por 
fim, os quadros normais expandirão os quadros-chave. Por exemplo, 
suponha que há um quadro-chave na posição 1 e um quadro é inserido 
37
na posição 10. O software, por sua vez, estenderá o conteúdo do quadro 
1 por todos os outros quadros até o número 10. Caso seja inserido um 
quadro-chave na posição 10, o conteúdo do quadro 1 será estendido até 
a posição 9. Além disso, é possível copiar, recortar e colar os quadros 
dentro da linha do tempo, por meio das respectivas ações no menu, ou 
pelo uso dos atalhos Ctrl + Alt + C, Ctrl + Alt + X e Ctrl + Alt + V.
Para se trabalhar por entre os quadros, há um recurso muito útil, 
disponível em ferramentas como Photoshop e ToonBoom, além do 
Animate, que é a casca de cebola, ou onion skin, utilizada na versão 
em português como papel transparente. Trata-se de um recurso que 
permite ver o conteúdo dos frames anteriores e posteriores ao que 
estamos editando, permitindo uma melhor organização e precisão no 
traço de movimentações contínuas. Esse recurso pode ser facilmente 
habilitado clicando no botão correspondente no painel da linha do 
tempo. Além disso, ele pode ser habilitado para uma quantidade 
específica de frames ou para a linha do tempo inteira, o que pode 
ser útil para ver a movimentação que ocorre no projeto em sua 
totalidade.
Outro recurso disponível, que pode ser colocado como uma variação 
do recurso anterior, é a opção de editar múltiplos quadros, que está 
disponível no painel de linha do tempo, ao lado do botão de casca de 
cebola, por meio do qual o programa mostra vários frames ao mesmo 
tempo, sendo possível manipular qualquer elemento que apareça na 
tela.
4. Interpolações no Adobe Animate
A extensão dos quadros é útil para prolongar o tempo de exibição 
de uma imagem, além de servir para a criação de interpolações de 
movimento. Aqui, a interpolação é entendida como o processo em 
38
que são dadas informações iniciais e finais de um movimento ou 
propriedade de um objeto, e o software calcula as intermediárias, 
como dar a posição inicial e final de uma bolinha e os quadros 
intermediários são feitos automaticamente pelo programa. No 
Animate, trabalhamos com três tipos de interpolação: a interpolação 
clássica, interpolação de movimento e interpolação de forma. Essas 
interpolações são vistas na linha do tempo, pela indicação de cores 
nos quadros. A Figura 4 mostra a diferença entre essas possibilidades 
em um projeto, note que, as camadas possuem nomes escritos sem 
acento e sem espaço, pois o programa não aceita caracteres especiais 
e espaço no nome das camadas.
Figura 4 - Diferentes interpolações em camadas
Fonte: captura de tela do Animate.
A interpolação clássica, ou classic tween, trabalha com posição, rotação, 
escala, cor e transparência de elementos na tela, o método mais antigo 
para interpolação da ferramenta. Nesse sentido, uma propriedade 
importante da interpolação é a opção de efeitos, disponível no painel 
de propriedades no item de interpolação. Por meio dessa opção, pode-
se escolher um gráfico de movimentação preestabelecido, ou criar um 
próprio, que fará o movimento variar de diversas maneiras. A Figura 
5 mostra uma bolinha azul se movendo para a direita, com três tipos 
distintos de movimentação.
39
Figura 5 - Exemplos de interpolação clássica
Fonte: captura de tela do Animate.
Segundo a Adobe (2021), já a interpolação de movimento trabalha com 
a mudança de valores em alguma das propriedades de cor, tamanho, 
posição, rotação, efeitos e filtros. Quando utilizada para movimentações 
na tela, ela possui uma vantagem em relação à interpolação clássica, que 
traçar na tela o caminho que o símbolo fará. Por sua vez, esse caminho 
é editável, dando maior liberdade na criação dos movimentos. A Figura 6 
mostra o trajeto criado por essa interpolação, nesse caso, note que cada 
ponto da linha azul será a posição do ponto de transformação em cada 
quadro da animação.
Figura 6 - Exemplo de interpolação de movimento
Fonte: captura de tela do Animate.
40
Por último, a interpolação de forma pode ser feita entre dois quadros-
chave que possuem formas desenhadas em vez de símbolos. Essa 
ferramenta fará com que a forma inicial se transforme visualmente na 
segunda forma, realizando as transformações necessárias para isso, 
na quantidade de quadros disponíveis entre as duas formas. A forma 
pode mudar de cor gradualmente, esticar, aumentar, diminuir, entre 
outras possibilidades. A Figura 7 mostra um exemplo de um círculo se 
transformando em uma estrela, que é exibida pelo recurso de onion skin. 
Pode-se verificar que esse é um efeito automático, bastando inserir a 
forma inicial e a final e aplicar a interpolação.
Figura 7 - Exemplo de interpolação de forma
Fonte: captura de tela do Animate.
Depois que o movimento foi criado por alguma das interpolações, é 
possível converter a sequência de frames para uma animação quadro 
a quadro, o que pode ser útil para ajustar alguns pontos específicos 
nos quadros da animação. Além disso, temos a possibilidade de se 
converter os quadros-frame em intervalos, mantendo a posição apenas 
do primeiro quadro (ADOBE, 2021). Essa técnica permite com que a 
animação fique menos fluída, dando uma ideia de stop motion.
5. Outros recursos
Por fim, há dois recursos bem interessantes para criar movimentações, 
que são a ferramenta Bone (que pode ser traduzida como osso) e 
41
a de distorção de ativo (Asset Warp Tool). Segundo a Adobe (2021), a 
ferramenta Bone permite criar uma estrutura interna nos objetos, 
facilitando a animação, em especial, em personagens, como se fosse 
uma estrutura óssea. Ela pode, inclusive, limitar a movimentação de 
partes específicas da estrutura, também chamada de armadura. A 
ferramenta Bone possui algumas estruturas prontas, em que basta 
inserir em uma personagem, ajustar as partes e realizar os movimentos.
Já a ferramenta de distorção cria uma malha poligonal por cima de 
um plano e insere pinos nessa malha para deformá-la. Essa segunda 
ferramenta é ideal para animar imagens bitmap, ou seja, arquivos 
importados do tipo JPG, PNG, entre outros. A Figura 8 mostra um 
exemplo do uso desse recurso, primeiramente, ela foi primeiro 
importada pela opção de importação disponível no menu superior, 
no item arquivo, ou file. Note que, os pinos são colocados em pontos 
específicos conforme a movimentação que se queira realizar com o 
objeto trabalhado.
Figura 8 - Exemplo do uso da ferramenta de distorção
Fonte: captura de tela do Animate.
Aqui vale uma consideração, nenhuma dessas ferramentas é melhor 
do que a outra, sendo de extrema importância testá-las para verificar 
quais as limitações de cada uma delas. A partir dessa distinção é possível 
avaliar qual delas é melhor para o tipo de animação definida dentro de 
um projeto.
42
Referências
ADOBE. Guia do usuário do Animate, 2021. Disponível em: https://helpx.adobe.
com/br/animate/user-guide.html. Acesso em: 12 mar. 2021.
LABRECQUE, J. Learning Adobe Edge Animate. Birmingham: Packt, 2012.
PINTO, M. J. Adobe Edge Animate CC: animação e interatividade para a web. São 
Paulo: Saraiva, 2014.
https://helpx.adobe.com/br/animate/user-guide.html
https://helpx.adobe.com/br/animate/user-guide.html
43
Recursos de Interação no Animate
Autoria: Felipe Orsini Martinelli
Leitura crítica: Gabriela Silveira Barbosa
Objetivos
• Implementar interações em projetos no Adobe 
Animate.
• Compreender os pontos básicos para inserir códigos 
no projeto.
• Exportar projetos para diversos tipos de arquivo, de 
acordo com suas características e especificações.
44
1. Introdução
O Animate é uma ferramenta repleta de recursos para a criação de projetos 
digitais. Com ele, podem ser feitos jogos, animações e aplicações para web 
ou para dispositivos móveis. Contudo, uma de suas funções importantes, 
para o qual há vários recursos disponíveis, é a interação,que ocorre 
quando o usuário utiliza algum dispositivo para alterar algo no projeto, 
como apertar um botão, mover uma personagem ou falar no microfone.
A interação ocorre por meio da execução de um código, o qual é 
trabalhado por meio do uso de linguagens de programação. Assim, 
o Animate trabalha, fundamentalmente, com duas linguagens de 
programação: ActionScript e JavaScript. Apesar disso, não é necessário 
saber programar para conseguir criar projetos simples de interação 
no software, por causa de alguns recursos que facilitam o processo 
de desenvolvimento, como o painel Snippets. No entanto, possuir uma 
noção básica de como o código funciona facilita bastante o trabalho no 
programa, inclusive para saber como requisitar algo a um profissional da 
área de programação com quem esteja trabalhando. Para compreender 
melhor esses fundamentos, é importante entender o que é o HTML5 e a 
relação das linguagens de programação com o software.
2. HTML5 e JavaScript
A primeira linguagem, a HTML, é a sigla de Hypertext Markup Language, ou 
Linguagem de Marcação de Hyper Texto. Por “Hyper Texto”, considera-
se um tipo de arquivo que lida com vários tipos de mídias, como texto, 
imagens, vídeos, animação e áudio, conectados por links. Trata-se de 
uma linguagem de marcação de documentos para web que se utiliza de 
tags, ou etiquetas, para indicar como os elementos devem aparecer na 
página. Nesse contexto, várias versões do HTML foram realizadas até se 
chegar à atual, chamada de HTML5, que é considerada o padrão para a 
45
criação de sites. Esse formato permite a inclusão de texto, imagem, vídeos, 
hiperlinks e, o principal para este tema, projetos com o uso da tag Canvas. 
Esse recurso foi criado com a ideia de se inserir elementos gráficos na tela 
de uma forma simples, a partir de uma outra linguagem, o JavaScript. De 
acordo de Sousa (2018, p. 15), o uso de Canvas é “indicado para projetos 
multimídia, jogos, composição gráfica e efeitos visuais sofisticados”.
A segunda linguagem citada se chama JavaScript e foi criada pela Sun 
Microsystems. Ela se trata de uma linguagem de programação muito 
utilizada na web para criar interações e animações em sites, sendo uma 
das linguagens com que se pode trabalhar dentro do Animate, para 
depois exportar o projeto em HTML5 com o recurso de Canvas. Um 
documento HTML possui uma vantagem em relação a outros tipos de 
arquivo, pois não é necessário nenhum plugin para que uma página 
com Canvas funcione corretamente (ADOBE, 2021), diferentemente do 
que acontecia no antigo formato SWF. Assim, qualquer navegador que 
siga as especificações padronizadas de HTML5 mostrará o projeto sem 
maiores problemas. De maneira resumida, pode-se dizer que o HTML5 é 
uma linguagem de marcação, servindo para organizar o conteúdo de um 
site ou de uma aplicação. Por sua vez, o JavaScript servirá para adicionar 
interação aos projetos, como as animações, programando desde menus 
deslizantes até personagens se movendo pela tela. Por ser uma linguagem 
de programação, o JavaScript traz para o desenvolvimento diversas 
funcionalidades que só poderiam funcionar com uma linguagem desse 
tipo, como o uso de variáveis, muito comum no armazenamento de pontos 
em jogos, ou as estruturas de repetição, que podem ser usadas na criação 
de inúmeros inimigos em uma fase de determinado jogo, ou para animar 
vários elementos de uma vez em um cenário de uma animação.
Já o ActionScript 3 é uma linguagem de programação que foi criada para 
ser usada no Flash, começando como uma linguagem mais simples 
para executar quadros em animações. Com o tempo, ele recebeu vários 
recursos mais elaborados para interação, contando com comandos 
específicos de uso com mouse, teclado, entre outras possibilidades.
46
No Animate, há algumas opções para a criação de arquivos em relação a 
qual plataforma o projeto será construído e qual linguagem utilizar. Assim, 
podemos escolher entre ActionScript 3 e HTML5 Canvas, ou plataformas 
mais avançadas como alguns tipos de arquivo em Realidade Virtual ou 
em WebGL, que lida com projetos 3D. Para criar um projeto que use 
JavaScript é necessário selecionar a opção na tela de Novo Documento 
(New Document), no item Tipo de Plataforma (Platform Type). Aqui é 
importante destacar que, caso seja escolhida a opção ActionScript 3.0, o 
projeto será estruturado em ActionScript, sendo necessário converter o 
arquivo, processo que gera um novo arquivo a partir do primeiro. Assim, 
é importante que se saiba em qual linguagem e para qual finalidade será 
criado o projeto, até porque existem recursos disponíveis apenas em uma 
das opções e outros recursos disponíveis apenas na outra. O ajuste na 
criação do arquivo pode ser visto na Figura 1. Nesta figura, note que, um 
arquivo com as medidas de 1024 pixels de largura por 768 pixels de altura 
será criado, com 15 quadros por segundo, na opção HTML5 Canvas.
Figura 1 - Menu inicial com as opções de plataforma
Fonte: captura de tela do Animate.
47
A inserção de códigos de script acontece por meio do painel Ações 
(Actions). Há um recurso importante ao trabalhar com projetos 
em HTML5, que é o assistente de códigos de ações, o qual pode 
ser acessado pelo botão no canto superior direito do painel de 
ações. Esse botão fica habilitado apenas em projetos HMTL5, não 
sendo possível utilizá-lo em projetos em ActionScript. Por sua vez, 
esse recurso permite com que trechos de código sejam inseridos 
completos, realizando apenas alguns ajustes, sem a necessidade de 
escrevê-los desde o início (LABRECQUE, 2019). Tal recurso é ótimo 
para quem não está habituado a programar ou não conhece, ainda, 
os recursos próprios da biblioteca usada no software. Além disso, 
essa é uma ferramenta útil também para aprender como o código 
funciona e como irá impactar no projeto como um todo ao alterar os 
valores disponíveis. O assistente possui uma lista com algumas ações 
comumente usadas, como parar a animação ou rotacionar um objeto 
por meio de ações do mouse.
Um exemplo de uso desse recurso é o de rotacionar objetos. No 
exemplo foi criado um quadrado e convertido em símbolo do tipo 
Movie Clip. O código pode ser criado no assistente do painel de 
ações, selecionando a opção de rotacionar, e indicar que a ação 
deve acontecer quando o próprio objeto for clicado com o mouse. O 
programa vai inserir um código, como o exemplo na Figura 2. Repare 
que, há algumas linhas cinzas, as quais são comentários que ajudam 
a entender o código. Nesse contexto, tudo que estiver entre /* e */ 
não será executado pelo software, então, pode-se inserir diversos 
comentários para auxiliar na compreensão do código. Comumente, 
também, utiliza-se os comentários para organizar o código, indicando 
o que cada trecho vai fazer ao ser executado. Note que, há poucas 
linhas e, ao executar o projeto, a ação vai acontecer conforme o que 
foi selecionado no assistente.
48
Figura 2 - Exemplo de código criado com o assistente de ações
Fonte: captura de tela do Animate.
Dessa forma, ao executar o projeto, quando clicar no quadrado com 
o mouse, o quadrado irá rotacionar 30 graus. O grau de rotação pode 
ser ajustado facilmente no código ou, ainda, podemos adicionar outras 
ações que devem acontecer quando a interação é realizada. Além 
dessas possibilidades, enquanto recurso de interação, o mouse pode 
ser usado de várias maneiras nos projetos, tendo como base as ações 
de pressionar um botão, manter o botão pressionado, soltar o botão e 
arrastar o mouse na tela. Além disso, podemos usar a sua posição na 
tela para interações, como fazer uma personagem caminhar em direção 
à posição do mouse na tela.
3. Criando botões
Os botões são objetos importantes dentro de projetos, tanto para lidar 
com interações como para criar interfaces. Além disso, criar um botão é 
um excelente exercício para entender como funcionam as ações em que 
se usa o mouse, entre as quais as citadas no tópico anterior.
49
Um primeiro ponto a se levar em consideração é o uso de linhasdo 
tempo, ou timelines, internas a um símbolo. Dessa forma, um projeto 
possui uma linha do tempo geral, na qual todos os objetos são 
distribuídos pelas camadas. Depois disso, cada objeto pode ser editado 
internamente, ainda seguindo a linha do tempo principal. Ao converter 
um objeto em símbolo, ele passa a ter uma linha do tempo interna, a 
qual será executada em loop enquanto o projeto estiver funcionando. 
Ou seja, caso a linha principal tenha 50 quadros e um símbolo tenha 
cinco, esse símbolo repetirá seus quadros 10 vezes a cada vez que a 
linha principal for executada.
Os três tipos de símbolos possuem uma linha do tempo própria (movieclip, 
botão e gráfico), sendo que os botões terão uma linha diferente, com 
quatro quadros, cada um indicando um estado, considerando a natureza 
de um botão que é pressionado (ADOBE, 2021). Em outras palavras, lida-
se com uma condição de interação, em que é possível inserir uma imagem 
diferente ou alterar a cor do botão em cada estado existente. O estado de 
“Acima” (Up) indica que o botão não está selecionado e nem pressionado, 
como se não houvesse interação com ele. Nesse estado, é comum que 
se insira uma imagem do botão sem estar pressionado. O segundo 
estado é o de “Sobre” (Over), que indica que o botão foi selecionado, mas 
não foi pressionado, ou o mouse está por cima dele. Em seguida, há o 
terceiro estado, o de “Abaixo” (Down), usado enquanto o botão estiver 
pressionado. Por fim, o quarto estado, de “Ocorrência” (Hit), que indica 
a área que será utilizada na tela para realizar as ações de clique, ou seja, 
a área da tela que responderá à interação. Segundo a Adobe (2021), 
caso esse quadro esteja vazio, a área do primeiro quadro será utilizada 
para este fim. Nesse sentido, um ponto importante a se considerar a 
respeito dos botões é de que devem ter apenas os quatro quadros iniciais, 
pois cada um automaticamente corresponde a um estado. Para inserir 
animações em um dos estados, deve-se inserir um movieclip dentro desse 
quadro. A Figura 3 mostra a linha do tempo de um botão com os quatro 
quadros explicados anteriormente.
50
Figura 3 - Linha do tempo de um símbolo do tipo botão
Fonte: captura de tela do Animate.
Por sua vez, os botões podem trabalhar as mais variadas ações, como: 
sumir com objetos, arrastar elementos pela tela ou abrir o link para uma 
página web. Com o uso do assistente de códigos do painel de Ações, é 
possível inserir interações como: ao clicar no botão, um outro objeto se 
move na tela.
Uma outra possibilidade para inserir códigos prontos é o uso do painel 
Snippets de Código, ou Code Snippets, o qual possui estruturas prontas 
tanto em JavaScript quanto em ActionScript 3. Embora ele tenha 
mais opções do que o assistente explicado anteriormente, os códigos 
do Snippets são apenas inseridos no painel de Ações sem um menu 
para escolher as opções. Assim, qualquer mudança deve ser feita no 
código. Neste ponto é interessante aplicar um código pronto, modificar 
os valores disponíveis e rodar o projeto, assim, se pode aprender o 
funcionamento do código a partir dessas variações.
4. Interação com teclado
Para trabalhar com o teclado, é preciso utilizar uma estrutura de 
condição. Em suma, uma estrutura de condição em um código verificará 
se algo aconteceu, ou seja, se uma condição é verdadeira, e fará 
uma ação caso ela seja. A condição a ser verificada será se uma tecla 
51
específica foi pressionada. Assim, por exemplo, podemos verificar se 
as teclas de seta foram pressionadas, as quais recebem um código 
específico para verificação.
No caso do uso de ActionScript 3, há alguns comandos específicos para 
isso. Inclusive, há um código pronto para verificar se alguma tecla foi 
pressionada no painel de Snippets Codes. Além disso, pode-se trabalhar 
com a verificação de condição, correspondente à quando uma tecla 
específica será pressionada, conforme o que é mostrado na Figura 4. 
Nesse caso, o código corresponde a ações que serão feitas à instância de 
movieclip nomeada como “objeto”.
Figura 4 - Exemplo de código em JavaScript para interação com teclado
Fonte: captura de tela do Animate.
Alguns pontos desse código merecem atenção. Primeiramente, é criada 
uma função para mover o objeto por meio do teclado. Em seguida, 
duas condições são criadas, as quais serão verificadas várias vezes, 
testando se as teclas selecionadas foram pressionadas ou não. Se uma 
das teclas indicadas for pressionada (a condição indicada nas linhas 2 
e 5), alguma coisa ocorrerá (ação indicada nas linhas 3 e 6). No caso, a 
ação é adicionar ou subtrair um valor de 10 pixels no eixo x da posição 
do objeto. Em outras palavras, caso seja pressionada a seta para a 
esquerda, o objeto irá mudar sua posição para 10 pixels a menos do 
52
que a posição anterior. Esse ponto de adicionar e subtrair se deve ao 
fato de que a tela é tida como um plano cartesiano, ou uma planilha de 
pixels, com linhas e colunas. Nesse exemplo, consideramos que o canto 
superior esquerdo da tela é o ponto de coordenadas (0, 0). Então, para 
se mover à esquerda, é necessário subtrair um valor. Para a direita, 
adiciona-se o valor desejado. Seguindo essa mesma ideia, para um 
objeto se mover para cima, também, deve ser subtraído um valor, mas, 
dessa vez, do eixo y de sua posição. Da mesma forma que para se mover 
para baixo, adiciona-se um valor para o eixo y de sua posição. A Figura 5 
exemplifica essa relação entre o espaço e a soma e subtração de valores 
nas coordenadas.
Figura 5 - Movimentação nos eixos x e y
Fonte: elaborada pelo autor.
Outro ponto importante em relação a esse código é de que apenas 
criar a função não é o suficiente para que ela funcione. Ela só será 
executada, de fato, caso seja chamada no decorrer do código. Essa 
ação, por sua vez, é feita na linha 10, que adiciona a execução da função 
toda vez que uma tecla for pressionada. Dessa forma, sempre que uma 
tecla é pressionada, a função é executada para verificar se essa tecla 
é a seta da esquerda ou da direita. Caso seja uma delas, irá executar a 
movimentação do objeto.
53
5. Exportando imagens
Um recurso muito utilizado ao se criar animações, principalmente quando 
se envolve personagens, é a criação de uma planilha de entidades gráficas, 
também conhecida como spritesheet. Trata-se de um arquivo de imagem 
que possui, de forma organizada, os quadros de animação que foram 
usados para algum objeto, trazendo a vantagem de carregar apenas 
um único arquivo de imagem em vez de um para cada quadro (ADOBE, 
2021). Comumente, cria-se um arquivo desse para cada personagem, 
considerando todas os quadros necessários para a construção de cada 
movimentação. Esse recurso possui algumas funções como remover pixels 
das imagens que não foram usados no projeto ou evitar quadros duplicados 
na animação de algum objeto. Essa técnica irá gerar sempre um arquivo 
PNG e um JSON, com informações sobre os quadros existentes no PNG.
Outra possibilidade é a criação de um atlas de textura, que é parecido 
com a planilha de entidades gráficas, tendo a diferença de que não 
exportará os quadros, mas os blocos que compõem o objeto durante as 
animações. Além desses, pode-se gerar vários arquivos PNG para otimizar 
a organização das imagens, além de 2 arquivos JSON com informações 
sobre a distribuição dos elementos nas imagens e como devem ser 
animadas. O quadro a seguir mostra a diferença entre os dois métodos:
Quadro 1 - Comparação entre planilhas e atlas
Recurso Planilha de entidades 
gráficas
Atlas de textura
Desempenho em 
aplicativos móveis
Baixo Alto
Tamanho Ocupa mais espaço Ocupa menos espaço
Qualidade da animação Média Alta
Número de arquivos 
gerados
Dois arquivos: um 
bitmap e um json.
Variável: com base na 
dimensão da imagem.
Fonte: adaptado de Adobe (2021).
54
Por fim, uma consideração importante sobre esses dois métodos é de 
que permitem a exportação e uso das animações criadas em outros 
softwares. Como exemplo, eles podem ser utilizados para exportaranimações para o motor de jogo Unity, de maneira simples com o uso 
de um plugin específico para tal finalidade (ADOBE, 2021). Dessa forma, 
deve-se verificar sempre qual a melhor opção, considerando os pontos 
positivos e negativos que cada uma oferece, conforme as informações 
dadas no Quadro 1.
6. Exportação e publicação de arquivos
Ao finalizar um projeto, ele deve ser convertido para um formato que 
seja executável pelos usuários. Nesse sentido, pode-se exportar ou 
publicar o projeto. Os projetos podem ser exportados como arquivos de 
imagem estática, como JPG e PNG, ou de imagem animada, como GIF. 
Além disso, também é possível gerar arquivos de vídeo, como MP4 e 
MOV, ação realizada junto ao Adobe Media Encoder. Ademais, pode-se 
exportar apenas o áudio do projeto em um arquivo WAV.
Os formatos citados não lidam com interação. Caso o projeto tenha 
conteúdo interativo, será necessário lidar com formatos específicos, 
conforme a finalidade do projeto. Assim, ao criar um projeto em HTML5, 
é possível publicá-lo para um HTML5 Canvas, em que serão gerados 
vários arquivos, sendo um arquivo HTML, com a tag de Canvas, onde 
aparecerá o projeto, um arquivo de extensão JavaScript, o qual possui 
todo o código, além de arquivos de imagem e som, para que o arquivo 
de HTML funcione corretamente. Desse modo, caso o projeto seja 
hospedado em um servidor, todos os arquivos que foram gerados 
precisam estar juntos com ele, seguindo a mesma relação de pastas. 
Além disso, há várias configurações disponíveis na publicação do 
arquivo, como a possibilidade de tornar o projeto responsivo, assim, o 
Canvas será redimensionado automaticamente conforme o tamanho de 
55
tela e tipo de dispositivo usado para ler o arquivo. É possível, também, 
configurar outras opções em relação à qualidade das imagens e em 
relação aos arquivos HTML e JavaScript que serão criados com a versão 
final do projeto. A Figura 6 mostra um exemplo desse painel com as 
configurações existentes.
Figura 6 - Painel de publicação
 
Fonte: captura de tela do Animate.
Caso o projeto tenha sido criado com ActionScript 3, ele pode ser 
exportado para o formato padrão swf, o qual suporta tanto animações 
quanto interações, porém, não pode ser mais inserido em um site, 
por causa do fim do suporte do plugin Flash Player. Por fim, há outras 
tecnologias compatíveis, como o uso em realidade virtual, com o VR 
Panorama e o VR 360, ou WebGL, que lidará com elementos mais 
complexos de animação voltada para web, incluindo elementos 3D. Por 
56
sua vez, cada uma dessas tecnologias terá funcionalidades próprias a 
serem trabalhadas na exportação.
Referências
ADOBE. Guia do usuário do Animate. 2021. Disponível em: https://helpx.adobe.
com/br/animate/user-guide.html. Acesso em: 14 mar. 2021.
LABRECQUE, J. Design simple interactive contente. 2021. Disponível em: https://
helpx.adobe.com/animate/how-to/create-interactive-content.html. Acesso em: 20 
mar. 2021.
SOUSA, R. F. M. Canvas HTML5: composição gráfica e interatividade na web. Rio de 
Janeiro: Brasport, 2013.
https://helpx.adobe.com/br/animate/user-guide.html
https://helpx.adobe.com/br/animate/user-guide.html
https://helpx.adobe.com/animate/how-to/create-interactive-content.html
https://helpx.adobe.com/animate/how-to/create-interactive-content.html
57
BONS ESTUDOS!
	Sumário
	Introdução ao Photoshop
	Objetivos
	1. Introdução
	2. Comandos básicos do Adobe Photoshop
	3. Conceito de camadas
	4. Uso de ferramentas de texto
	5. Importação e exportação de imagens
	Referências
	Tratando e editando imagens
	Objetivos
	1. Introdução
	2. Padrões de cor
	3. Uso de máscaras em camadas
	4. Aprofundamento nos filtros e efeitos
	Referências
	Introdução ao Animate
	Objetivos
	1. Introdução
	2. Comandos básicos do Adobe Animate
	3. Camadas e símbolos
	4. Interpolações no Adobe Animate
	5. Outros recursos
	Referências
	Recursos de Interação no Animate
	Objetivos
	1. Introdução
	2. HTML5 e JavaScript
	3. Criando botões
	4. Interação com teclado
	5. Exportando imagens
	6. Exportação e publicação de arquivos
	Referências