ANIMAÇÕES E FERRAMENTAS VIRTUAIS

Prévia do material em texto

WBA0176_v2.0
APRENDIZAGEM EM FOCO
ANIMAÇÕES E FERRAMENTAS VIRTUAIS
2
APRESENTAÇÃO DA DISCIPLINA
Autoria: Felipe Orsini Martinelli
Leitura crítica: Gabriela Silveira Barbosa
Olá! Nesta disciplina de Animações e ferramentas virtuais, vamos 
aprender vários tópicos relacionados ao uso de softwares 
utilizados na produção de trabalhos dessa natureza. Vamos ver a 
respeito de conceitos da imagem digital que podem ser aplicados 
na criação de projetos de animação, tratamento de imagens, 
aplicações interativas, entre outras opções. 
No Tema 1, vamos começar com as ferramentas básicas do Adobe 
Photoshop, um dos softwares mais usados na indústria criativa. 
Serão vistos com detalhes alguns conceitos, como o uso de 
camadas, os vários tipos de camadas que existem, como inserir 
imagens em nossos projetos e o que sempre precisamos levar 
em conta quando vamos salvar um projeto em um arquivo de 
imagem.
Já no Tema 2, vamos ver algumas técnicas para ajuste de imagens, 
como a função para ajustes de saturação, brilho e contraste. 
Serão explicados os principais padrões de cor utilizados no meio 
digital e sua relação com a tela dos dispositivos, assim como a 
utilização de máscaras em camadas, o que facilita, e muito, nosso 
trabalho. Outro conceito importante é a aplicação de efeitos 
e filtros, que podem dar um outro nível de detalhamento aos 
trabalhos.
No Tema 3, vamos aprender as principais funcionalidades do 
software Adobe Animate, muito útil na criação de animações e 
projetos que envolvem interação. Serão vistos conceitos como o 
uso de símbolos, hierarquia entre camadas e os tipos diferentes 
3
de interpolação, técnica fundamental para a criação de animações 
digitais.
Por fim, no Tema 4, daremos enfoque às ferramentas para a 
criação de projetos interativos no Animate. Serão vistas algumas 
funcionalidades que ajudam a criar códigos de interação, mas 
sem serem necessários conhecimentos em programação. Em 
seguida, vamos ver as opções existentes para exportar os 
arquivos e como realizar ajustes importantes para isso.
Esperamos que esta disciplina sirva não apenas para que você 
aprenda sobre esses assuntos, mas também para você se 
aprofundar em funcionalidades mais complexas, que podem 
ajudar na criação de animações. 
Bons estudos!
INTRODUÇÃO
Olá, aluno (a)! A Aprendizagem em Foco visa destacar, de maneira 
direta e assertiva, os principais conceitos inerentes à temática 
abordada na disciplina. Além disso, também pretende provocar 
reflexões que estimulem a aplicação da teoria na prática 
profissional. Vem conosco!
Introdução ao Photoshop
______________________________________________________________
Autoria: Felipe Orsini Martinelli
Leitura crítica: Gabriela Silveira 
TEMA 1
5
DIRETO AO PONTO
Para se trabalhar com uma animação, é fundamental que o software 
possua recursos de linha do tempo, trabalhe com camadas, entre 
outras opções. Um recurso muito utilizado é a casca de cebola, 
ou onion skin, por meio do qual é possível visualizar os frames 
anteriores e posteriores da animação, o que facilita o fluxo de 
trabalho no projeto.
O Adobe Photoshop é uma ferramenta utilizada para diversas 
finalidades, como edição de fotos, criação de peças de design e 
elaboração de animações. Possui inúmeros recursos, os quais estão 
organizados em painéis, ou abas, conforme as suas funcionalidades. 
O painel de ferramentas traz as opções para se trabalhar com a 
seleção de camadas, o que é útil para editar uma área pontual 
da cena; com a vetorização, por meio de ferramentas de formas 
geométricas e da caneta, usada para criar formas livres; com o 
pincel, usado para desenho; entre outras. 
No caso das animações, uma aba muito utilizada é a Linha do 
Tempo, ou Timeline, que permite o trabalho com frames ou com 
camadas de vídeo, incluindo arquivos de vídeo importados para o 
software (ADOBE, [s.d.]). Esse recurso pode ser visto na Figura 1, 
que mostra a diferença entre as duas possibilidades: enquanto na 
primeira cada camada vira um frame, na segunda opção, a camada 
de vídeo agrupa diversos frames.
6
Figura 1 – Duas opções da linha do tempo no Photoshop
Fonte: captura de tela do Photoshop.
Um recurso importante para projetos é o uso de camadas, e no 
Photoshop (ADOBE, [s.d.]) existem vários tipos. 
• Camadas vetoriais: lidam com imagens vetoriais, criadas 
com a caneta e com as ferramentas de criação de formas 
geométricas. 
• Camadas textuais: trabalham com texto. 
• Imagem matricial: é a mais comum, armazenando desenhos e 
fotografias. 
• Camadas de preenchimento: cobrem uma parte da imagem 
com uma cor, um gradiente ou um padrão. 
• Camadas de ajuste: realizam ajustes de cor, iluminação e 
contraste, mas sem alterar diretamente os pixels da imagem.
• Entre outros tipos de camada. 
• É possível vincular uma camada a outra, pelo recurso de 
link layer. Uma camada vinculada a outra sempre se moverá 
quando a outra for movida pela tela. Além disso, é importante 
7
a possibilidade de se lidar com transparência nas camadas, 
além das informações de cor em um pixel. A transparência 
pode ser gradual ou direta. Nos arquivos .PNG, por exemplo, 
há transparência gradual, indo de 0% a 100%, enquanto nos 
arquivos .GIF um pixel ou é opaco ou é transparente, não 
existindo meio termo. Uma observação importante é de que o 
formato .JPG, muito popular para compartilhamento de fotos, 
não aceita nem transparência, nem animação.
A depender do projeto criado, é importante inserir textos na 
imagem, o que é feito pelas ferramentas tipográficas, que 
possibilitam a utilização de fontes e famílias de fontes, considerando 
suas variações e seus estilos. Por exemplo, Arial é uma família, que 
possui variações como Arial Narrow e Black, com estilos itálico, 
negrito, sublinhado, entre outros. O tamanho da fonte pode ser 
ajustado também com esses recursos, usando por padrão a medida 
em pontos, ou points, além da formatação de alinhamento e o 
espaçamento entre linhas e entre parágrafos (ADOBE, [s.d.]).
Outra propriedade importante é inserir arquivos externos no 
projeto, por meio da importação. Isso pode ser feito de duas 
maneiras fundamentais: a partir da função de Inserir Incorporado e 
de Inserir Vinculado. Ao inserir uma imagem de maneira incorporada, 
cria-se uma cópia dela dentro do projeto, tornando-a independente 
do arquivo original; a vantagem é que o projeto não dependerá 
mais de arquivos externos. Já ao vincular uma imagem, esta se 
manterá ligada ao arquivo original; assim, qualquer mudança feita 
no arquivo original irá mudar a imagem dentro do projeto. Esse 
segundo método é bem utilizado quando uma imagem é muito 
pesada, não tornando o arquivo mais pesado do que seria com a 
sua incorporação.
8
Quando uma imagem é incorporada, ela automaticamente é 
convertida em um objeto inteligente, ou smart object. Trata-se de 
um recurso muito útil para evitar a perda de qualidade em uma 
camada, já que preserva as informações desta, independentemente 
do tamanho na tela ou de algum filtro que tenha sido aplicado. As 
camadas do tipo smart object podem ser criadas a partir de qualquer 
camada, bastando selecionar a opção no menu de camadas (ADOBE, 
[s.d.]).
Por fim, temos a exportação de arquivos, considerando que o 
formato nativo do Photoshop (o .psd) não será lido por qualquer 
aplicação. É um formato voltado para a edição e o tratamento do 
arquivo, sendo chamado de arquivo editável, pois manterá todas as 
propriedades e efeitos do software. Assim, é importante exportar 
para um formato que atenda às necessidades do projeto, como .GIF 
ou .PNG. Apesar disso, é sempre importante armazenar o arquivo 
editável, caso seja necessário realizar algum ajuste no produto, algo 
comum quando se trabalha com clientes que pedirão mudanças no 
projeto. 
Referências bibliográficas
ADOBE. Adobe Photoshop Learn & Support. [s.d.]. Disponível em: 
https://helpx.adobe.com/support/photoshop.html. Acesso em: 21 fev. 
2021.
PARA SABER MAIS
O painel de Linha do Tempo, ouTimeline, permite que uma 
animação seja criada a partir de duas opções: uma sequência de 
vídeo ou uma animação por frames. Cada uma delas possui um fluxo 
de trabalho diferente, que deve ser pensado antes de se iniciar um 
9
projeto, conforme o que será discutido a seguir. Além disso, ambas 
oferecem vários recursos úteis na criação de uma animação.
Na primeira opção, pela sequência de vídeo, há a possibilidade 
de unir várias camadas, inclusive arquivos de vídeo em uma 
composição. Por se tratar de uma ferramenta para edição de vídeo, 
possui vários recursos para inserir efeitos de transição; áudio e 
transformações de deslocamento; escala; e rotação de objetos 
pelo uso de keyframes (ADOBE, [s.d.]). Além disso, é possível lidar 
com várias camadas, sobrepondo-as por meio do agrupamento de 
camadas. 
Um exemplo de uma aplicação interessante dessa primeira maneira 
em um projeto de animação é o uso da técnica de rotoscopia em 
vídeo, desenhando frame a frame por cima de uma gravação de uma 
pessoa. A rotoscopia é um processo em que se grava em vídeo uma 
pessoa e depois se desenha por cima da imagem, um frame por vez, 
criando os mais diversos tipos de efeito. Essa técnica é considerada 
uma precursora das técnicas mais modernas de captura de 
movimento.
A camada de vídeo pode ser manipulada da mesma forma que uma 
camada normal, com o uso de pincel, efeitos, filtros e ajustes de 
cor, por exemplo, mas com a diferença de possuir frames. Caso seja 
feito um traço em um frame do vídeo, esse traço ficará apenas nesse 
frame, e não no vídeo como um todo. Por outro lado, caso seja feito 
em uma camada normal, é possível mantê-lo por cima da camada 
de vídeo por quantos frames se desejar. Criando combinações com 
esses recursos, é possível trabalhar com elementos maiores, como 
títulos, até animar elementos pequenos e rápidos pela tela. Nesse 
modo, é possível também ativar o recurso de casca de cebola, ou 
onion skin.
10
Na segunda opção, a animação por frames, a imagem possui todas 
as camadas estáticas, sendo possível fazer a animação deixando 
uma camada visível ou invisível, além do uso de transformações de 
deslocamento, por exemplo. Uma facilidade desse modo é permitir 
que um objeto seja colocado em duas posições e depois pedir para 
o computador preencher com quantos frames se desejar, mantendo 
as configurações de posição, opacidade e efeitos, o que é feito pela 
função de transição, ou tween. Pode-se também desenhar todos 
os frames em camadas separadas e animá-las depois de prontas, 
ajustando o tempo de cada uma. Dessa forma, essa segunda opção 
é melhor quando já temos os frames desenhados em camadas 
separadas.
De modo resumido, o primeiro modo é muito útil quando vamos 
mesclar camadas, ou integrar um vídeo com desenhos, enquanto 
o segundo modo é mais voltado para projetos que envolvem 
desenhos sem o uso de vídeos. Além disso, no primeiro, há maior 
liberdade para testar opções e criar um projeto sem ter uma 
quantidade fixa de frames para se trabalhar, podendo testar várias 
possibilidades no decorrer do projeto. Já o segundo requer maior 
planejamento, levando em conta o trabalho considerável para inserir 
alguns frames a mais na linha do tempo depois que as camadas já 
foram convertidas em frames.
Referências 
ADOBE. Adobe Photoshop Learn & Support. [s.d.]. Disponível em: https://
helpx.adobe.com/support/photoshop.html. Acesso em: 21 fev. 2021.
TEORIA EM PRÁTICA
Você está prestando serviços de animação para um portal de 
notícias, que pediu para elaborar um vídeo de 1 segundo que será 
usado em uma chamada. O projeto deve ser feito no Photoshop, 
11
usando um vídeo já existente. Não existem restrições, devendo 
apenas ter uma pessoa caminhando. A ideia é de que a pessoa 
caminhe e o corpo dela seja contornado por uma linha, em uma 
técnica conhecida como rotoscopia.
Como podemos organizar esse projeto, desde a busca de um vídeo 
que não tenha problemas com direitos autorais até a produção 
dentro do Photoshop? 
Para conhecer a resolução comentada proposta pelo professor, 
acesse a videoaula deste Teoria em Prática no ambiente de 
aprendizagem.
LEITURA FUNDAMENTAL
Prezado aluno, as indicações a seguir podem estar disponíveis 
em algum dos parceiros da nossa Biblioteca Virtual (faça o log 
in por meio do seu AVA), e outras podem estar disponíveis em 
sites acadêmicos (como o SciELO), repositórios de instituições 
públicas, órgãos públicos, anais de eventos científicos ou 
periódicos científicos, todos acessíveis pela internet. 
Isso não significa que o protagonismo da sua jornada de 
autodesenvolvimento deva mudar de foco. Reconhecemos 
que você é a autoridade máxima da sua própria vida e deve, 
portanto, assumir uma postura autônoma nos estudos e na 
construção da sua carreira profissional. 
Por isso, nós o convidamos a explorar todas as possibilidades da 
nossa Biblioteca Virtual e além! Sucesso!
Indicações de leitura
12
Indicação 1
O capítulo traz alguns pontos importantes a serem trabalhados de 
maneira prática no uso de camadas, recurso cujo domínio e cuja 
compreensão são de extrema importância para se trabalhar com os 
softwares de edição de imagem.
FAULKNER, Andrew; CHAVEZ, Conrad. Princípios Básicos de 
Camadas. In: FAULKNER, Andrew; CHAVEZ, Conrad. Adobe 
Photoshop CC: classroom in a book, guia de treinamento oficial. 
Porto Alegre: Grupo A, 2016. p. 70-105.
Indicação 2
O capítulo indicado aborda pontos importantes da evolução 
histórica da animação em relação aos requisitos tecnológicos 
utilizados no meio. 
BAHIA, Ana Beatriz; BAHIA, Sophia. Desenvolvimento da Animação: 
meio digital. In: BAHIA, Ana Beatriz; BAHIA, Sophia. História da 
Animação. Curitiba: Intersaberes, 2021. p. 230-281.
QUIZ
Prezado aluno, as questões do Quiz têm como propósito a 
verificação de leitura dos itens Direto ao Ponto, Para Saber 
Mais, Teoria em Prática e Leitura Fundamental, presentes neste 
Aprendizagem em Foco.
Para as avaliações virtuais e presenciais, as questões serão 
elaboradas a partir de todos os itens do Aprendizagem em Foco 
e dos slides usados para a gravação das videoaulas, além de 
13
questões de interpretação com embasamento no cabeçalho 
da questão.
1. O recurso de Linha do Tempo permite que seja criada uma 
animação a partir de dois modos. A respeito desse contexto, 
assinale a única alternativa correta.
a. O modo de sequência de vídeo permite a edição de um vídeo 
apenas, sem sobrepor camadas.
b. O modo de animação por frames é o mais indicado para se 
trabalhar com a edição de vídeos e sons.
c. A sequência de vídeo permite mover objetos na cena com o 
uso de keyframes.
d. O modo de animação por frames serve para fazer rotoscopia 
em cima de um vídeo existente.
e. O modo de sequência de vídeo é limitado, não sendo possível 
usar efeitos de transição ou áudio.
2. As ferramentas de tipografia servem para inserir e ajustar 
textos em uma animação. A respeito dessas ferramentas, 
assinale a alternativa correta. 
a. Os softwares de imagem trabalham com apenas uma família 
tipográfica e seus vários estilos.
b. O tamanho das letras é medido, por padrão, em centímetros 
na tela do projeto.
c. Família tipográfica é o nome dado a um conjunto de fontes 
com o máximo de diferenças entre si.
d. Uma fonte itálica é aquela que será inclinada, enquanto a 
sublinhada terá uma linha por baixo.
e. O tamanho da fonte é medido em porcentagem, em relação à 
altura total do arquivo.
14
GABARITO
Questão 1 - Resposta C
Resolução: O modo de sequência de vídeo permite a edição 
com a sobreposição de várias camadas com vídeos; o modo 
de sequência de vídeo é o mais recomendado para vídeos 
com som; a rotoscopia é mais bem empregada no modo de 
sequência de vídeo; e, por fim, a sequência de vídeo possui 
recursos de transição e uso de áudio. 
Questão 2 - Resposta D
Resolução: Os softwares lidam com extensas coleções de 
famílias tipográficas, sendo as letras medidas em pontos, 
por padrão. A família tipográfica é composta de fontesque 
possuem muitos pontos em comum, e a medida da fonte não é 
realizada em porcentagem.
Tratando e editando imagens 
______________________________________________________________
Autoria: Felipe Orsini Martinelli 
Leitura crítica: Gabriela Silveira
TEMA 2
16
DIRETO AO PONTO
Os diversos softwares para tratamento de imagem digital possuem 
recursos variados que podem ser usados inclusive na produção 
de uma animação. Podemos falar em máscaras, filtros, efeitos, 
entre outros. Para compreender tais recursos, é importante antes 
entender os padrões de cor, conforme o que será explicado a seguir.
Os padrões de cor podem ser apontados como um modelo em que 
são dados valores específicos de uma propriedade para uma cor, 
de modo que sejam padronizadas. Assim, um azul com uma cor 
específica será o mesmo em qualquer projeto criado em um editor 
de imagens. 
• Entre os vários padrões existentes, o mais utilizado é o RGB, 
que trabalha com a composição de cores a partir de um nível 
de intensidade para vermelho, verde e azul, criando mais de 16 
milhões de cores diferentes. É o padrão sobre o qual as telas 
de computador e celular foram desenvolvidas. 
• O modelo HSB também lida com três valores, mas com outra 
composição para as cores. Um valor é para a matiz, que é 
a identificação da cor, o que diferencia um amarelo de um 
vermelho, por exemplo; depois há o valor de saturação, que 
indica o quanto a cor é intensa ou mais apagada, mais próxima 
do cinza; e o último valor é correspondente ao brilho, que 
indica o quanto a cor é clara ou escura, ou o quanto está mais 
próxima do preto ou do branco. 
• Outro padrão importante é o CMYK, que é utilizado para 
impressão a partir de quatro pigmentos: ciano, magenta, 
amarelo e preto. 
17
Entre esses padrões, é importante saber aplicar o RGB e o HSB, 
considerando que cada um é melhor para uma situação específica 
dentro de um projeto visual no meio digital.
Outro recurso importante é o uso de máscaras, que, assim como 
no mundo real, mostrarão algumas partes de uma imagem e 
esconderão outras. Trata-se de um recurso de edição não destrutiva, 
pois a imagem original não é alterada. Ou seja, os pixels não 
são apagados, apenas ocultados, podendo ser recuperados se 
necessário. Há vários tipos de camada, como as vetoriais, compostas 
de linhas e curvas vetoriais; máscara de bitmap, entre outras.
Um conceito importante das máscaras é que trabalham com um 
esquema de cores que vai do branco ao preto, passando por tons 
de cinza. Assim, as áreas brancas em uma máscara irão mostrar o 
conteúdo da camada à qual está vinculada (ADOBE, [s.d.]); as áreas 
pretas serão ocultadas; e as áreas cinzas ficarão transparentes, 
dependendo da intensidade de cor.
As máscaras podem ser criadas com as ferramentas de desenho, 
como o pincel ou o lápis, ou com as ferramentas de seleção, como a 
seleção retangular e a seleção circular. Essas ferramentas possuem 
ajustes manuais, ou seja, é necessário selecionar exatamente 
quais pontos da imagem devem ser inseridos na máscara. Há 
outras ferramentas de seleção que facilitam o processo a partir do 
reconhecimento da cor nos pixels, como no caso da varinha mágica, 
da seleção rápida e da seleção de objetos. 
A Figura 1 mostra um exemplo de seleção com três ferramentas 
distintas: seleção retangular, varinha mágica e seleção de objeto. 
Repare que há várias diferenças, sendo cada ferramenta melhor 
para um uso específico. 
18
Figura 1 – Exemplo de ferramentas de seleção 
Fonte: adaptada de https://pixabay.com/pt/photos/c%C3%A3o-retrato-animal-
sheltie-1772765/. Acesso em: 5 mar. 2021. 
Outro recurso importante dos editores de imagem é o uso de filtros 
nas camadas, os quais trazem os mais variados efeitos. É possível 
realizar desfoque na camada, inserir ruído, ou até mesmo aplicar 
filtros de estilos artísticos. Um exemplo pode ser dado nos tipos de 
desfoque, aplicando-os em cenários ou em animações em que os 
objetos se movem rapidamente. 
Uma observação relevante acerca dos filtros é que, caso sejam 
aplicados em uma camada de objeto inteligente, ou smart object, 
eles não alterarão os pixels originais da camada. Dessa maneira, é 
possível recuperar os pixels caso seja necessário, além de ajustar 
os filtros sem a necessidade de desfazer a sua aplicação. Trata-se, 
assim, de mais uma técnica de edição não destrutiva.
Por fim, podemos abordar os efeitos de camada, que também não 
são destrutivos. Há efeitos de preenchimento, de contorno, de 
relevo, sombra, entre outros. Um ponto importante sobre eles é que 
em vários tipos, como o de contorno, é possível inserir mais de uma 
19
vez o mesmo efeito. Por exemplo, podemos inserir cinco contornos 
diferentes por meio desses efeitos de estilos de camada. 
Referências
ADOBE. Adobe Photoshop Learn & Support. [s.d.]. Disponível em: 
https://helpx.adobe.com/support/photoshop.html. Acesso em: 5 mar. 
2021. 
PARA SABER MAIS
O Photoshop, assim como qualquer software para tratamento de 
imagens, conta com recursos de retoque que permitem realizar 
vários ajustes em imagens. É importante realizar ajustes, por 
exemplo, em fotografias em um projeto de animação em stop 
motion, ou em desenhos escaneados, em que pode haver algum 
amassado no papel.
Podemos começar citando o carimbo (clone stamp tool), que 
serve para copiar um trecho da imagem por cima de outro. Essa 
ferramenta é utilizada para quando se quer copiar um elemento 
na cena, ou remover um elemento copiando o fundo por cima dele 
(ADOBE, [s.d.]). Ela irá trabalhar com um ponto de referência, a partir 
do qual fará a cópia, e com outro ponto em que realizará o processo 
de clonagem, ou de colar o trecho da imagem. Assim, é possível 
marcar a referência em uma árvore e copiá-la várias vezes pela tela. 
Há também o carimbo de textura (pattern stamp tool), que servirá 
para pintar uma textura na imagem, de modo similar ao uso do 
pincel. Essas ferramentas podem ser usadas não só em camadas de 
imagens estáticas, mas também em camadas de vídeo e frames de 
animação.
20
Outras ferramentas são o pincel de recuperação (spot healing tool) 
e o pincel de recuperação de manchas (spot healing brush tool), 
utilizados para remover manchas ou objetos de uma camada. 
Podem ser utilizados para remover irregularidades em uma parede, 
ou pessoas no fundo de um cenário, ou até mesmo para remover 
espinhas no rosto de uma pessoa. A diferença entre as duas 
ferramentas é que a primeira precisa que seja indicada uma área de 
referência na imagem, do mesmo modo que o carimbo, enquanto 
na segunda não, identificando o que está em volta da área em que é 
utilizada.
Depois podem ser citadas as ferramentas de correção (patch 
tool), que têm o mesmo propósito das anteriores, mas com um 
funcionamento diferente. Primeiramente, traçamos na tela uma 
área e depois a arrastamos para outro trecho da camada. Esse outro 
trecho será mesclado na primeira área, conforme as configurações 
escolhidas na ferramenta. 
A ferramenta de mover sensível ao conteúdo (content-aware move 
tool) funciona de modo similar. Ela irá mover a área selecionada e 
preencher o espaço vazio que ficou com elementos da imagem, de 
acordo com as configurações realizadas (ADOBE, [s.d.]).
Por fim, a ferramenta de olho vermelho (red eye tool) serve para 
a remoção do vermelho que pode ser produzido no olho em 
fotografias por conta do flash. É uma ferramenta extremamente 
simples, em que basta clicar no centro do olho, ou clicar e arrastar 
formando um retângulo em volta do olho, com poucos ajustes para 
configurar. 
Referências
ADOBE. Adobe Photoshop Learn & Support. 2021. Disponível em: https://
helpx.adobe.com/support/photoshop.html. Acesso em: 5 mar. 2021.
21
TEORIA EM PRÁTICA
Você está trabalhando em um estúdio que recebeu um pedido de 
uma animação que seria feita com papel, mas, por uma questão 
de tempo e orçamento, optou-se por realizá-la digitalmente, 
fingindo que é feita com papel. A equipe está com acesso apenas 
ao Photoshop para utilizaros recursos de tratamento de imagens, 
efeitos e filtros. 
Considerando tais circunstâncias, como o projeto pode ser 
realizado? Quais efeitos, filtros ou ajustes devem ser feitos? Como os 
efeitos podem ser passados por entre os frames? 
Para conhecer a resolução comentada proposta pelo professor, 
acesse a videoaula deste Teoria em Prática no ambiente de 
aprendizagem.
LEITURA FUNDAMENTAL
Prezado aluno, as indicações a seguir podem estar disponíveis 
em algum dos parceiros da nossa Biblioteca Virtual (faça o log 
in por meio do seu AVA), e outras podem estar disponíveis em 
sites acadêmicos (como o SciELO), repositórios de instituições 
públicas, órgãos públicos, anais de eventos científicos ou 
periódicos científicos, todos acessíveis pela internet. 
Isso não significa que o protagonismo da sua jornada de 
autodesenvolvimento deva mudar de foco. Reconhecemos 
que você é a autoridade máxima da sua própria vida e deve, 
Indicações de leitura
22
portanto, assumir uma postura autônoma nos estudos e na 
construção da sua carreira profissional. 
Por isso, nós o convidamos a explorar todas as possibilidades da 
nossa Biblioteca Virtual e além! Sucesso!
Indicação 1
O capítulo indicado aborda vários conceitos importantes para a 
compreensão dos recursos de máscara, além de trazer alguns 
exercícios práticos.
FAULKNER, Andrew; CHAVEZ, Conrad. Máscara e Canais. In: 
FAULKNER, Andrew; CHAVEZ, Conrad. Adobe Photoshop CC: 
classroom in a book, guia de treinamento oficial. Porto Alegre: Grupo 
A, 2016. p. 134-153.
Indicação 2
O artigo indicado é um estudo de caso a respeito do estúdio de 
animação brasileiro Bromélia Filminhos, idealizador da Galinha 
Pintadinha. É interessante ver como foi a evolução da história da 
empresa. 
PINHO, Maria Luiza C. A.; DA ROCHA, Angela. Bromélia Filminhos e 
as aventuras internacionais da Galinha Pintadinha. Administração: 
Ensino e Pesquisa, [s.l.], v. 16, n. 3, p. 609-639, 2015.
QUIZ
Prezado aluno, as questões do Quiz têm como propósito a 
verificação de leitura dos itens Direto ao Ponto, Para Saber 
23
Mais, Teoria em Prática e Leitura Fundamental, presentes neste 
Aprendizagem em Foco.
Para as avaliações virtuais e presenciais, as questões serão 
elaboradas a partir de todos os itens do Aprendizagem em Foco 
e dos slides usados para a gravação das videoaulas, além de 
questões de interpretação com embasamento no cabeçalho 
da questão.
1. Os modos de seleção são importantes para diversas funções em 
um software de edição de imagens. A respeito desse contexto, 
assinale a única alternativa correta.
a. Há apenas duas maneiras para selecionar uma imagem: em um 
formato retangular ou um formato circular.
b. Criar uma seleção é um recurso útil para pintar apenas uma área 
específica da camada, usando o pincel.
c. A criação de seleções é um recurso para a criação de máscaras; 
assim, não possui relação com outras funções.
d. A área selecionada será separada automaticamente em uma 
nova camada assim que a seleção for concluída.
e. A ferramenta de seleção de objeto funciona se desenhando o 
contorno do objeto de maneira precisa com o mouse.
2. Levando em conta os vários conceitos que permeiam o meio 
digital para lidar com imagens, assinale a única alternativa 
correta.
a. Uma imagem que possui saturação baixa terá cores vibrantes 
e fortes.
b. A tela de computadores possui seus pixels configurados com o 
padrão CMYK.
c. As máscaras são componentes vetoriais, podendo ser feitas 
apenas com vetor.
24
d. As máscaras servem para modificar os pixels de uma imagem 
de maneira destrutiva.
e. Um filtro inteligente é aquele que não altera diretamente os 
pixels de uma camada.
GABARITO
Questão 1 - Resposta B
Resolução: Há várias maneiras para selecionar uma imagem, 
não apenas com formas de retângulo e elipse. A seleção serve 
para diversos recursos, como pintar, copiar e colar, além de 
criar máscaras, e é mantida na camada, a não ser que se faça 
um comando para separar em outra camada. A ferramenta de 
seleção de objeto funciona de maneira automática, sendo feitos 
outros ajustes depois.
Questão 2 - Resposta E
Resolução: A saturação baixa deixará a imagem com cores 
apagadas, próximas de tons de cinza. As máscaras podem ser 
feitas com pincel, lápis e outras ferramentas, não existindo 
apenas máscaras vetoriais. As telas dos computadores usam o 
sistema RGB. As máscaras servem para a chamada edição não 
destrutiva.
Introdução ao Animate
______________________________________________________________
Autoria: Felipe Orsini Martinelli
Leitura crítica: Gabriela Silveira Barbosa
TEMA 3
26
DIRETO AO PONTO
O Adobe Animate é um software voltado para a criação de 
animações, vídeos, jogos e aplicativos interativos, trabalhando 
com tecnologias variadas. Além disso, pode gerar arquivos para 
dispositivos móveis e para computadores. Para lidar com esses 
recursos, é importante ter conhecimento de seu funcionamento 
básico, a começar pelas ferramentas principais.
A interface do programa traz ao centro o palco, em que serão 
inseridos os elementos do projeto, como imagens, textos e 
traços. A barra de ferramentas oferece diversos recursos, como 
as ferramentas para traçar formas geométricas, como retângulos, 
elipses, linhas e formas poligonais, com uma quantidade de lados 
que pode ser especificada no painel de propriedades. Outras 
ferramentas úteis são os pincéis, que servem para desenhar na 
tela, utilizando recursos de espessura de linha e criação de texturas 
personalizadas. Uma observação importante é que, caso queira que 
os traçados não se misturem, deve ativar a opção de desenho de 
objeto, para que sejam isolados em objetos na tela.
Além dos pincéis, há a ferramenta de lápis, que possui três opções 
de traçado: correção, suavização e tinta. Na primeira opção, o 
programa irá converter o que for desenhado para uma forma 
geométrica; na segunda, irá suavizar o desenho; já na terceira, 
manterá o traço original, sem realizar alterações (ADOBE, [s.d.]). 
Podem ser citados também como ferramentas úteis na criação de 
formas a caneta, o balde de tinta e a borracha.
O Animate é um dos vários softwares que trabalham com o recurso 
de camadas, nas quais podem ser inseridos traçados, imagens 
importadas, textos etc. Todos esses elementos terão um ponto 
de transformação, ou transformation point, que é utilizado como 
referência para transformações de rotação, escala e deslocamento, 
27
indicando a posição do objeto no palco. As camadas também podem 
ser usadas com um sistema de hierarquia, muito útil para animar 
personagens. Com tal recurso, quando uma camada principal 
é movida, as outras dependentes dela se movem também. Por 
exemplo, temos uma personagem que, quando a camada de seu 
corpo se move, todas as outras camadas de membros acompanham 
a movimentação.
Falando especificamente do processo de animação, os quadros são 
utilizados para tal finalidade. Há os quadros-chave, que possuem 
informações relativas a alguma propriedade do objeto, e os quadros 
normais, que irão apenas manter as imagens do último quadro-
chave. Nesse caso, pode-se dizer que eles funcionam como uma 
extensão do quadro, prolongando sua execução.
Outro ponto é em relação às técnicas de animação. Pode-se criar 
uma animação frame a frame, termo usado para animações em 
que todos os quadros são desenhados, ou utilizar o recurso de 
interpolação, em que são dadas informações iniciais e finais de uma 
propriedade e o software produz os frames intermediários. Há três 
tipos de interpolação: 
• Interpolação clássica: lida com informações de posição, 
rotação, escala, entre outros. Esse método possui efeitos 
práticos para ajustar a velocidade da animação por meio de 
gráficos preestabelecidos. 
• Interpolação de movimento: é bem parecida com a clássica, 
mas traz alguns recursos diferentes e permite um maior 
controle nos ajustes de posição dos objetos. Uma diferença 
fundamental é que a interpolação clássica lida com dois 
objetos, que podem ser diferentes,com quadros-chave na 
linha do tempo, enquanto a de movimento lida com apenas 
um objeto e quadros-chave de propriedades. 
28
• Interpolação de forma: são dados dois objetos e o software 
elabora os quadros intermediários, de modo que a primeira 
forma se transforme, quadro a quadro, na segunda forma.
Depois pode ser citado o recurso de folha transparente, no inglês 
onion skin, disponível na grande da maioria dos softwares para 
animação. Consiste em mostrar os frames anteriores e posteriores 
da animação no frame em que a tela se encontra. No Animate, há 
também a edição de múltiplos quadros, em que são exibidos todos 
os quadros do projeto, ou uma quantidade especificada, ao mesmo 
tempo, sendo possível editar todos simultaneamente. 
A Figura 1 mostra um exemplo desse recurso ativado com uma 
interpolação de movimento. A linha azul representa o caminho 
produzido pela interpolação, e cada bolinha azul na linha representa 
a posição em que o ponto de transformação do quadrado estará 
situado em cada frame da animação.
Figura 1 – Exemplo da edição de múltiplos quadros
Fonte: captura de tela da aplicação no sistema operacional Windows 10.
29
Outros dois recursos que podem ser citados são a ferramenta de 
Bone, que cria uma espécie de estrutura de ossos para um objeto 
ou personagem, e a ferramenta de distorção, que cria uma malha 
poligonal por cima de uma camada. Conforme os pinos, ou alças, 
são inseridos nessa malha, é possível alterá-la para criar vários 
efeitos de movimentação. Cada uma dessas ferramentas será útil 
para um propósito específico, sendo necessários muito estudo 
e muita prática para saber qual deve ser usada e onde deve ser 
aplicada.
Referências
ADOBE. Guia do usuário do Adobe Animate. [s.d.]. Disponível em: https://
helpx.adobe.com/br/animate/user-guide.html. Acesso em: 12 mar. 2021.
PARA SABER MAIS
O uso de linguagens de programação no Animate não serve apenas 
para criar interações, sendo muito útil para outras funcionalidades, 
inclusive para criar projetos não interativos. Uma vantagem da 
ferramenta é que ela trabalha com linguagens fáceis de implementar 
em um projeto, não sendo necessário um profundo conhecimento 
em programação para aplicar os códigos. Podemos exemplificar 
comentando a respeito da aplicação de som em uma animação.
O som pode ser aplicado em um projeto de várias maneiras. 
Suponha que haja um som ambiente que deve ser executado 
repetidas vezes enquanto uma cena durar, por exemplo, um som 
de multidão para uma cena que acontece na rua. Pode-se aplicar 
o mesmo arquivo de áudio várias vezes em sequência até o fim da 
cena. No entanto, pode ser necessário realizar um ajuste na cena, 
o que vai aumentar o seu tempo de tela. Para evitar o trabalho 
desnecessário de inserir várias vezes o mesmo arquivo, pode-se 
utilizar uma configuração nas propriedades da camada de áudio, 
30
ou usar uma função de repetição, ou loop, aplicada com códigos 
simples de programação, que fará com que o áudio seja executado 
repetidas vezes até que a cena termine, independentemente do seu 
tempo de duração.
Os arquivos de áudio são armazenados na biblioteca do projeto, 
junto com os arquivos de imagem e os símbolos criados (ADOBE, 
[s.d.]). Ao serem inseridos no projeto, o áudio será colocado em 
uma camada com propriedades específicas de som para ajustar: 
o nome do arquivo a ser executado, a aplicação de algum efeito 
de som estéreo, a sincronização e a repetição. Conforme citado 
anteriormente, por meio da aplicação de código pelo painel de 
ações, é possível dar outros comportamentos ao som além desses 
citados.
Outra possibilidade do uso de código é inserir objetos na tela. Pode-
se inserir o objeto da biblioteca por meio de código, na posição 
que se quer, o que traz a possibilidade de inserir um mesmo objeto 
várias vezes na tela, sem que isso precise ser feito de maneira 
manual. Junto com essa opção, é possível criar posições aleatórias 
para os objetos. Imagine uma animação que, toda vez que é 
executada, apresenta os objetos do cenário em posições diferentes. 
Essa aleatoriedade pode ser aplicada a qualquer outra propriedade 
além da posição, como escala, rotação e cor. Assim, é possível inserir 
20 cópias do mesmo objeto, cada um com uma cor aleatória, tudo 
feito a partir de um código. Por exemplo, podemos criar uma piscina 
de bolinhas com várias bolinhas replicadas a partir de um único 
objeto.
Por fim, outro ponto que pode ser trabalhado são as animações 
em si, podendo realizar transformações de movimento, escala, 
rotação, entre outras, por meio de um código. Uma vantagem do 
código é utilizar variáveis para a movimentação, criando a animação 
de dez objetos com base no valor de uma variável. Caso esse valor 
31
seja modificado, a animação dos dez objetos também será, o que 
demoraria mais para ser feito com as ferramentas de animação 
manuais. É interessante testar essa opção e compará-la com as 
maneiras de se animar diretamente pela interface. Veja com qual se 
sente mais confortável e pratique com vários objetos.
Referências
ADOBE. Guia do usuário do Adobe Animate. [s.d.]. Disponível em: https://
helpx.adobe.com/br/animate/user-guide.html. Acesso em: 12 mar. 2021.
TEORIA EM PRÁTICA
Vamos considerar que estamos trabalhando em um estúdio e 
apareceu um projeto a ser feito para web que precisa ter três 
cachorros em um ambiente doméstico, devendo cada um mover um 
pouco o corpo em um ponto de profundidade na cena. Um pedido 
do cliente é que as imagens precisam ser reais, ou seja, devem ser 
usadas fotografias para o cenário e para as personagens. 
Como você organizaria esse projeto para execução? Como podemos 
animar as personagens? Devemos inserir algum tipo de filtro? 
Para conhecer a resolução comentada proposta pelo professor, 
acesse a videoaula deste Teoria em Prática no ambiente de 
aprendizagem.
LEITURA FUNDAMENTAL
Prezado aluno, as indicações a seguir podem estar disponíveis 
em algum dos parceiros da nossa Biblioteca Virtual (faça o log 
Indicações de leitura
32
in por meio do seu AVA), e outras podem estar disponíveis em 
sites acadêmicos (como o SciELO), repositórios de instituições 
públicas, órgãos públicos, anais de eventos científicos ou 
periódicos científicos, todos acessíveis pela internet. 
Isso não significa que o protagonismo da sua jornada de 
autodesenvolvimento deva mudar de foco. Reconhecemos 
que você é a autoridade máxima da sua própria vida e deve, 
portanto, assumir uma postura autônoma nos estudos e na 
construção da sua carreira profissional. 
Por isso, nós o convidamos a explorar todas as possibilidades da 
nossa Biblioteca Virtual e além! Sucesso!
Indicação 1
O capítulo indicado traz ideias interessantes para leitura e reflexão 
sobre o ato de animar.
GRAÇA, Marina Estela. A filosofia que sustém o ato de animar. In: 
GRAÇA, Marina Estela. Entre o Olhar e o Gesto: elementos para 
uma poética da imagem animada. São Paulo: Senac, 2017. 
Indicação 2
O artigo traz um estudo de caso sobre a série de animação 
Peixonauta e seu sucesso, tendo alcançado vários países. 
WILIAN, G. J.; MARIETTO, M. L. Como Pode um Peixe Vivo Viver 
Fora do Brasil? O Caso Peixonauta. Revista Ibero - Americana de 
Estratégia, São Paulo, v. 16, n. 4, p. 110-116, 2017.
33
QUIZ
Prezado aluno, as questões do Quiz têm como propósito a 
verificação de leitura dos itens Direto ao Ponto, Para Saber 
Mais, Teoria em Prática e Leitura Fundamental, presentes neste 
Aprendizagem em Foco.
Para as avaliações virtuais e presenciais, as questões serão 
elaboradas a partir de todos os itens do Aprendizagem em Foco 
e dos slides usados para a gravação das videoaulas, além de 
questões de interpretação com embasamento no cabeçalho 
da questão.
1. Considere as aplicações de áudio e imagem em um projeto. A 
respeito desse contexto, assinale a única alternativa correta.
a. O uso de código serve apenas para interações, como aparecer 
algo quando se clica com o mouse.
b. Por meio de um código, é possível trabalhar comvalores 
aleatórios, como a cor de preenchimento dos objetos.
c. Um som é executado apenas uma vez. Então, se quisermos 
um loop, precisamos repeti-lo várias vezes.
d. A codificação pode ser feita nas animações de movimentação, 
não se aplicando à rotação ou à escala.
e. Todos os ajustes em um arquivo de áudio são realizados 
apenas por meio da implementação de código.
2. Em relação às várias ferramentas disponíveis para produzir 
animações no Adobe Animate, analise as afirmações a seguir e 
assinale a única alternativa correta. 
a. O recurso de casca de cebola, ou onion skin, serve para 
exportar os arquivos de animação.
34
b. Um projeto precisa de, pelo menos, três camadas diferentes 
para a animação funcionar corretamente.
c. A edição de múltiplos quadros permite que os objetos de 
todos os quadros sejam editados de uma vez.
d. A hierarquia entre camadas indica quais aparecerão na tela e 
quais não aparecerão quando o projeto for concluído.
e. O recurso de casca de cebola, também chamado de papel 
transparente, permite editar vários quadros de uma vez.
GABARITO
Questão 1 - Resposta B
Resolução: O uso de código é útil em todo tipo de aplicação, 
não apenas nas interativas. Existe uma configuração para que 
o som se repita inúmeras vezes, não sendo necessário inseri-lo 
várias vezes no projeto. Qualquer propriedade de um objeto 
pode ser modificada por código, contanto que esse objeto 
possa ser chamado no código. Há várias configurações no áudio 
que são feitas na própria interface do software.
Questão 2 - Resposta C
Resolução: O recurso de onion skin serve para vermos a 
imagem dos quadros anteriores e posteriores ao quadro atual 
da cena. Não existe uma quantidade mínima de camadas 
para um projeto ser realizado. A hierarquia indica relação 
de dependência na movimentação das camadas e não está 
relacionada à opacidade. O recurso de casca de cebola 
é apenas um recurso para exibir os outros quadros, não 
habilitando a edição deles.
Recursos de Interação no Animate
______________________________________________________________
Autoria: Felipe Orsini Martinelli
Leitura crítica: Gabriela Silveira
TEMA 4
36
DIRETO AO PONTO
O Adobe Animate é um software que possui várias ferramentas 
para o desenvolvimento de jogos, animações e aplicações das 
mais diversas, trabalhando muito bem com recursos de interação. 
A interação pode ser feita por teclado, mouse, voz, entre outras 
opções, e, para lidar com ela, é necessário realizar alguns comandos 
de código. 
Para isso, há duas linguagens de programação disponíveis na 
aplicação. A primeira é o ActionScript 3, criado para o Flash, que veio 
a se chamar Animate. Foi criada para se trabalhar com interações, 
tendo vários recursos específicos para uso de mouse, teclado etc.
A segunda linguagem se chama JavaScript, criada pela Microsystems, 
e possui vários propósitos, servindo de uso em diversos softwares 
de jogos, animações, aplicações web, entre outros. Ele trabalhará 
com o sistema de Canvas em páginas HTML5, sendo toda a parte 
de interação e animação implementada por meio dessa linguagem. 
Dessa forma, ao terminar um projeto no Animate, pode-se publicá-
lo para um projeto em HTML5 e JavaScript. Todo projeto nesse caso 
pode ser configurado para ser responsivo, ou seja, irá se adequar ao 
tamanho da tela e ao tipo de dispositivo utilizado. Aqui é importante 
ressaltar a importância da responsividade em qualquer tipo de 
projeto criado para web.
Caso o projeto tenha sido feito em ActionScript, pode ser exportado 
para outros tipos de arquivo. Há outras opções, como o uso de 
Realidade Virtual e WebGL, que irão gerar outros tipos de arquivo, 
conforme as especificidades de suporte utilizadas. Além dessas 
opções, as duas linguagens permitem que os projetos sejam 
exportados para arquivos de imagens estáticas, como JPG e PNG; 
imagens animadas, como o GIF; ou arquivos de vídeo, como MOV e 
37
MP4, sendo essa ação realizada no Adobe Media Encoder, que é um 
software específico para exportar arquivos de mídia.
A interação sempre precisará de um código a ser executado, e, por 
conta disso, é importante ter conhecimento de aspectos básicos 
de linguagem de programação. Há recursos na ferramenta que 
facilitam o uso de códigos, como a aba de Snippet Codes, que 
possui vários modelos prontos de código para diversos fins, tanto 
em ActionScript quanto em JavaScript. Basta inserir o código e 
modificá-lo conforme o que for necessário. Pode-se também utilizar 
o assistente de código, disponível apenas para o uso em JavaScript. 
O assistente possui poucas funções, mas o suficiente para criar 
projetos com interações básicas de movimentação de objetos ou de 
execução e pausa de uma animação específica na cena. 
Um recurso muito usado no Animate para interação são os botões, 
os quais possuem um símbolo próprio. É importante lembrar aqui 
que há três tipos de símbolos (ADOBE, [s.d.]). Temos os gráficos, 
que não possuem uma linha do tempo própria; o movieclip, que 
possui uma linha do tempo independente da linha principal da cena; 
e os botões, que possuem sua própria linha do tempo com quatro 
quadros, cada um servindo a uma funcionalidade específica: “Acima”, 
ou Up, que indica que o botão não foi selecionado nem pressionado; 
“Sobre”, ou Over, que indica que o botão foi selecionado, mas não 
foi pressionado; “Abaixo”, ou Down, que indica que o botão foi 
selecionado e pressionado; e “Ocorrência”, ou Hit, que indica a área 
visual que será utilizada para a interação do botão. 
A Figura 1 mostra um exemplo de um botão passando pelos 
estados de Acima, Sobre e Abaixo. Repare que é utilizada uma 
relação de imitação com um botão do mundo real, o que auxilia na 
compreensão do usuário sobre o que está acontecendo.
38
Figura 1 – Exemplo de um botão com estados diferentes
Fonte: elaborada pelo autor.
As interações com teclado vão lidar com condições de código, em 
que é necessário verificar qual tecla foi pressionada. Segue-se 
uma ideia de condição para ação, ou seja, caso uma condição seja 
atendida, realiza-se uma ação. Por exemplo, se a tecla Enter foi 
pressionada, o jogo começa a funcionar. Isso pode ser feito por meio 
de algumas funções já existentes, ou pela criação de uma função 
própria.
Por fim, é importante considerar que o Animate pode ser usado 
como uma ferramenta para criar animações para outros softwares, 
como é o caso da Unity, que é um motor para a criação de jogos 
digitais. Pode-se utilizar um plug-in que faz a importação das 
animações para essa outra ferramenta. 
Além disso, as animações podem ser trabalhadas de duas maneiras: 
a planilha de entidades gráficas e o atlas de textura. A planilha, 
conhecida também como spritesheet, terá todos os quadros da 
animação em um único arquivo de imagem, que será acompanhado 
de um arquivo JSON com informações a respeito dos quadros. Já 
o atlas de textura irá organizar os blocos utilizados na construção 
da animação em arquivos de imagem, na quantidade mínima que 
conseguir, para otimizar o projeto, bem como haverá ao menos dois 
arquivos do tipo JSON com informações sobre os elementos e as 
39
animações produzidas. Cada um desses métodos possui vantagens 
e desvantagens, que devem ser consideradas na produção de um 
jogo ou aplicativo interativo. 
Referências
ADOBE. Guia do usuário do Adobe Animate. [s.d.]. Disponível em: https://
helpx.adobe.com/br/animate/user-guide.html. Acesso em: 20 mar. 2021.
PARA SABER MAIS
Embora esta não seja uma disciplina de programação, há 
três conceitos da área que merecem uma explicação breve, 
considerando que a maioria dos projetos com código feitos no 
Animate irá trabalhar com esses dois conceitos. 
O primeiro deles é a condição, que, em um primeiro momento pode 
parecer complicada, porém tal estrutura segue uma ideia lógica 
do mundo real: se uma ação for verdadeira, o código deve realizar 
uma ação. Podemos trazer exemplos como: se o semáforo estiver 
fechado, espere abrir; se não estiver fechado, ou seja, se estiververde, você pode seguir o caminho. Dessa forma, muitas linguagens 
de programação vão trabalhar com a ideia de if (condição a ser 
verificada) {ações que serão realizadas}. 
Podemos verificar essa estrutura em um código em JavaScript, como 
o inserido a seguir, que pode ser lido como: se o valor da variável 
pontos for maior do que 10, abrir o site teste.com:
if (pontos > 10) {
 window.open(‘http://www.teste.com’, ‘_blank’);
}
40
O segundo deles é o uso de funções, que é representado por um 
termo seguido de parênteses. Podemos considerar que as funções 
servem como instruções dadas para que o software faça alguma 
coisa. Existem funções já estabelecidas em diversas linguagens 
de programação, as quais utilizam palavras reservadas para 
determinado fim, o que quer dizer que não podemos usar a mesma 
palavra para outra coisa dentro do código. Podemos também criar 
nossas próprias funções, o que significa que vamos indicar para o 
software o que ele deve fazer quando a função é utilizada. 
Ou seja, vamos supor que queremos criar um círculo e sabemos que 
o software possui uma função chamada elipse(). Basta utilizarmos 
essa função que conseguiremos traçar a forma. Agora imagine que 
queremos traçar um retângulo, mas o software não possui uma 
função para isso. Dessa forma, devemos criar uma função para criar 
retângulos.
Para isso, precisaremos, em algum trecho do código ou em um 
outro arquivo, indicar quais instruções o software deve seguir 
quando receber tal comando que nós criarmos. Caso contrário, dará 
uma mensagem de erro, pois estamos tentando utilizar uma função 
que não foi determinada antes. Essas instruções são inseridas entre 
os símbolos de colchetes, indicando que tudo que estiver naquelas 
linhas faz parte da função.
Em alguns casos, será necessário inserir algo dentro dos parênteses, 
em outros casos não. Esses valores inseridos são chamados de 
parâmetros, como se fossem informações complementares para a 
função. Imagine, por exemplo, uma função genérica para se criar 
um retângulo na tela, que poderia se chamar retangulo(). Podemos 
indicar a altura e a largura pelos parênteses, caso a função esteja 
configurada para isso, tendo algo como retangulo(10,5). Assim, toda 
vez que o código estiver funcionando e ler esse comando, irá buscar 
41
nas instruções dele, ou nas criadas por nós, como se deve fazer um 
retângulo, usando os valores dados para a criação da forma na tela.
Um terceiro ponto é para que o código possa “encontrar” um 
símbolo dentro do projeto, sendo necessário dar um nome para o 
símbolo, por meio do painel de propriedades. Dessa forma, quando 
o símbolo possui um nome específico, é possível fazer referência 
a ele nos códigos utilizados. Esse nome é dado pelo painel de 
propriedades, no campo de nome da instância (ADOBE, [s.d.]). 
Aqui é importante levarmos em conta que não estamos lidando 
com o objeto original, mas com uma cópia dele, que terá todas as 
propriedades iguais a ele. A esse objeto, damos o nome de instância 
de um elemento. Podemos, por exemplo, criar um movieclip de um 
pássaro voando e 30 instâncias desse movieclip na cena, e cada uma 
delas terá as mesmas propriedades do movieclip original. Podemos 
dar um nome diferente a cada uma delas, de modo que podemos 
criar um código que interfere em apenas algumas instâncias 
específicas, como desaparecer com aquelas que tiveram contato 
com um outro movieclip.
Referências
ADOBE. Guia do usuário do Adobe Animate. [s.d.]. Disponível em: https://
helpx.adobe.com/br/animate/user-guide.html. Acesso em: 20 mar. 2021.
TEORIA EM PRÁTICA
Você está trabalhando em uma agência de comunicação e precisa 
planejar os projetos feitos, principalmente os voltados para web. 
Vocês receberam um briefing sobre uma campanha digital, com 
um site que terá vários tipos de interação com o usuário. Ele 
deve funcionar como uma gaveta cheia de fotos, as quais estarão 
42
espalhadas pela tela. Entre tais interações, podemos citar a ação de 
clicar em algumas das fotos e uma animação acontecer ou um som 
ser tocado; clicar e arrastar as fotos pela tela; além de algumas fotos 
específicas, ao serem clicadas, poderem levar a outros sites. 
Considere que o projeto será colocado em um site que deve 
funcionar corretamente tanto em computadores quanto em 
dispositivos móveis. É importante lembrar também que ele 
trabalhará com imagens e sons nas interações. 
Com base no contexto apresentado, quais configurações precisam 
ser ajustadas no Adobe Animate, desde a sua criação até a sua 
finalização, para atender à demanda em questão? 
Para conhecer a resolução comentada proposta pelo professor, 
acesse a videoaula deste Teoria em Prática no ambiente de 
aprendizagem.
LEITURA FUNDAMENTAL
Prezado aluno, as indicações a seguir podem estar disponíveis 
em algum dos parceiros da nossa Biblioteca Virtual (faça o log 
in por meio do seu AVA), e outras podem estar disponíveis em 
sites acadêmicos (como o SciELO), repositórios de instituições 
públicas, órgãos públicos, anais de eventos científicos ou 
periódicos científicos, todos acessíveis pela internet. 
Isso não significa que o protagonismo da sua jornada de 
autodesenvolvimento deva mudar de foco. Reconhecemos 
que você é a autoridade máxima da sua própria vida e deve, 
Indicações de leitura
43
portanto, assumir uma postura autônoma nos estudos e na 
construção da sua carreira profissional. 
Por isso, nós o convidamos a explorar todas as possibilidades da 
nossa Biblioteca Virtual e além! Sucesso!
Indicação 1
O capítulo indicado traz alguns pontos importantes sobre o uso 
de botões, além de exercícios que auxiliam na compreensão do 
conteúdo, servindo como base a vários outros tipos de interações 
criadas na ferramenta.
PINTO, Marcos José. Animação e Interatividade: Botões. In: PINTO, 
Marcos José. Adobe Edge Animate CC: animação e interatividade 
para a Web. São Paulo: Érica, 2014. p. 138-150.
Indicação 2
O artigo indicado aborda a relação do HTML com a produção de 
conteúdo em infográficos, com ferramentas como o Adobe Flash. 
LIMA JUNIOR, Walter Teixeira; BARBOZA, Eduardo Fernando U. HTML5 
e as possibilidades narrativas jornalísticas na infografia multimídia. 
Brazilian Journalism Research, Brasília, v. 11, n. 2, p. 241-265, 2015.
QUIZ
Prezado aluno, as questões do Quiz têm como propósito a 
verificação de leitura dos itens Direto ao Ponto, Para Saber 
Mais, Teoria em Prática e Leitura Fundamental, presentes neste 
Aprendizagem em Foco.
44
Para as avaliações virtuais e presenciais, as questões serão 
elaboradas a partir de todos os itens do Aprendizagem em Foco 
e dos slides usados para a gravação das videoaulas, além de 
questões de interpretação com embasamento no cabeçalho da 
questão.
1. O Adobe Animate trabalha com duas linguagens de 
programação, na elaboração de projetos interativos ou não. A 
respeito desse contexto, assinale a única alternativa correta.
a. O Adobe Animate é uma ótima ferramenta para criar projetos 
interativos sem a programação de código.
b. Entre as interações possíveis, estão a movimentação e os cliques 
de mouse, além do teclado.
c. A escolha de linguagem de programação tem a ver com o 
arquivo final, pois o código é sempre igual.
d. Tanto ActionScript quanto JavaScript são linguagens criadas pela 
Adobe para usar no Flash, agora Animate.
e. Os códigos são usados apenas em projetos interativos, não 
existindo uso em projetos sem interação.
2. Ao criar interações por meio de um código, é necessário 
trabalhar com o conceito de instância. A respeito de tal conceito, 
assinale a única alternativa correta. 
a. Todo elemento gráfico criado no Animate possui 
automaticamente um nome diferente de instância.
b. Apenas símbolos do tipo botão podem possuir instâncias, por 
conta do seu uso em telas.
c. A instância é útil para interagir com um elemento específico do 
projeto por meio de código.
d. Várias instâncias podem ter o mesmo nome, não trazendo 
problemas à execução do código.
45
e. Ao inserirmosum código, devemos ter ao menos o nome de 
duas instâncias dentro do projeto.
GABARITO
Questão 1 - Resposta B
Resolução: Para inserir interação é necessário trabalhar com 
blocos de código. As linguagens utilizadas possuem várias 
diferenças, cada uma com funções próprias. A linguagem 
ActionScript foi criada para uso do Flash, enquanto a JavaScript 
foi criada pela Sun Microsystems, sendo utilizada em vários 
softwares para várias finalidades. Podemos usar códigos para 
facilitar várias coisas em uma animação, mesmo ela não tendo 
interação com o usuário.
Questão 2 - Resposta C
Resolução: Os nomes precisam ser dados para cada símbolo, 
não sendo qualquer símbolo gráfico. Qualquer símbolo criado 
será inserido na biblioteca, por meio da qual podem ser criadas 
várias instâncias. Os nomes devem ser diferentes, ou podemos 
ter alguns problemas na execução do código. Não é necessário 
inserir nomes, pois há alguns comandos simples que não 
necessitam de especificações.
BONS ESTUDOS!
	Apresentação da disciplina
	Introdução
	TEMA 1
	Direto ao ponto
	Para saber mais 
	Teoria em prática
	Leitura fundamental
	Quiz
	Gabarito
	TEMA 2
	Direto ao ponto
	Para saber mais
	Teoria em prática
	Leitura fundamental
	Quiz
	Gabarito
	TEMA 3
	Direto ao ponto
	Para saber mais
	Teoria em prática
	Leitura fundamental
	Quiz
	Gabarito
	TEMA 4
	Direto ao ponto
	Para saber mais
	Teoria em prática
	Quiz
	Gabarito
	Inicio 2: 
	Botão TEMA 4: 
	Botão TEMA 1: 
	Botão TEMA 2: 
	Botão TEMA 3: 
	Botão TEMA 9: 
	Inicio :