Buscar

Animações e ferramentas virtuais

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 219 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 219 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 219 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

Animações e Ferramentas Virtuais
W
B
A
0
17
6
_
V
1.
1
2/219
Animações e Ferramentas Virtuais
Autoria: Leandro Felipe Carvalho
Como citar este documento: CARVALHO, Leandro Felipe. Animações e Ferramentas Virtuais. Vali-
nhos: 2016.
Sumário
Apresentação da Disciplina 04
Unidade 1: Flash CS6, utilização e configuração 06
Assista a suas aulas 34
Unidade 2: Criando uma animação 41
Assista a suas aulas 58
Unidade 3: Exibição de filme 65
Assista a suas aulas 81
Unidade 4: Animações com interpolação 88
Assista a suas aulas 108
2/219
3/2193
Unidade 5: ActionScript 115
Assista a suas aulas 133
Unidade 6: Interatividade com ActionScript 140
Assista a suas aulas 160
Unidade 7: Utilizando as bibliotecas 167
Assista a suas aulas 188
Unidade 8: Formulários e CANVAS 195
Assista a suas aulas 212
Sumário
Animações e Ferramentas Virtuais
Autoria: Leandro Felipe Carvalho
Como citar este documento: CARVALHO, Leandro Felipe. Animações e Ferramentas Virtuais. Vali-
nhos: 2016.
4/219
Apresentação da Disciplina
Esta disciplina tem como objetivo apresen-
tar a você o funcionamento das animações e 
suas aplicações. Atualmente, as animações 
podem ser utilizadas em diversos contextos 
e não somente como atrativos em páginas 
da web. O profissional que entende de ani-
mação é capaz de trabalhar no desenvolvi-
mento de games ou mesmo criar produtos 
para a área de marketing digital.
Durante o desenvolvimento deste curso, 
você terá contato com a ferramenta Adobe 
Flash, a qual oferece recursos para o de-
senvolvimento de animações com os mais 
diversos níveis de complexidade. É sempre 
importante lembrar que o desenvolvimento 
de uma boa animação depende também da 
criatividade do animador e, muitas vezes, de 
recursos externos, assim como imagens bem 
utilizadas.
Vamos iniciar os estudos conhecendo o am-
biente do aplicativo e entendendo como fun-
cionam as animações quadro a quadro. Essas 
animações são as utilizadas pelos desenhos 
animados que conhecemos. Paulatinamen-
te, iremos entender como as animações de 
média complexidade são criadas através de 
efeitos conhecidos, dentre eles podemos 
destacar a interpolação de forma e a inter-
polação de movimento, que fazem objetos 
se movimentarem pela nossa animação de 
uma maneira mais simples.
Para complementar os nossos estudos em 
animações, vamos entender um pouco sobre 
a linguagem ActionScript, que é a linguagem 
que se utiliza para gerar interatividade nas 
animações, isso permite que o usuário tenha 
respostas diferentes ao clicar ou selecionar 
objetos distintos. Existem diferentes versões 
5/219
de ActionScript, você será capaz de diferen-
ciá-las após os estudos desta disciplina, para 
escolher a melhor versão para aplicar em 
suas animações.
Serão diversos conteúdos diferentes estuda-
dos. É muito importante que você lembre de 
praticar, realizando todos os exercícios pro-
postos com dedicação.
6/219
Unidade 1
Flash CS6, utilização e configuração
Objetivos
1. Estabelecer os requisitos e passos ne-
cessários para a instalação do aplica-
tivo.
2. Conhecer seu ambiente de trabalho e 
as opções básicas.
Unidade 1 • Flash CS6, utilização e configuração7/219
Introdução 
Com o presente material, você conhecerá 
algumas ferramentas utilizadas para o de-
senvolvimento de animações e desenhos 
web. Como primeiro contato, será apresen-
tado o aplicativo Adobe Flash CS6, aclamado 
como uma das ferramentas mais versáteis 
para a web. Em meio às novas ferramentas 
voltadas para animação, o Flash conquistou 
um espaço importante e tornou-se um dos 
produtos de maior sucesso da Adobe, junto 
com o Photoshop, devido à sua versatilida-
de em desenvolvimento de animações.
Em suas versões mais antigas o Flash ofe-
recia apenas recursos para animação em 
páginas de internet. O tempo e a deman-
da crescente por mais qualidade fizeram 
com que a Adobe investisse pesado, e logo 
o programa ganhou uma “cara nova”, além 
de dezenas de funções que fizeram com que 
ele deixasse de ser um programa de design 
para se tornar praticamente uma platafor-
ma de desenvolvimento. O Flash, juntamen-
te com a plataforma AIR, permite o desen-
volvimento de aplicações para plataformas 
móveis como Android e IOs. 
Link
A tecnologia AIR permite o desenvolvimento de 
aplicações multiplataforma sem a necessidade 
de alteração em códigos de desenvolvimento. Se 
você quer conhecer mais sobre a tecnologia do 
AIR, que tal dar uma olhada neste artigo do site 
TechTudo. Disponível em: <http://www.tech-
tudo.com.br/tudo-sobre/adobe-air.html>. 
Acesso em: 10 nov. 2016.
http://www.techtudo.com.br/tudo-sobre/adobe-air.html
http://www.techtudo.com.br/tudo-sobre/adobe-air.html
Unidade 1 • Flash CS6, utilização e configuração8/219
1. Conhecendo o Aplicativo
1.1 A instalação do Adobe Flash 
CS6
O Flash CS6 pode ser instalado diretamente 
do CD da Adobe Master Collection CS6.
• Para instalar o Adobe CS6:
01. Insira o CD do Adobe Flash CS6, ou da 
Master Collection, na unidade de CD-
-ROM.
02. Escolha Iniciar > Executar. Clique em 
procurar e selecione o arquivo Insta-
lador do Flash CS6.exe no CD. Ao sur-
gir a caixa de diálogo executar, clique 
em OK para iniciar a instalação.
• Requisitos mínimos de sistema:
• Processador Intel® Pentium® 4 ou 
AMD Athlon® 64.
• Microsoft Windows Vista® Home Pre-
mium, Business, Ultimate ou Enterprise 
com Service Pack 1, Windows 7, Win-
dows 8, Windows 8.1 ou Windows 10.
• 1GB de RAM (recomendável 2GB).
• 3.5 GB de espaço livre em disco para a 
instalação; será necessário espaço li-
vre adicional durante a instalação (não 
é possível instalar em dispositivos de 
armazenamento removíveis flash).
• Resolução de 1024 x 768 (recomen-
da-se 1280 x 800) com placa de vídeo 
de 16 bits.
Unidade 1 • Flash CS6, utilização e configuração9/219
• Unidade de DVD-ROM.
• Software QuickTime 7.6.2 necessário 
para recursos multimídia.
• Conexão banda larga com a internet 
necessária para serviços on-line.
NOTA: O CD da Adobe Master Collection 
possui autorun, basta colocá-lo no com-
putador e aguardar alguns segundos que 
a instalação se iniciará automaticamente.
1.2 Iniciando o Flash CS6
Após realizada a instalação do Adobe Flash 
CS6 em seu computador, ele deverá estar 
localizado no Menu Iniciar.
Para utilizá-lo clique em Iniciar na barra 
de tarefas, aponte para Programas, depois 
para a opção Adobe Master Collection CS6 
e, por fim, clique na opção Adobe Flash Pro-
fessional CS6.
NOTA: Os novos ambientes Windows (Ver-
são 8, 8.1 e 10) podem trazer o aplicativo 
em grupos diferentes, para localizar basta 
utilizar o recurso de pesquisa do sistema 
operacional e digitar apenas “Flash”, ele 
direcionará ao executável do programa.
2. O Ambiente de Trabalho
2.1 A tela de boas-vindas
Após abrir o aplicativo será exibida a tela de 
boas-vindas, nesta janela podemos encon-
trar basicamente três colunas:
Unidade 1 • Flash CS6, utilização e configuração10/219
• A primeira coluna permite a criação 
de documentos com base em modelos 
(templates) para facilitar o desenvol-
vimento de novas animações. Nesta 
coluna também temos a opção “abrir” 
que permite a escolha de um arquivo 
anteriormente criado.
• A coluna central traz as opções para a 
criação de um novo arquivo flash com 
base na finalidade para a qual quere-
mos utilizar este arquivo.
• E a última coluna apresenta uma sé-
rie de tutoriais para conhecer o uso do 
aplicativo, estes tutoriais levam ao site 
da Adobe e normalmente apresentam 
vídeos em inglês para explicações de-
talhadas.
Unidade 1 • Flash CS6, utilização e configuração11/219
Figura 1 | A tela de boas-vindas
Fonte: elaborado pelo autor.
Unidade 1 • Flash CS6, utilização e configuração12/219
2.2 Entendendo os espaços de 
trabalho
Na tela de boas-vindas, vamos selecionar 
a opção localizada na coluna central Criar 
novo >> ActionScript 3.0. 
Figura 2 - Criando um novo arquivo no Flash
Fonte: elaborado pelo autor.
Após selecionado o tipo de arquivo, o Adobe 
Flash CS6 carregaráo arquivo e exibirá o es-
paço de trabalho Essenciais, este é o espaço 
de trabalho padrão. Para alterá-lo, pode-
mos clicar sobre o alternador de espaços de 
trabalho, localizado próximo à barra de pes-
quisa no canto superior direito e escolher o 
que melhor se adeque às suas necessidades, 
como mostra a Figura 3.
Unidade 1 • Flash CS6, utilização e configuração13/219
Figura 3 | Seletor do espaço de trabalho no Adobe Flash CS6
Fonte: elaborado pelo autor.
O espaço de trabalho Essenciais traz as ferramentas para o uso mais comum do aplicativo. Des-
se modo, ele será utilizado como base durante as aulas de Flash. A única mudança proposta 
neste ambiente será a movimentação da barra de ferramentas que, originalmente, encontra-
Unidade 1 • Flash CS6, utilização e configuração14/219
-se localizada do lado direito da janela para 
o lado esquerdo, de forma a tornar seu uso 
mais intuitivo, como em outros programas, 
por exemplo, o Adobe Photoshop ou o Corel 
Draw. Para tal, basta clicar na barra de fer-
ramentas e movê-la com o cursor do mouse 
de um lado para o outro da tela até sua fixa-
ção.
2.3 Conhecendo o Ambiente de 
Trabalho (Essenciais)1
Observe os itens identificados no ambiente 
de trabalho mostrados na Figura 4.
1 Apenas a barra de ferramentas foi posicionada na lateral es-
querda da tela, o restante segue o padrão oficial da Adobe.
Unidade 1 • Flash CS6, utilização e configuração15/219
Figura 4 | Ambiente de trabalho do Flash CS6
Fonte: elaborado pelo autor.
Unidade 1 • Flash CS6, utilização e configuração16/219
Barra de menus  apresenta os princi-
pais menus para operação do aplicativo dos 
quais trataremos a seguir. 
Ambiente de trabalho  permite realizar a 
seleção do ambiente de trabalho como visto 
no item 2.2. Encontramos também a opção 
Reinicializar ‘...’ que trará o ambiente a suas 
configurações padrão.
Caixa de pesquisas  procura informações 
na ajuda padrão do aplicativo.
Linha do tempo  ela exibe as informações 
sobre a duração do filme em Flash e sobre 
as camadas utilizadas para trabalho.
Palco  é a área de edição do Flash, é nele 
que iremos construir nossa animação. Os 
elementos que são exibidos no palco apare-
cem na animação gerada, as áreas laterais 
servem como apoio aos objetos e não exi-
bem nada.
Grupo de painéis  são conjuntos de pai-
néis inter-relacionados sob um cabeçalho. 
Para expandir um grupo de painéis, clique 
no ícone que o representa, nele serão exibi-
dos o painel selecionado e em abas ao lado 
os outros painéis que podem ser seleciona-
dos conforme mostra a Figura 5.
Unidade 1 • Flash CS6, utilização e configuração17/219
Figura 5 | Grupo de painéis (selecionado e adjuntos)
Fonte: elaborado pelo autor.
Unidade 1 • Flash CS6, utilização e configuração18/219
Inspetor de propriedades  nela são exibidas todas as informações dos objetos, clipes de filme 
ou mesmo documento, de acordo com a seleção e podem ser realizadas alterações. Junto, pode-
-se notar as opções de publicação do filme.
Caixa de ferramentas  nela você encontrará as ferramentas necessárias para a realização dos 
trabalhos em Flash. Exibida por padrão do lado direito e movimentada para o lado esquerdo. Co-
nheceremos as ferramentas posteriormente.
2.4 Conhecendo as Barras do Flash CS6
Barra de menus
Figura 6 | A barra de menus
Fonte: elaborado pelo autor.
Existem onze menus no Flash CS6. Neles estão as ferramentas importantes para a criação de 
novos projetos, como a conversão de gráficos para símbolos, a publicação de arquivos em vários 
formatos, aplicação de efeitos, organização, entre outras. Você terá, agora, uma visão geral dos 
principais menus.
Unidade 1 • Flash CS6, utilização e configuração19/219
Arquivo: como em outros programas, nele 
estão as opções para abrir, criar e salvar 
projetos, e também as opções para gravar 
e publicar. Neste menu, você pode importar 
arquivos externos: sons, imagens e vídeos; 
e também exportar animações e imagens 
para outros formatos; além de imprimir as 
imagens geradas.
Editar: menu para a edição. Traz diversos 
comandos relacionados ao desenvolvimen-
to do filme, como Desfazer e Refazer, Co-
piar e Colar; além daqueles relacionados à 
edição geral e específica para o Flash, por 
exemplo, a edição de símbolos.
Exibir: conta com as opções de zoom, ré-
guas, grades, guias; as ferramentas para fa-
cilitar a sua vida no que diz respeito à área 
de trabalho.
Inserir: este é um dos menus mais impor-
tantes do Flash. Com ele é possível inserir 
camadas e quadros e converter imagens em 
símbolos, entre várias outras ações.
Modificar: neste menu você irá interagir de 
forma direta com os elementos do seu filme, 
principalmente com as camadas e as cenas. 
Por meio dele também é possível usar fun-
ções para alinhar, ordenar os objetos e tam-
bém agrupá-los e, ainda, fazer transforma-
ções do tipo redimensionamento e rotação.
Texto: menu para formatação de texto, você 
pode definir tamanho, fonte, estilo e alinha-
mento dos textos inseridos no vídeo. Dessa 
forma, eles ficarão mais agradáveis para a 
visualização.
Unidade 1 • Flash CS6, utilização e configuração20/219
Comandos: permite a automação de tare-
fas e traz ferramentas para a exportação de 
movimentos em XML.
Controlar: é o menu responsável pelo con-
trole para as animações e programas feitos 
no Flash, com os comandos deste menu, é 
possível realizar testes dos projetos para 
verificar se “rodam” corretamente.
Depurar: neste menu podemos realizar tes-
tes de códigos relacionados ao ActionS-
cript, além do monitoramento de variáveis 
e objetos.
Janela: exibe todas as janelas abertas no 
momento. Nele também, você pode esco-
lher as barras de ferramentas e os painéis 
que devem aparecer na área de trabalho. 
Ajuda: utilizado em caso de dúvidas. Nele 
é possível acessar tópicos úteis para auxi-
liá-lo em tarefas mais complexas. O Adobe 
Flash conta com exclusivos tutoriais volta-
dos para os utilizadores de Flash.
A caixa de ferramentas
Na caixa de ferramentas você irá encontrar 
todas as ferramentas e suas opções neces-
sárias para o trabalho com gráficos e for-
mas como: caneta, lápis, borracha, balde de 
tinta, pincel, entre outros.
Ao entrar no Flash, você vai perceber que a 
barra fica ao lado direito da tela e normal-
mente é exibida em uma única coluna, para 
movê-la basta clicar na parte superior da 
caixa e arrastá-la.
Unidade 1 • Flash CS6, utilização e configuração21/219
Figura 7 | A caixa de ferramentas
Fonte: elaborado pelo autor.
Veja agora uma lista de ferramentas dispo-
níveis e o que elas fazem. Ao lado do nome 
de cada uma, será exibida a tecla de atalho 
para acesso.
Seta [V]: principal ferramenta de seleção. 
Com ela é possível movimentar os objetos 
e até mesmo fazer alterações específicas na 
Para saber mais
Olhe para a parte inferior da caixa de ferramen-
tas. Veja que a última seção é variável e é cha-
mada opções. Esta seção apresenta as opções 
disponíveis para cada ferramenta, pois para cada 
uma que você seleciona, as opções mudam. Ex-
perimente alterar entre as ferramentas e veja as 
opções que aparecem.
Unidade 1 • Flash CS6, utilização e configuração22/219
estrutura deles. Ao ativar esta ferramenta, 
aparecem três variações na seção Opções:
Figura 8 | A caixa de ferramentas
Fonte: elaborado pelo autor.
1. Encaixar: permite que todos os obje-
tos se atraiam entre si.
2. Suavizar: é capaz de tornar as linhas 
mais suaves, arredondadas.
3. Acertar: deixa as formas com ângulos 
mais acentuados.
Subselecionar [A]: esta ferramenta permite 
que você altere figuras em lugares estraté-
gicos. 
Não há opções para esta ferramenta.
Linha [N]: serve para traçar linhas. Para usar 
esta ferramenta, basta dar um clique no 
ponto em que você quer que ela comece e 
outro no ponto em que ela deve terminar. 
A ferramenta Linha não tem opções, mas é 
possível alterar suas propriedades, no Ins-
petor de propriedades. 
Laço [L]: é a ferramenta de recorte do Flash. 
Com ela é possível recortar figurascom pre-
cisão para fazer ajustes e até mesmo criar 
novas formas a partir de uma figura já exis-
tente. 
Caneta [P]: com ela é possível desenhar li-
nhas e curvas de forma similar ao mundo 
real. Desse modo, você pode obter melho-
res efeitos em desenhos, diferente da edi-
ção sistemática das linhas. 
Unidade 1 • Flash CS6, utilização e configuração23/219
Texto [T]: similar a outros aplicativos, esta 
é a ferramenta de texto do Flash. Com ela 
você pode adicionar e formatar textos.
Oval [O]: utilizada para desenhar formas 
ovais ou circulares.
Retângulo [R]: com esta ferramenta você 
pode desenhar retângulos. Ela tem uma op-
ção na seção Opções que serve para arre-
dondar os cantos do retângulo e várias op-
ções no Inspetor de propriedades.
Lápis [Y]: esta é uma ferramenta de desenho 
<< à mão livre >> do Flash. Ela oferece algu-
mas opções no Inspetor de propriedades e 
outras na seção Opções
O Formato de lápis define o comportamen-
to do lápis, tornando os traços mais arre-
dondados ou mais angulares.
Pincel [B]: com esta ferramenta você pode 
pintar áreas e criar desenhos, ela fornece 
opções como pintura normal, pintura de 
preenchimento, pintar por trás, pintar a se-
leção, etc.
Transformação livre [Q]: com esta ferra-
menta você pode alterar as medidas do ob-
jeto, rotacioná-los, etc.
Transformação de preenchimento [F]: per-
mite alterar o ângulo, a posição ou o tama-
nho de um gradiente criado para preencher 
uma determinada forma.
Tinteiro [S]: ferramenta utilizada para alte-
rar a cor, a espessura e o tipo de uma linha 
criada anteriormente.
Balde de tinta [K]: esta é a ferramenta de 
preenchimento do Flash. Na seção Opções, 
Unidade 1 • Flash CS6, utilização e configuração24/219
você pode definir como será o comporta-
mento da ferramenta.
Conta-gotas [I]: ferramenta utilizada para 
capturar a cor de um objeto determinado, 
deste modo é possível que ela seja utilizada 
para desenhar ou preencher outros objetos.
Borracha [E]: a “famosa” borracha. Com ela 
é possível apagar desenhos feitos na área 
de trabalho do Flash. Quando ativa apre-
senta três opções:
Modo apagar: apaga linhas, preenchimen-
to, interno, etc.
Modo torneira: apaga a mesma cor onde for 
clicado.
Formato da borracha: permite escolher o 
formato da borracha.
Mão [H]: realiza a movimentação completa 
da área de trabalho.
Zoom [M,Z]: esta é a ferramenta de zoom. 
Com ela você pode aumentar ou diminuir a 
visualização da tela. Indicado para pessoas 
que precisam fazer trabalhos de alta preci-
são.
Link
Caso a sua versão do Flash seja em inglês ou você 
queira ter uma visão diferente sobre as ferramen-
tas mostradas aqui, vale a pena verificar esse link:
<https://docarmocosta.wordpress.com/au-
las-e-tutoriais/animacoes-em-flash/princi-
pais-ferramentas-do-flash/>. Acesso em: 20 
out. 2016.
https://docarmocosta.wordpress.com/aulas-e-tutoriais/animacoes-em-flash/principais-ferramentas-do-flash/
https://docarmocosta.wordpress.com/aulas-e-tutoriais/animacoes-em-flash/principais-ferramentas-do-flash/
https://docarmocosta.wordpress.com/aulas-e-tutoriais/animacoes-em-flash/principais-ferramentas-do-flash/
Unidade 1 • Flash CS6, utilização e configuração25/219
Inspetor de propriedades
Nele são exibidas todas as propriedades 
dos objetos utilizados no Flash, de acordo 
com o tipo de objeto selecionado, mudam-
-se as propriedades exibidas.
Figura 9 | Inspetor de propriedades
Fonte: elaborado pelo autor.
Unidade 1 • Flash CS6, utilização e configuração26/219
Linha do tempo
Figura 10 | Linha do tempo
Fonte: elaborado pelo autor.
Para saber mais
Cada objeto criado através da barra de ferramentas possui propriedades distintas, desenhe utilizando 
as ferramentas retângulo e círculo e observe as diferenças entre as propriedades através do Inspetor de 
propriedades. Com o uso constante desse painel, você aprenderá recursos novos do Flash.
Unidade 1 • Flash CS6, utilização e configuração27/219
Este painel vai exibir informações sobre a 
sua animação no Flash CS6, ela irá mostrar 
o tempo de duração, as camadas, se existe 
interpolação de movimento, etc., além de 
propriedades da camada selecionada.
Para saber mais
As camadas no Flash podem ser visíveis ou não no 
filme final, basta clicar na bolinha abaixo do íco-
ne com um olho ( ) na camada em que deseja 
ocultar o elemento. A camada também pode ser 
bloqueada para evitar que seus objetos sejam al-
terados enquanto você faz o filme, basta clicar na 
bolinha abaixo do ícone do cadeado ( )
2.5 Palco de Edição
Efetivamente é nele que começa seu traba-
lho. O palco de edição não é nada mais do 
que a área do seu projeto onde os elemen-
tos serão organizados. É possível alterar seu 
tamanho e cor facilmente para adaptá-lo 
ao tipo de trabalho que você deseja realizar. 
Quando falamos de palco, não estamos nos 
referindo apenas à área do retângulo bran-
co que aparece na tela. Esse retângulo deli-
mita aquilo que será mostrado na animação 
final.
Você também pode colocar elementos fora 
do palco, só que esses não vão aparecer 
quando o arquivo for publicado. Essa carac-
terística é muito útil quando se quer escon-
der símbolos ou elementos que não devem 
Unidade 1 • Flash CS6, utilização e configuração28/219
ser vistos pelos usuários. Por padrão, o palco tem fundo branco e tamanho de 550 x 400 pixels, 
porém, é possível alterar essas características. Veja como:
1. Abra um arquivo novo no Flash, conforme estudamos.
2. Nos campos Dimensões, digite valores diferentes dos atuais para largura e altura do palco. 
No nosso caso escolhemos 600 x 100 pixels. Na caixa Cor do plano de fundo, clique na seta 
para abrir a paleta de cores. Nela selecione a cor que preferir. 
Figura 11 | Alteração das configurações do arquivo
Fonte: elaborado pelo autor.
Clique em OK para ver o resultado.
Unidade 1 • Flash CS6, utilização e configuração29/219
Link
Ao desenvolver banners animados para web, exis-
tem alguns tamanhos padrões de arquivo que po-
dem ser utilizados para tornar a experiência do 
usuário mais intuitiva. Para você conhecer esses 
tamanhos acesse: <http://www.abraweb.com.
br/banners.php>. Acesso em: 20 out. 2016.
http://www.abraweb.com.br/banners.php
http://www.abraweb.com.br/banners.php
Unidade 1 • Flash CS6, utilização e configuração30/219
Glossário
Ambiente de trabalho: janela principal de um aplicativo de computador, onde encontramos 
todas as ferramentas para sua utilização.
Depurar: procurar, encontrar e corrigir, pela examinação do código de um programa, as falhas 
ou erros de um computador.
Pixel: é o menor elemento em um dispositivo de exibição, a ele é possível atribuir uma única 
cor. Simplificando, ele é o menor ponto que forma uma imagem digital, diversos pixels montam 
uma imagem inteira.
https://pt.wikipedia.org/wiki/Cor
https://pt.wikipedia.org/wiki/Imagem_digital
Questão
reflexão
?
para
31/219
É hora de praticar! Faça um novo filme com as proprie-
dades que achar interessante. Que tal tentar desenhar 
alguns objetos para ver como eles se comportam no 
palco?
32/219
Considerações Finais
• Neste módulo, você conheceu como instalar o aplicativo Flash e os requisitos 
de hardware necessários para essa instalação. Tratamos sobre as caracterís-
ticas básicas do ambiente de trabalho e como realizar pequenas customiza-
ções. Vale salientar que muitas ferramentas serão vistas no decorrer desse 
curso, então, é importante estudar o ambiente de trabalho do aplicativo.
Unidade 1 • Flash CS6, utilização e configuração33/219
Referências
ADOBE. Utilização do Adobe Flash Professional CS5 e CS 5.5. 2011. Disponível em: <http://
help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf>. Acesso em: 10 ago. 2016.
SIMÃO, Daniel Hayashida. Flash CS6: introdução ao mundo da animação. São Paulo: Viena, 2014. 
352 p.
http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf
http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf
34/219
Assista a suas aulas
Aula 1 - Tema: Introdução ao Flash Cs6. Bloco I
Disponível em: <//fast.player.liquidplatform.com/pApiv2/
embed/dbd3957c747affd3be431606233e0f1d/bbea7a-
4a950049218c45baf3db8f1173>.
Aula 1 - Tema: Introdução ao Flash Cs 6. Bloco 
II
Disponível em: <//fast.player.liquidplatform.com/pApiv2/
embed/dbd3957c747affd3be431606233e0f1d/de-
57379cd5d9f9a1339790a9a0886c31>.
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/bbea7a4a950049218c45baf3db8f1173
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/bbea7a4a950049218c45baf3db8f1173
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/bbea7a4a950049218c45baf3db8f1173
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/de57379cd5d9f9a1339790a9a0886c31
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/de57379cd5d9f9a1339790a9a0886c31
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/de57379cd5d9f9a1339790a9a0886c31
35/219
1. Assinale a alternativa que se refere à área do ambiente de trabalho do 
Adobe Flash que utilizamos para a criação do filme que será exibido para o 
usuário.
a) Barra de menus.
b) Conectividade com XML.
c) Palco.
d) Inspetor de propriedades.
e) ActionScript 2.0.
Questão 1
36/219
2. Assinale a alternativa que identifica a barra onde encontramos as ferra-
mentas necessárias para a criação dos objetos em Flash.
a) Caixa de ferramentas.
b) Barra de propriedades.
c) Painel de controle do ActionScript.
d) Navegador de símbolos.
e) Biblioteca.
Questão 2
37/219
3. Assinale a alternativa que identifica qual ferramenta você deve utilizar 
para desenhar linhas e curvas similares ao mundo real.
a) Seta.
b) Caneta.
c) Pincel.
d) Subselecionar.
e) Conta-gotas.
Questão 3
38/219
4. Ao clicar na bolinha em frente ao nome da camada abaixo do ícone com 
um olho, o que acontece com essa camada? Assinale a alternativa correta.
a) Utiliza o ActionScript 5.0.
b) Visualiza os resultados no painel depurar.
c) Reinicia as guias do aplicativo.
d) Troca a visualização de painéis.
e) Oculta a camada na animação.
Questão 4
39/219
5. Assinale a alternativa que identifica onde ficam os quadros que repre-
sentam o tempo de duração do filme.
a) Depurar.
b) Barra de propriedades.
c) Janela de ações.
d) Linha do tempo.
e) Biblioteca.
Questão 5
40/219
Gabarito
1. Resposta: C.
Palco é o nome dado à área onde os ele-
mentos criados são mostrados e podem ser 
visíveis ou não ao usuário, de acordo com as 
seleções realizadas nas camadas da linha do 
tempo.
2. Resposta: A.
A Caixa de ferramentas, como o próprio 
nome sugere, armazena as ferramentas 
para o trabalho na criação de animações no 
Adobe Flash e traz as propriedades de cada 
uma em sua parte inferior.
3. Resposta: B.
A ferramenta caneta é a mais indicada para 
o trabalho, pois possui pontos de ancora-
gem em cada clique e direciona a linha con-
forme é arrastada.
4. Resposta: E.
O ícone do olho serve para ocultar a camada 
na animação, desta forma, os objetos pre-
sentes nesta camada não serão exibidos no 
filme final.
5. Resposta: D.
A linha do tempo é responsável por mostrar 
a duração do filme em flash e é segmentada 
em quadros.
41/219
Unidade 2
Criando uma animação
Objetivos
1. Criar uma animação quadro a quadro.
2. Familiarizar-se com a linha do tempo 
e algumas ferramentas do aplicativo 
Flash CS 6.
Unidade 2 • Criando uma animação42/219
Introdução
Você conheceu um pouco do ambiente de 
trabalho do Flash CS 6 no módulo 1 e agora 
irá utilizar suas ferramentas para a criação 
de animações. Neste módulo, você enten-
derá como é possível fazer uma animação 
quadro a quadro. Esta técnica é utilizada 
para a criação de desenhos animados e até 
mesmo animações do tipo Stop Motion.
1. Configurando sua Primeira 
Animação
Para começarmos, siga as seguintes orien-
tações:
1. Abra o aplicativo Flash CS 6.
2. Na tela de boas-vindas selecione na 
coluna central a opção ActionScript 
3.0
3. O ambiente de trabalho com suas ca-
racterísticas padrão será carregado.
Você irá desenhar um círculo que irá se mo-
vimentar à direita em cada quadro-chave. 
Na caixa de ferramentas, vamos selecionar 
a ferramenta oval.
Link
Se você tem interesse em compreender e conhe-
cer mais sobre as animações Stop Motion, vale a 
pena dar uma olhada neste link do Tech Tudo que 
explica exatamente o que são essas animações e 
como elas podem ser produzidas <http://www.
tecmundo.com.br/player-de-video/2247-o-
-que-e-stop-motion-.htm>. Acesso em: 20 
out. 2016.
http://www.tecmundo.com.br/player-de-video/2247-o-que-e-stop-motion-.htm
http://www.tecmundo.com.br/player-de-video/2247-o-que-e-stop-motion-.htm
http://www.tecmundo.com.br/player-de-video/2247-o-que-e-stop-motion-.htm
Unidade 2 • Criando uma animação43/219
Figura 1 | Seleção da ferramenta oval
Fonte: elaborado pelo autor.
Com a ferramenta oval ativada, basta posicionar o cursor em forma de + no palco do Adobe Flash 
CS 6, clicar e arrastar para desenhar o círculo. Procure desenhá-lo mais à esquerda do quadro 
para que seja possível a realização do movimento quadro a quadro.
2. Realizando a Animação
2.1 Entendendo os objetos desenhados no Flash
Conforme orientado no item anterior, você realizou o desenho de um círculo conforme mostra a 
Figura 2.
Unidade 2 • Criando uma animação44/219
Figura 2 | Círculo desenhado à esquerda do palco
Fonte: elaborado pelo autor.
Unidade 2 • Criando uma animação45/219
Este objeto possui propriedades distintas de 
contorno e preenchimento que podem ser al-
teradas com o uso da ferramenta de seleção.
Para saber mais
Utilizando a ferramenta de seleção clique so-
bre o contorno do objeto apenas. O contorno ficará 
selecionado. Caso arraste o mouse com esta sele-
ção, você verá dois objetos diferentes na tela, um 
que se refere ao contorno e outro ao preenchimen-
to. Caso queira excluir qualquer um dos dois obje-
tos, basta dar um clique sobre ele e então pressio-
nar a tecla DELETE. É importante tomar cuidado 
ao utilizar a ferramenta de seleção, pois ela pode 
selecionar apenas partes de um determinado obje-
to, o que pode ser útil ao trabalho ou dificultar sua 
produção. Tente utilizar a ferramenta de seleção de 
formas diferentes para entender sua atuação.
Para alterar a cor do preenchimento do ob-
jeto é possível utilizar a ferramenta balde de 
tinta (K). Basta selecionar a cor no seletor de 
cores localizado na caixa de ferramentas e 
depois clicar com o balde de tinta sobre o 
objeto que se deseja colorir.
2.2 A Linha de Tempo e os Qua-
dros-Chave
Para realizar a animação quadro a quadro 
no Flash CS6, vamos utilizar a linha do tem-
po. Ela é dividida em quadros e esses são 
numerados de 5 em 5, conforme você pode 
ver na Figura 3.
Unidade 2 • Criando uma animação46/219
Figura 3 | Linha do tempo e suas divisões
Fonte: elaborado pelo autor.
Os quadros que utilizamos como impor-
tantes para a animação são chamados de 
quadros-chave. Vamos inserir novos qua-
dros-chave para realizar a nossa animação. 
Para inserir um novo quadro-chave, basta 
clicar sobre o momento desejado na linha 
do tempo com o botão direito do mouse e 
depois em inserir quadro-chave.
Figura 4 | Inserindo novos quadros-chave
 Fonte: elaborado pelo autor.
Vamos realizar a inserção de novos quadros-
-chaves de 5 em 5 quadros, aproveitando 
Unidade 2 • Criando uma animação47/219
as marcações da linha do tempo. Repetire-
mos esta ação até o quadro 60. A cada novo 
quadro-chave inserido, iremos movimentar, 
utilizando a ferramenta seleção, nosso cír-
culo para a direita.
Esse processo é similar ao processo de rea-
lizar animação com bloco de papel, em que 
em cada folha do bloco (aqui chamamos de 
quadro-chave) você desenha o objeto um 
pouco diferente da posição anterior. Bas-
ta folhear o bloco depois e ver a animação. 
Esse bloco é chamado de Flip-book ou kine-
ógrafo.
Após a realização deste processo,sua ani-
mação já pode ser testada.
2.3 Testando a Animação
Uma das formas mais comuns para testar 
a animação é realizar sua visualização no 
Link
Agora que você está conhecendo um pouco 
mais dos processos de animação que tal ler um 
documento bem interessante sobre como são 
produzidos os desenhos animados? Disponível 
em: <http://www.academia.edu/4880977/
T%C3%A9cnicas_de_Anima%C3%A7%-
C3%A3o_A_T%C3%89CNICA_DO_DESE-
NHO_ANIMADO>. Acesso em: 20 out. 2016.
http://www.academia.edu/4880977/T%C3%A9cnicas_de_Anima%C3%A7%C3%A3o_A_T%C3%89CNICA_DO_DESENHO_ANIMADO
http://www.academia.edu/4880977/T%C3%A9cnicas_de_Anima%C3%A7%C3%A3o_A_T%C3%89CNICA_DO_DESENHO_ANIMADO
http://www.academia.edu/4880977/T%C3%A9cnicas_de_Anima%C3%A7%C3%A3o_A_T%C3%89CNICA_DO_DESENHO_ANIMADO
http://www.academia.edu/4880977/T%C3%A9cnicas_de_Anima%C3%A7%C3%A3o_A_T%C3%89CNICA_DO_DESENHO_ANIMADO
Unidade 2 • Criando uma animação48/219
player SWF. Para isso, vamos clicar no menu Controlar, depois em Testar filme e por último em 
Testar. Nesse momento, o player será exibido e teremos o vídeo em exibição de loop contínuo.
Figura 5 | Player de vídeo para teste
Fonte: elaborado pelo autor.
Unidade 2 • Criando uma animação49/219
No player, o menu mais importante nes-
te momento é o menu controlar, que tra-
rá as opções para a manipulação do vídeo. 
Comandos de retroceder, avançar e parar, 
além do comando repetir, farão o vídeo ser 
reproduzido de forma contínua. 
Link
Enquanto você aprende a desenvolver suas ani-
mações, uma sugestão é estar preparado para en-
tender programação, que veremos nos próximos 
módulos. Disponível em: <https://www.youtu-
be.com/watch?v=j221cC53Kt0>. Acesso em: 
20 out. 2016.
3. Utilizando Camadas Diferen-
tes 
Agora que você já sabe como criar uma ani-
mação, é importante lembrar que a linha 
do tempo do Flash permite a utilização de 
camadas diferentes. Desta forma, podemos 
ter em uma mesma animação objetos com 
movimentos diferentes, desde que cada um 
esteja em uma camada.
Você irá animar as três formas geométricas 
básicas da bandeira do Brasil. Para isso, va-
mos criar três camadas e chamá-las, res-
pectivamente, de retângulo, losango e cír-
culo. Em cada uma das camadas, vamos 
desenhar uma das formas da bandeira, con-
forme podemos ver na Figura 6.
https://www.youtube.com/watch?v=j221cC53Kt0
https://www.youtube.com/watch?v=j221cC53Kt0
Unidade 2 • Criando uma animação50/219
Figura 6 | Camadas da bandeira do Brasil
Unidade 2 • Criando uma animação51/219
Fonte: elaborado pelo autor.
Vamos inserir quadros-chave a cada dez 
quadros, até o 50 e animar cada peça para 
que a bandeira do Brasil seja montada ao 
centro do palco. Lembre-se de que a cada 
Para saber mais
Não se esqueça dos botões de controle presentes 
nas camadas, como o mostrar ou ocultar camada 
 e o bloquear ou desbloquear camada , eles 
poderão ser úteis no momento em que estamos 
trabalhando com as formas para que a seleção 
de um objeto não atrapalhe a seleção do outro. 
Para ativá-lo em uma camada, basta que clicar na 
bolinha localizada em frente ao nome da camada, 
embaixo do item que deseja utilizar (visualização 
ou bloqueio).
novo quadro-chave inserido, você deverá 
movimentar um pouco a peça para que ela 
se aproxime do centro do palco.
Se testar o filme neste momento (CTRL+AL-
T+ENTER) você irá notar que a bandeira é 
montada e rapidamente é desmontada de-
vido à configuração repetir do filme. Para 
remover este problema, vamos inserir mais 
um quadro-chave em cada camada no qua-
dro 70, desta forma do quadro 50 ao 70 te-
remos tempo para ver a bandeira montada 
por completo.
Unidade 2 • Criando uma animação52/219
Para saber mais
Uma das formas de tornar as animações mais inte-
ressantes é utilizando o ActionScript, que é a lin-
guagem de programação por trás das animações 
desenvolvidas em Flash. O ActionScript é uma lin-
guagem orientada a objetos e segue padrões uti-
lizados em C e JavaScript. O painel ações é quem 
oferece recursos para as programações com o 
ActionScript e ele pode ser encontrado através do 
menu Janela >> Ações, ou simplesmente pressio-
nando a tecla F9.
Unidade 2 • Criando uma animação53/219
Glossário
Camadas: são como folhas de papel transparente sobrepostas em que podemos realizar dese-
nhos/gráficos diferentes e com diferentes comportamentos.
Quadro: momento da animação em que a imagem deve ser modificada para criar a ilusão de 
animação (em inglês chamado de frame).
SWF: formato de saída do Adobe Flash que pode ser exibido pelos players de vídeo mais co-
muns e inserido em páginas da web.
Questão
reflexão
?
para
54/219
É hora de praticar! Faça um uma animação com cenário e 
um objeto em movimento. O cenário deve estar em uma 
camada e o objeto a ser movimentado deverá ser dese-
nhado em outra. Observe uma sugestão na Figura 7.
Questão
reflexão
?
para
55/219
Figura 7 | Barco e cenário sugestão de prática
Fonte: elaborado pelo autor.
Nossa animação ainda parece primária, mas fique tranquilo, você 
irá entender como isso pode ser melhorado na próxima aula! Não 
deixe de praticar.
56/219
Considerações Finais
• É importante entender bem as configurações inicias das animações, 
pois elas servirão de base para nossas animações.
• Neste módulo, você foi capaz de criar animações utilizando o con-
ceito de camadas. Este conceito é amplamente utilizado não apenas 
em Flash, mas em diversos aplicativos utilizados para criação e trata-
mento de imagens.
Unidade 2 • Criando uma animação57/219
Referências 
ADOBE. Utilização do Adobe Flash Professional CS5 e CS 5.5. 2011. Disponível em: <http://
help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf>. Acesso em: 20 out. 2016.
SIMÃO, Daniel Hayashida. Flash CS6: introdução ao mundo da animação. São Paulo: Viena, 2014. 
352 p.
http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf
http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf
58/219
Assista a suas aulas
Aula 2 - Tema: Criando animações quadro a 
quadro. Bloco I
Disponível em: <//fast.player.liquidplatform.com/pA-
piv2/embed/dbd3957c747affd3be431606233e0f-
1d/08997e4da724bc4a762a5c47cbe89a3f>.
Aula 2 - Tema: Criando animações quadro a 
quadro. Bloco II
Disponível em: <//fast.player.liquidplatform.com/pApiv2/
embed/dbd3957c747affd3be431606233e0f1d/732fa-
b96590eff8fc10f1446b471be55>.
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/08997e4da724bc4a762a5c47cbe89a3f
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/08997e4da724bc4a762a5c47cbe89a3f
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/08997e4da724bc4a762a5c47cbe89a3f
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/732fab96590eff8fc10f1446b471be55
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/732fab96590eff8fc10f1446b471be55
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/732fab96590eff8fc10f1446b471be55
59/219
1. Assinale a alternativa que indica o nome dado ao quadro em que será feita 
a modificação do comportamento de um objeto criado no Flash:
a) Animator Plus.
b) Quadro-mestre.
c) Quadro-chave.
d) Quadro de modificação.
e) Linha do tempo.
Questão 1
60/219
2. Assinale a alternativa que contempla os botões que podem ser utilizados 
na linha do tempo para facilitar o trabalho em outras camadas.
Questão 2
a) Mostrar ou Ocultar / Bloquear e desbloquear.
b) Remover Dados / Limpar cenário.
c) ActionScript / XML de ação.
d) Biblioteca / Cenário.
e) Quadro-mestre / Quadro-chave.
61/219
3. Ao desenhar um objeto no Flash, ele tem comportamento de dois objetos 
diferentes, isto acontece devido às propriedades de:
Questão 3
a) Posição no Cenário / Subseleção.
b) Contorno / Preenchimento.
c) Linha curva / Quadro-chave.
d) Ferramenta de seleção / Preenchimento.
e) Contorno / Conta-gotas.
62/219
4. Quandoé necessário testar o filme, qual a combinação de teclas que pode-
mos utilizar no teclado?
Questão 4
a) ALT + V.
b) CTRL + C e CTRL + V.
c) SHIFT + BARRA DE ESPAÇO.
d) ALT + F.
e) CTRL + ALT + ENTER.
63/219
5. Assinale a opção que contempla qual recurso devemos utilizar quando 
queremos que um filme fique um tempo repetindo o mesmo quadro, sem 
iniciar a repetição.
Questão 5
a) Inserir um novo quadro no início do filme.
b) Repetir o filme no sentido inverso.
c) Não encerrar o filme com quadro-chave.
d) Inserir mais um quadro-chave em um momento à frente igual ao último
e) Essa ação não é possível no Flash CS 6.
64/219
Gabarito
1. Resposta: C.
Quadro-chave é o quadro utilizado pelo 
Flash para delimitar onde as modificações 
do objeto acontecem.
2. Resposta: A.
Todas as camadas trazem os botões mostrar 
ou ocultar, representados por um olho, que 
deixam ou não a camada visível no filme, e 
também o botão bloquear ou desbloquear, 
representado por um cadeado que impede a 
movimentação dos objetos daquela cama-
da enquanto selecionamos objetos em ou-
tras camadas.
3. Resposta: B.
O contorno e o preenchimento no Flash são 
tratados como objetos diferentes, desse 
modo vale a pena ficar atento quando for 
necessário usar um ou outro.
4. Resposta: E.
A combinação CTRL + ALT + ENTER tem o 
mesmo efeito que utilizar o menu Controlar 
>> Testar Filme >> Testar.
5. Resposta: D.
A repetição de quadros iguais faz com que o 
filme pareça mostrar sempre a mesma ima-
gem antes de iniciar a sua repetição.
65/219
Unidade 3
Exibição de filme
Objetivo
1. Verificar como o comportamento de 
uma animação pode mudar quando 
alteramos as propriedades do vídeo.
Unidade 3 • Exibição de filme66/219
Introdução
Nos dois primeiros módulos você conheceu 
um pouco do ambiente de trabalho do Flash 
CS 6 e utilizou suas ferramentas para a cria-
ção de sua primeira animação. Tudo parece 
muito complicado ainda, mas com a prática 
vamos começar a criar animações mais in-
teressantes. Neste módulo, você irá alterar 
as propriedades do filme e entender a rela-
ção de quadros por segundo, tempo de fil-
me e as diferentes formas de interpretação 
da visão humana.
Link
A ideia de quadros por segundo (frames per se-
cond) é utilizada em computação não apenas 
como recurso para a criação de animações web, 
mas também para a construção de jogos. O arti-
go do TecMundo expande esta visão para games 
e hardware de computador. Vale a pena conhecer. 
Disponível em: <http://www.tecmundo.com.
br/video/10926-o-que-sao-frames-por-se-
gundo-.htm>. Acesso em: 20 out. 2016.
1. Animando Objetos Desenha-
dos
1.1 Desenhando Objetos com 
Várias Ferramentas
No material do módulo 3, você encontrará 
http://www.tecmundo.com.br/video/10926-o-que-sao-frames-por-segundo-.htm
http://www.tecmundo.com.br/video/10926-o-que-sao-frames-por-segundo-.htm
http://www.tecmundo.com.br/video/10926-o-que-sao-frames-por-segundo-.htm
Unidade 3 • Exibição de filme67/219
um item de como realizar a animação básica 
de um objeto e utilizará o mesmo princípio 
agora para entender algumas característi-
cas do vídeo. 
Utilizando as ferramentas de desenho e 
a lata de tinta produzimos o carrinho que 
pode ser observado na Figura 1.
Figura 1 | Carrinho desenhado com ferramentas do Flash CS 6
Fonte: elaborado pelo autor.
Para saber mais
Além de criar seus próprios objetos no Flash, é 
possível trabalhar com elementos multimídia 
que são:
• Som (voz humana, música, efeitos especiais).
• Fotografia (imagem estática).
• Vídeo (imagens em pleno movimento).
• Animação (desenho animado).
• Gráficos.
• Textos (incluindo números, tabelas etc.).
O termo multimídia se refere à combinação de 
diferentes recursos para criar, armazenar, ma-
nipular e pesquisar conteúdos. Em animações, 
quanto maior a aplicação dos recursos multimí-
dia, melhor será o resultado final.
Unidade 3 • Exibição de filme68/219
1.2 Convertendo os Desenhos 
em Símbolos
Ao utilizar diversas ferramentas para cria-
ção de desenhos, é importante transformar 
esses desenhos em símbolos para facilitar o 
processo de animação.
1. Com a ferramenta de seleção (V) faça 
um retângulo ao redor do carrinho, de 
modo a selecionar todo o objeto. 
Figura 2 | Carrinho completamente selecionado
Fonte: elaborado pelo autor.
Clique sobre o menu Modificar e em seguida 
em Converter em símbolo (para esta opera-
ção é possível utilizar a tecla de atalho F8). 
Observe a Figura 3.
Figura 3 | Menu Modificar para converter o objeto em símbolo
Fonte: elaborado pelo autor.
A janela de conversão será aberta e exibirá 
os tipos de símbolos possíveis, vamos sele-
cionar a opção gráfico e nomear o “Símbolo 
1” como “carrinho”.
Unidade 3 • Exibição de filme69/219
Figura 4 | Converter em símbolo
Fonte: elaborado pelo autor.
Para saber mais
• Gráfico: para imagens estáticas e criar partes reutilizáveis de animação vinculadas à linha do tempo 
principal. Os símbolos gráficos trabalham junto com a linha do tempo principal. Os símbolos gráficos 
deixam menor o arquivo do Flash, pois não possuem linha do tempo independente.
Unidade 3 • Exibição de filme70/219
Para saber mais
• Botão: para criar botões interativos que respondam a cliques do mouse, rolagens ou outras ações. 
Crie as imagens associadas aos diversos estados do botão e, em seguida, atribua ações a cada esta-
do do botão. São utilizados em web para efeitos.
• Clipe de filme: os clipes de filme têm a sua própria linha do tempo com vários quadros, independen-
temente da linha do tempo principal: imagine-os como aninhados dentro de uma linha do tempo 
principal que pode conter controles e sons interativos e até outras ocorrências de clipe de filme.
Após estes passos, o Flash CS6 entenderá o desenho do carrinho como um único símbolo e fare-
mos a animação dele.
2. Animando o Gráfico e Alterando o FPS
2.1 Animação quadro a quadro
Criaremos quadro-chaves a cada cinco quadros e em cada um movimentaremos o objeto à di-
reita até o quadro 70. Pondera-se que neste módulo você deverá se preocupar com o FPS da ani-
Unidade 3 • Exibição de filme71/219
mação, assim, praticar animações quadro a quadro (visto no módulo 2) é fundamental. Observe 
a linha do tempo na Figura 5 após a criação dos quadros e o quadro 1(a) e quadro 70(b) em que 
aparecem, respectivamente, as posições iniciais e finais do objeto.
Figura 5 | Linha do tempo e posição inicial e final do objeto
Fonte: elaborado pelo autor.
2.2 Alterando o FPS da Animação
Após realizar a animação mostrada no item anterior e testar seu comportamento padrão (CTRL+ 
Unidade 3 • Exibição de filme72/219
ENTER), agora, você irá alterar a taxa de 
quadros exibidas por segundo em sua ani-
mação. Quanto menor a quantidade de qua-
dros exibidos por segundo, mais perceptível 
serão os movimentos do objeto e mais difícil 
será a ideia de movimento. Em contraparti-
da, quanto maior a quantidade de quadros 
exibidos por segundo, menos perceptível os 
movimentos do objeto e melhor a ideia de 
movimento.
Para realizar a alteração, clique no palco e 
vamos utilizar o painel de propriedades lo-
calizado na lateral direita da tela.
Figura 6 | Painel de Propriedades com destaque da propriedade FPS
Fonte: elaborado pelo autor.
Unidade 3 • Exibição de filme73/219
Neste momento, é importante realizar os 
testes para notar a diferença no comporta-
mento de sua animação.
Altere o FPS para cinco quadros por segun-
do e execute o teste (CTRL + ENTER), neste 
modo é possível ver nitidamente cada qua-
dro e como o movimento é realizado com 
lentidão, o que não traz nada de interessan-
te à animação desenvolvida.
Altere o FPS para 70 quadros por segundo e 
execute o teste (CTRL + ENTER), deste modo 
teremos a execução do filme completa em 
um segundo e a animação aparenta uma 
maior fluidez.
Para saber mais
Agora que você entende o FPS, é possível calcu-
lar o tempo de duração do seu filme com base na 
quantidade de quadros que você criou na linha 
do tempo e na quantidadede FPS de seu filme. 
Utilizando um filme padrão com taxa de 24 FPS 
e trabalhando na linha do tempo até o quadro 
70, teremos um filme de aproximadamente 2,9 
segundos, basta dividir a quantidade de quadros 
criados pela taxa de FPS. Neste caso: 70 / 24 = 
2,916666.
Unidade 3 • Exibição de filme74/219
3. Recursos para Auxiliar a Pro-
dução de Quadros-Chave
3.1 Papel de Transparência
No módulo anterior e neste você trabalhou 
com as animações quadro a quadro, e sem-
pre era necessário mover o objeto “um pou-
co mais” que no momento anterior. Como 
ter base de quanto esse movimento está 
diferente do momento anterior? Essa per-
gunta é fácil de responder com base na uti-
lização de um recurso da linha do tempo do 
Flash CS6, que é o papel de transparência. 
Com ele ativado é possível analisar o com-
portamento do objeto um pouco antes do 
quadro atual.
1. Localize na barra de ferramentas abai-
xo da linha do tempo o botão Papel de 
transparência e clique sobre ele.
Figura 7 | Papel de transparência
Fonte: elaborado pelo autor.
2. Observe que se abre na linha do tem-
po no quadro selecionado (no exem-
Unidade 3 • Exibição de filme75/219
plo quadro 25) uma área cinza mais 
escura.
Figura 8 | Área do papel de transparência
Fonte: elaborado pelo autor.
3. Você pode redimensionar a área de 
transparência clicando sobre as alças 
(bolinhas) nas extremidades da área 
cinza mais escura.
4. Observe que no seu filme verá uma 
sombra que corresponde ao quadro 
anterior da sua animação conforme 
mostra a Figura 9.
Figura 9 | Aplicação do papel de transparência na animação
Fonte: elaborado pelo autor.
Deste modo, torna-se mais fácil o processo 
de movimentação do objeto com base em 
sua posição anterior.
Unidade 3 • Exibição de filme76/219
Link
Talvez você não seja um especialista em desenho 
em computador, mas tenha curiosidade de co-
nhecer algumas técnicas para isso. O blog Guaxi-
nim Animador traz um tutorial básico para a cria-
ção de um personagem em Flash. Disponível em: 
<http://raccoonanimation2.blogspot.com.
br/2014/08/como-desenhar-no-adobe-
-flash-tutorial.html>. Acesso em: 20 out. 2016.
http://raccoonanimation2.blogspot.com.br/2014/08/como-desenhar-no-adobe-flash-tutorial.html
http://raccoonanimation2.blogspot.com.br/2014/08/como-desenhar-no-adobe-flash-tutorial.html
http://raccoonanimation2.blogspot.com.br/2014/08/como-desenhar-no-adobe-flash-tutorial.html
Unidade 3 • Exibição de filme77/219
Glossário
FPS: frames per second ou quadros por segundo, é uma taxa da animação que se refere à quan-
tidade de quadros que serão exibidos dentro de um segundo.
Papel de transparência: utilizado para mostrar a sobreposição da imagem do quadro anterior, 
facilitando o desenvolvimento das animações.
Símbolo: elemento gráfico que compõe o filme do Flash e pode ser utilizado para facilitar o de-
senvolvimento de animações. Permite o reuso nas animações.
Questão
reflexão
?
para
78/219
Qual seria o tempo ideal de uma animação em Flash? 
Quais são os itens necessários para uma animação? Va-
mos assistir a uma animação feita em Flash sobre o fun-
cionamento do computador somente para despertar 
sua curiosidade. Disponível em: <https://www.youtube.
com/watch?v=7ax4h6Szxt0>. Acesso em: 20 out. 2016.
https://www.youtube.com/watch?v=7ax4h6Szxt0
https://www.youtube.com/watch?v=7ax4h6Szxt0
79/219
Considerações Finais
• As animações quadro a quadro são utilizadas por grandes estúdios para a 
criação dos desenhos 3D que conhecemos atualmente.
• Toda animação torna-se mais interessante quando nos valemos de recursos 
multimídia para melhorá-las. Os elementos multimídia inseridos na ani-
mação farão com que nosso usuário esteja muito atento a ela.
Link
Para entender melhor quais são os elementos mul-
timídia que podem ser aplicados no ambiente de 
animações, acesse o link sugerido. Disponível em: 
<http://vivendoavidaacademica.blogspot.com.
br/2011/03/elementos-de-multimidia-e-hi-
permidia.html>. Acesso em: 20 out. 2016.
http://vivendoavidaacademica.blogspot.com.br/2011/03/elementos-de-multimidia-e-hipermidia.html
http://vivendoavidaacademica.blogspot.com.br/2011/03/elementos-de-multimidia-e-hipermidia.html
http://vivendoavidaacademica.blogspot.com.br/2011/03/elementos-de-multimidia-e-hipermidia.html
Unidade 3 • Exibição de filme80/219
Referências 
ADOBE. Trabalho com símbolos no Animate CC. Disponível em: <https://helpx.adobe.com/br/
animate/using/symbols.html>. s. d. Acesso em: 15 set. 2016.
______. Utilização do Adobe Flash Professional CS5 e CS 5.5. 2011. Disponível em: <http://help.
adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf>. Acesso em: 10 set. 2016.
SIMÃO, Daniel Hayashida. Flash CS6: introdução ao mundo da animação. São Paulo: Viena, 2014. 
352 p.
81/219
Assista a suas aulas
Aula 3 - Tema: Alterando FPS e criando símbo-
los. Bloco I
Disponível em: <//fast.player.liquidplatform.com/pApiv2/
embed/dbd3957c747affd3be431606233e0f1d/1bca-
68fbf83482d1a71f4748d6577c18>.
Aula 3 - Tema: Alterando FPS e criando símbo-
los. Bloco II
Disponível em: <//fast.player.liquidplatform.com/pApiv2/
embed/dbd3957c747affd3be431606233e0f1d/cc-
947c5a56b439b9da1fe59ba3154c76>.
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/1bca68fbf83482d1a71f4748d6577c18
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/1bca68fbf83482d1a71f4748d6577c18
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/1bca68fbf83482d1a71f4748d6577c18
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/cc947c5a56b439b9da1fe59ba3154c76
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/cc947c5a56b439b9da1fe59ba3154c76
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/cc947c5a56b439b9da1fe59ba3154c76
82/219
1. Assinale a alternativa correta. É possível calcular o tamanho de um filme 
em Flash dividindo a sua quantidade de quadros na linha do tempo por:
a) Número de quadros-chave.
b) Tempo de desenvolvimento.
c) Taxa de FPS.
d) Número de símbolos.
e) Quantidade de camadas.
Questão 1
83/219
2. Assinale a alternativa que contempla o que devemos utilizar para alterar a 
taxa de FPS de um filme em Flash.
a) Painel de propriedades.
b) Caixa de ferramentas.
c) Menu modificar e a opção Testar filme.
d) ActionScript.
e) Quadro-chave.
Questão 2
84/219
3. Assinale a alternativa que completa corretamente a lacuna. Quando criamos 
um objeto com base na composição de outros objetos é interessante trans-
formá-lo em um: _______________.
a) Objeto do ActionScript.
b) Símbolo.
c) Grupo.
d) Navegador de filme.
e) Personagem.
Questão 3
85/219
4. Assinale a alternativa que completa corretamente a lacuna. Ao alterar o 
FPS para um valor _____________, é possível verificar o filme com muita 
percepção das mudanças quadro a quadro, o que não é interessante para 
animação.
a) Múltiplo de três.
b) Acima de 200.
c) Maior.
d) Igual à quantidade de quadros.
e) Menor.
Questão 4
86/219
5. O professor de Flash pediu para que seus alunos montassem um filme de 
dez segundos utilizando a taxa de 12 FPS. Assinale a opção que contemple 
quantos quadros são necessários para produzir um filme de dez segundos.
a) 50 quadros.
b) 200 quadros.
c) 96 quadros.
d) 120 quadros.
e) 190 quadros.
Questão 5
87/219
Gabarito
1. Resposta: C.
Ao dividir a quantidade de quadros no filme 
pela taxa de FPS, vamos obter em segundos 
a duração aproximada do filme criado.
2. Resposta: A. 
As alterações de FPS devem ser realizadas 
pelo painel de propriedades no cenário do 
filme que estamos desenvolvendo. Existe a 
opção FPS e basta digitar o novo valor.
3. Resposta: B.
O símbolo permite a reutilização dos dese-
nhos em Flash e seu uso do tipo adequado 
(gráfico, botão ou clipe de filme) fará a di-
ferença no tamanho do arquivo gerado e 
também na maneira de animar o símbolo.
4. Resposta:E.
Sempre com valores menores que 24 FPS 
(taxa padrão), é possível notar os quadros 
e então perceber melhor as falhas de movi-
mento.
5. Resposta: D.
Para calcular o comprimento de um filme, 
basta dividir a quantidade de quadros na li-
nha do tempo pelo FPS e teremos esse re-
sultado. Desse modo, não sabemos quantos 
quadros temos no filme (x), mas temos FPS 
e a duração, logo: 10s = x / 12. Então, temos 
x = 12 * 10 o que resulta em x = 120. Logo, 
precisamos de 120 quadros.
88/219
Unidade 4
Animações com interpolação
Objetivo
1. Mostrar como criar animações sim-
ples de forma rápida em comparação 
à técnica quadro a quadro.
Unidade 4 • Animações com interpolação89/219
Introdução
Até este momento você já compreende 
todo o funcionamento das animações qua-
dro a quadro e as propriedades que podem 
ser alteradas para que seu vídeo tenha mo-
vimentos melhores ou não. Agora, convém 
uma pergunta: toda animação só pode ge-
rar movimento com a mudança sutil de uma 
imagem quadro a quadro? A resposta é não! 
Existem recursos mais simples para realizar 
esse tipo de animação e este é o conteúdo 
deste módulo. Vamos falar um pouco sobre 
um conceito chamado de Interpolação no 
Flash CS6.
1. Animações com Interpolação
1.1 Bolinha “ping-pong”
Vamos desenhar uma bolinha que cairá e 
voltará ao ponto inicial como se “pingas-
se” no chão. Iniciaremos um novo filme Ac-
tionScript 3.0. Como foi feito nos módulos 
Link
O site da Khanacademy traz um executor de inter-
polação linear para fazer uma bolinha cair apenas 
definindo no eixo y a posição inicial e final durante 
os 24 quadros exibidos. Disponível em: <https://
pt.khanacademy.org/partner-content/pixar-
-latam/animation-latam/intro-to-animation-
-latam/p/animao-com-interpolao-linear>. 
Acesso em: 10 nov. 2016.
https://pt.khanacademy.org/partner-content/pixar-latam/animation-latam/intro-to-animation-latam/p/animao-com-interpolao-linear
https://pt.khanacademy.org/partner-content/pixar-latam/animation-latam/intro-to-animation-latam/p/animao-com-interpolao-linear
https://pt.khanacademy.org/partner-content/pixar-latam/animation-latam/intro-to-animation-latam/p/animao-com-interpolao-linear
https://pt.khanacademy.org/partner-content/pixar-latam/animation-latam/intro-to-animation-latam/p/animao-com-interpolao-linear
Unidade 4 • Animações com interpolação90/219
anteriores, utilizando a ferramenta oval (O), 
vamos desenhar a bolinha no alto do cená-
rio, conforme exibe a Figura 1.
Figura 1 | Bolinha no alto do cenário
Fonte: elaborado pelo autor.
Para deixar nossa animação com uma apa-
rência mais interessante, você pode inserir 
uma nova camada e desenhar um cenário 
para a “bolinha que pinga”. Lembre-se de 
sempre alterar os nomes das camadas para 
facilitar sua identificação posterior. Obser-
ve o resultado final do cenário na Figura 2.
Figura 2 | Cenário para a animação interpolada
Fonte: elaborado pelo autor.
Unidade 4 • Animações com interpolação91/219
1.2 Preparando a Animação para 
a Criação da Interpolação
Para fazer a interpolação, você deverá pri-
meiramente estender a camada cenário até 
o quadro 90, conforme mostra a Figura 3.
Link
Caso queira colocar imagens no fundo de sua ani-
mação, é importante entender que estas imagens 
podem precisar de tratamento prévio, uma das 
formas de modificar as imagens é utilizando os 
canais que são as matrizes de cores usadas para 
formar cada pixel. Exemplo: os canais de forma-
ção das cores no sistema RGB são Red (Verme-
lho), Green (Verde) e Blue (Azul). Para entender 
melhor o trabalho com bitmaps, vale a pena con-
ferir este link da Adobe. Disponível em: <http://
help.adobe.com/pt_BR/as3/dev/WS5b3cc-
c516d4fbf351e63e3d118a9b90204-7d66.
html>. Acesso em: 5 dez. 2016.
http://help.adobe.com/pt_BR/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d66.html
http://help.adobe.com/pt_BR/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d66.html
http://help.adobe.com/pt_BR/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d66.html
http://help.adobe.com/pt_BR/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d66.html
Unidade 4 • Animações com interpolação92/219
Figura 3 | Camada cenário com quadro-chave no quadro 90
Fonte: elaborado pelo autor.
Unidade 4 • Animações com interpolação93/219
Agora, você fará a interpolação em dois mo-
mentos distintos na camada bolinha:
• No quadro 45, você deve criar um 
quadro-chave e colocar a bolinha to-
cando o solo.
• No quadro 90, você deve criar um qua-
dro-chave com a bolinha na posição 
inicial.
O resultado deste processo pode ser visto 
na Figura 4.
Unidade 4 • Animações com interpolação94/219
Figura 4 | Bolinha tocando o solo (com erro de camada)
Fonte: elaborado pelo autor.
Unidade 4 • Animações com interpolação95/219
Neste momento você percebeu que a bo-
linha ficou atrás do solo que desenhamos 
e essa não era a intenção, ela deveria ficar 
sobre o solo. Para resolver este tipo de pro-
blema, que pode acontecer ao longo do de-
senvolvimento de suas animações, basta al-
terar a ordem das camadas na linha do tem-
po. Clique sobre a camada bolinha e arraste 
para cima até aparecer antes da camada ce-
nário na linha do tempo. Observe a Figura 5.
Figura 5 | Mover camada bolinha para cima, sobre a camada cenário
Fonte: elaborado pelo autor.
Deste modo conseguimos resolver o proble-
ma da bolinha oculta atrás do solo como o 
detalhe destacado na Figura 6.
Figura 6 | Bolinha posicionada corretamente
Fonte: elaborado pelo autor.
Unidade 4 • Animações com interpolação96/219
Link
Em nossas aulas utilizamos sempre desenhos 
como objetos, mas todos os movimentos e ações 
podem ser realizados com texto também. É sem-
pre importante ficar atento ao uso da ferramenta 
texto. Vale a pena olhar as instruções da Adobe 
sobre a ferramenta texto. Para mais informações, 
sugere-se um link. Disponível em: <https://hel-
px.adobe.com/br/animate/using/classic-
-text.html>. Acesso em: 5 dez. 2016.
1.3 Fazendo a interpolação clás-
sica
Após ter realizado todo o procedimento de 
preparo descrito no item anterior, você irá 
realizar a criação da interpolação. Basta cli-
car na linha do tempo com o botão direito 
do mouse, entre os quadros 1 e 45 (qualquer 
posição), e selecionar Criar interpolação 
clássica. Repita o processo entre os quadros 
46 e 90 para criar outra interpolação clássi-
ca, o resultado final visível na linha do tem-
po pode ser visto na Figura 7.
https://helpx.adobe.com/br/animate/using/classic-text.html
https://helpx.adobe.com/br/animate/using/classic-text.html
https://helpx.adobe.com/br/animate/using/classic-text.html
Unidade 4 • Animações com interpolação97/219
Figura 7 | Linha do tempo com aplicação das interpolações clássicas
Fonte: elaborado pelo autor.
O Flash CS6 exibirá setas entre os quadros que possuem interpolação e o resultado pode ser ob-
servado na execução do filme (CTRL + ENTER).
Para saber mais
• Interpolação clássica: com ela é possível realizar a criação de movimento entre as formas, mas não é 
possível realizar mudança de cor nem em sua forma geométrica. 
• Interpolação de formas: com ela é possível criar efeitos de morfismo que podem ser feitos usando 
transformações de instâncias, como rotação, redimensionamento ou distorção, além de aplicar con-
tornos, gradientes e preenchimentos, ou seja, com ela alteramos a forma física de um objeto. Permi-
te, por exemplo, fazer um retângulo se transformar em um círculo.
Unidade 4 • Animações com interpolação98/219
Salve seu arquivo FLA e vamos criar um 
novo documento para entender a interpo-
lação de forma.
1.4 Fazendo a Interpolação de 
Forma
Crie um novo arquivo no Flash do tipo Ac-
tionScript 3.0. (Menu Arquivo >> Novo)
1. Desenhe um retângulo no quadro 1 e 
insira um quadro-chave no quadro 90 
e desenhe um círculo. Observe na Fi-
gura 8 que foram utilizadas cores di-
ferentes.
Figura 8 | Figuras para a interpolação de forma
Fonte: elaborado pelo autor.
2. Na linha do tempo, basta clicar com o 
botão direito do mouse entreos qua-
dros 1 e 90 e clicar em Criar interpola-
ção de forma, observe Figura 9.
Unidade 4 • Animações com interpolação99/219
Figura 9 | Criando a interpolação de forma
Fonte: elaborado pelo autor.
Unidade 4 • Animações com interpolação100/219
3. Após realizado este procedimento, 
será possível verificar o surgimento de 
uma seta () na linha do tempo e na 
tela teremos uma forma intermediária 
entre o retângulo e o círculo desenha-
do. Observe a Figura 10.
Figura 10 | Forma intermediária entre o retângulo e o círculo
Fonte: elaborado pelo autor.
Neste momento, ao executar o filme, vere-
mos o retângulo se tornar um círculo grada-
tivamente e as cores vão mudar gradativa-
mente de uma figura para a outra também.
Para saber mais
As interpolações de forma não precisam ser rea-
lizadas apenas de um quadro-chave para outro, 
elas podem combinar diversos quadros-chave 
durante o seu desenvolvimento e, desta forma, 
teremos formas sendo modificadas diversas ve-
zes durante a execução de um filme. Caso queira 
utilizar um texto como forma para a interpola-
ção, basta desmembrá-lo duas vezes utilizando a 
combinação de teclas CTRL+B (duas vezes).
Unidade 4 • Animações com interpolação101/219
2 Utilizando Camadas Guias
2.1 Entendendo a camada guia
Em algumas animações é preciso fazer com 
que o objeto percorra um caminho deter-
minado. Isto é possível em Flash através da 
utilização de camada guia. Você irá realizar 
uma animação simples, utilizando a cama-
da guia. Inicie um novo arquivo em Flash do 
tipo ActionScript 3.0.
1. Vamos desenhar um círculo e fazer 
com que ele percorra um caminho 
predefinido.
2. Após desenhar o círculo, renomeie a 
camada para animação.
3. Você irá converter o objeto desenhado 
em Símbolo (F8).
Figura 11 | Convertendo o objeto em símbolo
Fonte: elaborado pelo autor.
4. Crie um novo quadro-chave no mo-
mento 80 da linha do tempo.
5. Clique com o botão direito do mouse 
sobre a camada animação e selecione 
Unidade 4 • Animações com interpolação102/219
a opção adicionar guia de movimento 
clássico, conforme mostra a Figura 12.
Figura 12 | Adicionar guia de movimento clássico
Fonte: elaborado pelo autor.
6. Observe o comportamento da linha 
do tempo.
7. Na camada Animação, clique com o 
botão direito entre os quadros 1 e 80 e 
clique em Criar interpolação clássica.
8. Na camada Guia, usando o lápis dese-
nhe um caminho qualquer. Conforme 
a Figura 13.
Figura 13 | Desenho do caminho com a ferramenta lápis
Fonte: elaborado pelo autor.
Unidade 4 • Animações com interpolação103/219
9. No quadro 1, posicione o gráfico so-
bre o início da linha e no quadro 80 
posicione o gráfico sobre o término 
da linha.
10. Execute o filme e verifique o com-
portamento da interpolação (CTRL + 
ENTER).
Para saber mais
É possível criar o caminho utilizando qualquer 
ferramenta de desenho e não necessariamente o 
lápis, tente criar novos projetos com a interpola-
ção clássica e desenhar caminhos diferentes. Se 
possível, utilize camadas guias em mais de uma 
camada para criar novos objetos no mesmo filme, 
cada um com um comportamento diferente.
Unidade 4 • Animações com interpolação104/219
Glossário
FLA: extensão utilizada pelo Flash para os arquivos que contêm as camadas e os símbolos e po-
dem ser alterados, diferente do arquivo SWF que é apenas para a publicação.
Interpolação: é a conexão entre quadros-chave, fazendo com que haja uma ação entre eles.
Questão
reflexão
?
para
105/219
Vamos praticar! Monte uma interpolação de forma com 
três etapas, convertendo um retângulo em círculo e o 
círculo novamente em retângulo. Não se esqueça de 
utilizar cores diferentes em cada objeto para enfatizar 
as alterações.
106/219
Considerações Finais
• As interpolações são muito utilizadas em animações, pois elas evitam o 
desenvolvimento quadro a quadro que demora muito tempo para ser re-
alizado.
• Vale lembrar que elas apenas devem ser utilizadas quando tivermos for-
mas simples e textos. Para objetos complexos, como imagens importadas 
de outros aplicativos, a melhor maneira de animá-las ainda é com a ani-
mação quadro a quadro.
• O uso de textos é sempre importante nas animações, mas sempre deve-
mos nos atentar ao desmembramento do mesmo para a realização corre-
ta. Utilizando o atalho CTRL+B duas vezes, conseguimos converter o texto 
em forma.
Unidade 4 • Animações com interpolação107/219
Referências
ADOBE. Trabalho com símbolos no Animate CC. s. d. Disponível em: <https://helpx.adobe.com/
br/animate/using/symbols.html>. Acesso em: 10 nov. 2016.
______. Utilização do Adobe Flash Professional CS5 e CS 5.5.  2011. Disponível em: <http://
help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf>. Acesso em: 10 nov. 2016.
SIMÃO, Daniel Hayashida. Flash CS6: introdução ao mundo da animação. São Paulo: Viena, 2014. 
352 p.
https://helpx.adobe.com/br/animate/using/symbols.html
https://helpx.adobe.com/br/animate/using/symbols.html
http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf
http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf
108/219
Assista a suas aulas
Aula 4 - Tema: Uso de interpolação. Bloco I
Disponível em: <//fast.player.liquidplatform.com/pApiv2/
embed/dbd3957c747affd3be431606233e0f1d/c0b-
6f6b8edb56fb47e3a2620463a45eb>.
Aula 4 - Tema: Uso de interpolação. Bloco II
Disponível em: <//fast.player.liquidplatform.com/pApiv2/
embed/dbd3957c747affd3be431606233e0f1d/968817d-
1f227bdfe83982231213acc04>.
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/c0b6f6b8edb56fb47e3a2620463a45eb
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/c0b6f6b8edb56fb47e3a2620463a45eb
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/c0b6f6b8edb56fb47e3a2620463a45eb
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/968817d1f227bdfe83982231213acc04
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/968817d1f227bdfe83982231213acc04
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/968817d1f227bdfe83982231213acc04
109/219
1. Assinale a opção que indica como é chamada a característica que permi-
te que existam movimentos entre as formas em um filme sem ser quadro a 
quadro.
a) Linha do tempo.
b) Animação linear.
c) Interpolação.
d) Transição de cenas.
e) Cenário direto.
Questão 1
110/219
2. Assinale a alternativa que representa o que devemos utilizar quando pre-
cisamos realizar uma alteração de forma entre dois objetos em um filme.
a) Interpolação de forma.
b) Interpolação clássica.
c) Menu modificar e a opção Testar filme.
d) Interpolação de movimento.
e) Camada guia.
Questão 2
111/219
3. Assinale a opção que indica o nome da camada utilizada para a criação 
de um “caminho” de objeto na interpolação clássica.
a) Camada mágica.
b) Guia.
c) Grupo.
d) Orientador de interpolação.
e) Acelerômetro.
Questão 3
112/219
4. Assinale a alternativa que indica a solução quando os objetos de cama-
das diferentes ficam em ordens diferentes da que esperávamos.
a) Redesenhar todo filme.
b) Criar uma nova cena.
c) Alterar as propriedades da interpolação.
d) Deixar a quantidade de quadros pares.
e) Reordenar as camadas.
Questão 4
113/219
5. Assinale a opção que compreenda quais os três tipos de símbolos que 
podem ser criados em Flash ao pressionar a tecla F8.
a) Livro, Filme e Arquivo.
b) Quadro, Linha do tempo e Interpolação.
c) Forma, Clássico e Movimento.
d) Gráfico, Botão e Clipe de filme.
e) Quadro-chave, Mestre, Testar Filme.
Questão 5
114/219
Gabarito
1. Resposta: C.
Interpolação permite criar uma ação entre 
quadros-chave, por exemplo, movimento 
ou forma.
2. Resposta: A.
A interpolação de forma é capaz de conver-
ter um objeto em outro gradativamente e 
até mesmo modificar sua cor, caso cada ob-
jeto inicial tenha sido criado com cores di-
ferentes.
3. Resposta: B.
Guiaé uma camada invisível no filme final 
que serve apenas como orientação para o 
movimento de um símbolo.
4. Resposta: E.
As camadas podem ser reordenadas apenas 
clicando e arrastando seu nome na linha do 
tempo e funcionam como folhas de papel, 
basta escolher a que ficará mais acima ou 
mais abaixo.
5. Resposta: D.
Os tipos são Gráfico, Botão e Clipe e cada 
um deles pode ser utilizado de uma forma 
diferente na animação. O Gráfico é o mais 
leve e o indicado para interpolações sim-
ples, o Botão possui comportamentos dife-
rentes de acordo com cada interação reali-
zada, o Clipe de filme possui uma linha do 
tempo independente que pode ser utilizada 
para aninhar efeitos entre a linha de tempo 
dele e a principal.
115/219
Unidade 5
ActionScript
Objetivo
1. Introduzir a linguagem de programa-
ção ActionScript.
Unidade 5 • ActionScript116/219
Introdução
Neste quinto módulo de animações e fer-
ramentas virtuais, você irá aprender como 
utilizar o ActionScript – pode ser abreviado 
como AS no decorrer deste material –, a lin-
guagem de programação que opera junto 
com o aplicativo Flash da Adobe. Com essa 
linguagem é possível criar filmes interativos, 
desse modo permite que o usuário interaja 
com objetos na tela. O usuário poderá clicar, 
arrastar, entre outras opções com qualquer 
objeto. É importante que você esteja ciente 
de que uma linguagem de programação ne-
cessita de lógica e estruturação de coman-
dos para funcionar adequadamente.
Você está na metade do nosso curso, não se 
esqueça de que todos os exercícios propos-
tos devem ser praticados constantemente. 
É importante que você conheça bem como 
as animações são feitas e a partir de agora 
entenda que cada objeto pode ser progra-
mado e isso trará muitas novidades para o 
usuário do seu website.
1. Conhecendo o Ambiente de 
Programação ActionScript
1.1 Utilizando nossa animação 
da “bolinha ping-pong”
Você se lembra da nossa animação da bo-
linha ping-pong? Nós vamos utilizá-la para 
a introdução sobre ActionScript. Nesse mo-
mento, você conhecerá o ambiente de pro-
gramação dentro do Flash. É importante 
dedicar muita atenção, pois este ambiente 
Unidade 5 • ActionScript117/219
será seu companheiro por mais alguns mó-
dulos da nossa jornada e também durante o 
desenvolvimento de seus futuros trabalhos.
Link
Existem diferenças entre a linguagem ActionS-
cript 1.0 e 2.0 para a ActionScript 3.0. Nas duas pri-
meiras versões ela era estruturada como C, agora, 
na versão 3.0 trabalha com classes como em Java. 
Entender algumas dessas mudanças demanda 
pesquisa. O blog iwannabeadesigner traz links 
interessantes e até um PDF de referência para as 
modificações. Disponível em: <https://iwanna-
beadesigner.wordpress.com/2008/04/15/
migrar-do-as2-para-o-as3-parte-i/>. Acesso 
em: 10 nov. 2016.
Dentro do Flash, o ambiente de programação 
está embutido em um dos painéis do apli-
cativo. Este painel é conhecido como Ações 
e para acessá-lo você pode utilizar o menu 
Janela >> Ações, conforme mostra a Figura 
1, ou mesmo pressionar a tecla F9.
Em um primeiro momento o painel é flutu-
ante no ambiente de trabalho do aplicati-
vo, porém, posteriormente à sua abertura é 
possível fixá-lo em um local de fácil acesso.
https://iwannabeadesigner.wordpress.com/2008/04/15/migrar-do-as2-para-o-as3-parte-i/
https://iwannabeadesigner.wordpress.com/2008/04/15/migrar-do-as2-para-o-as3-parte-i/
https://iwannabeadesigner.wordpress.com/2008/04/15/migrar-do-as2-para-o-as3-parte-i/
Unidade 5 • ActionScript118/219
Figura 1 | Menu para abrir o painel de Ações
Fonte: elaborado pelo autor.
1.2 O painel Ações
Após abrir o painel Ações, conforme descri-
to no item anterior, é importante conhecer 
seu funcionamento básico. Observe na Fi-
gura 2 este painel.
Unidade 5 • ActionScript119/219
Figura 2 | Painel de Ações
Fonte: elaborado pelo autor.
Vamos realizar um teste bem simples que deve parar a reprodução cíclica do nosso filme. Obser-
ve pela Figura 2 que estou na camada da bolinha no quadro 90 e neste momento vou digitar o 
comando:
Unidade 5 • ActionScript120/219
Stop();
Feito isso, execute o filme e verifique o que acontece. Após a execução do movimento de queda e 
retorno, o filme deve parar sua reprodução.
Essa é uma das ações mais simples que podem ser executadas na linha do tempo com o auxílio do 
ActionScript. Note que após o Stop, colocamos um parênteses aberto e fechado “()”, isso indica que 
o comando é na verdade uma função. Se digitarmos Stop sem os parênteses, nada será realizado.
Como citado na introdução, os comandos da linguagem AS são todos em inglês, caso tente usar 
em português, por exemplo, “ parar(); ” o compilador exibirá uma mensagem de erro que pode 
ser observada em Erros do Compilador ao lado da linha do tempo conforme mostra a Figura 3.
Figura 3 | Erros do compilador na função inexistente parar();
Fonte: elaborado pelo autor.
Unidade 5 • ActionScript121/219
2 Programando Objetos com Ac-
tionScript 2.0
2.1 Utilizando o arrastar e soltar
Em algumas animações podemos fazer com 
que o usuário arraste um objeto pela tela. Esse 
processo é bem simples usando o AS 2.0.
Para saber mais
Atente-se para as diferenças entre ActionScript 
1.0, 2.0 e 3.0:
• ActionScript 1.0 e 2.0: permite codificar dire-
tamente o objeto, sem dificuldades.
• ActionScript 3.0: é fundamental conhecer a 
estrutura de classes para que a programação 
de funções seja possível.
Você irá realizar uma animação simples 
para mover um retângulo pela tela. Inicie 
um novo arquivo em Flash do tipo ActionS-
cript 2.0.
1. Desenhe um retângulo com o auxílio 
da ferramenta retângulo.
2. Clique sobre ele com a ferramenta de 
seleção e abra o painel de ações.
Neste momento você deverá ver uma men-
sagem mostrando que a seleção atual não 
pode ter ações aplicadas, conforme mostra 
a Figura 4.
Unidade 5 • ActionScript122/219
Figura 4 | Painel Ações com mensagem de erro
 
 Fonte: elaborado pelo autor.
Unidade 5 • ActionScript123/219
3. Para evitar o problema apresentado 
na Figura 4, precisamos converter o 
nosso retângulo em símbolo. Pressio-
ne a tecla F8. Dê um nome para o sím-
bolo.
4. Novamente com o símbolo seleciona-
do, clique no painel ações.
5. Vamos digitar o código de arrastar e 
soltar, conforme o bloco de progra-
mação ActionScript 2.0 exibido na se-
quência:
on (press) {
 startDrag(“”);
}
on (release) {
 stopDrag();
 }
Com a utilização destes simples comandos, 
é possível mover o símbolo criado pela tela 
ao clicar com o mouse. Vamos detalhar es-
ses comandos para facilitar o entendimen-
to. Observe o primeiro bloco:
on (press) {
 startDrag(“”);
}
A função on (Evento)  aguarda um evento 
do mouse proveniente do usuário. Ela pode 
ter os seguintes parâmetros como princi-
pais:
Unidade 5 • ActionScript124/219
Quadro 1 | Parâmetros da função on.
Press Pressionar
Release Soltar
ReleaseOutside Soltar fora
KeyPress Pressionamento de tecla
Rollover Rolar sobre
Rollout Rolar para fora
dragOver Arrastar sobre
dragOut Arrastar para fora
Fonte: elaborado pelo autor.
Desse modo, qualquer ação que quisermos 
analisar do usuário basta escolher o melhor 
parâmetro.
O comando startDrag(“”);é o responsável 
por mover o objeto ativo pela tela quando 
o usuário executa a função descrita no co-
mando. Neste caso, utilizamos o comando 
on (press) para verificar o movimento por ar-
rasto assim que o usuário pressionar o bo-
tão do mouse sobre o objeto.
A segunda parte do código acompanha a 
mesma ideia, vamos observar:
on (release) {
 stopDrag();
}
A função on (release) verifica se o botão 
do mouse foi solto, caso esta ação seja ver-
dadeira ela interrompe o arrasto do objeto 
através da execução do comando stop-
Drag();.
Unidade 5 • ActionScript125/219
Para saber mais
Alguns comandos em ActionScript 3.0 são bem diferentes dos comandos em ActionScript 2.0. É sempre 
importante ficar atento às mudanças para não se confundir na hora de programar. 
Antes do AS 3.0, existiam

Outros materiais