Dados do Aluno

Nome: ________________________________________________
Número da matrícula: _____________________________________
Endereço: _____________________________________________
Bairro: ________________________________________________
Cidade: _______________________________________________
Telefone:_______________________________________________
Anotações Gerais: ________________________________________
______________________________________________________
______________________________________________________

Animate CC
 Apresentação do Animate CC
Com o Flash caindo em desuso, a Adobe precisou “reinventar”
o seu antigo programa, tornando-o compatível com o HTML5, assim
nasceu o Adobe® Animate®, que veio para substituir o antigo Ado-
be® Flash®.
O software Adobe® Animate® CC é um ambiente de criação
multimídia, permitindo a criação de experiências interativas atrativas.
Como o Flash ainda é utilizado por alguns sites, seja em banners, em
charges e outros conteúdos, o Animate® permite a criação de conte-
údo em ambos os padrões, tanto para HTML5 como para Flash.
Neste curso, você terá uma base do grande “poder de fogo” do
Animate, aprendendo a usar suas ferramentas, criar animações qua-
dro a quadro, aplicar movimento às animações, usar o recurso de
interpolação, ajustar o tempo da animação com a taxa de quadros,
trabalhar com textos estáticos e dinâmicos, criar links em textos,
usar ActionScript, trabalhar com camadas, criar botões e muito mais.

Marcas Registradas:
Todas as marcas e nomes de produtos apresentados nesta apostila
são de responsabilidade de seus respectivos proprietários, não estan-
do a editora associada a nenhum fornecedor ou produto apresentado
nesta apostila.

Método CGD® - Todos os direitos reservados.

Protegidos pela Lei 5988 de 14/12/1973.
Nenhuma parte desta apostila poderá ser copiada sem prévia autorização.
O Método CGD é um produto da Editora CGD.
 Controle de Presença

Data Lição e Passo Anotações

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

 Índice
LIÇÃO 1 - DESENHOS .............................................................. 7
● AJUSTANDO O LAYOUT ............................................................ 7
● CONHECENDO O PALCO ........................................................... 7
● CONHECENDO O PAINEL DE FERRAMENTAS .................................... 8
● TECLAS DE ATALHO ..............................................................10
● PREENCHIMENTO E TRAÇADO ...................................................11
● APAGANDO OBJETOS .............................................................12
● FERRAMENTA BALDE DE TINTA ..................................................12
● MOVENDO OBJETOS ..............................................................13
● FERRAMENTA TRANSFORMAÇÃO LIVRE .........................................13
● DUPLICANDO OBJETOS ...........................................................14
LIÇÃO 2 - ANIMAÇÃO - PARTE 1............................................ 15
● LINHA DO TEMPO .................................................................15
● QUADRO-CHAVE ...................................................................16
● INSERINDO QUADROS ............................................................16
● EXCLUINDO QUADROS ............................................................16
● ANIMAÇÃO QUADRO A QUADRO ................................................17
● AGRUPANDO FORMAS .............................................................17
● EDITANDO OBJETOS AGRUPADOS ...............................................18
● ALINHANDO OBJETOS NO PALCO ...............................................18
LIÇÃO 3 - APRIMORANDO DESENHOS ................................... 19
● APRIMORANDO TRAÇADOS .......................................................19
● APRIMORANDO PREENCHIMENTO ................................................20
● FERRAMENTA TRANSFORMAÇÃO DE GRADIENTE ..............................21
● FERRAMENTAS ZOOM, BORRACHA E MÃO .....................................24
● FERRAMENTA CONTA-GOTAS ....................................................26
● POSIÇÃO E TAMANHO DAS FORMAS ............................................27
● MANIPULANDO FORMAS ..........................................................28
● UNINDO OBJETOS .................................................................29
LIÇÃO 4 - TEXTOS ................................................................. 30
● TEXTOS ESTÁTICOS SIMPLES ....................................................30
● TEXTOS ESTÁTICOS DE PARÁGRAFOS ..........................................32
● ANIMAÇÃO COM TEXTO ..........................................................33
● EFEITOS DE FILTROS .............................................................36
● CRIANDO LINKS A PARTIR DE TEXTOS ........................................39
● CONVERTENDO TEXTO EM OBJETO .............................................39
LIÇÃO 5 - ANIMAÇÃO - PARTE 2............................................ 42
● INTERPOLAÇÃO DE FORMA .......................................................42
● PARANDO A ANIMAÇÃO ..........................................................44
● INTERPOLAÇÃO COM TEXTOS ....................................................45
 ● INTERPOLAÇÃO CLÁSSICA ....................................................... 46
● PROPRIEDADES DA INTERPOLAÇÃO CLÁSSICA ................................ 48
● CONVERTENDO FORMAS EM SÍMBOLOS ....................................... 50
LIÇÃO 6 - CAMADAS .............................................................. 51
● RENOMEANDO CAMADAS ........................................................ 51
● INSERINDO UMA NOVA CAMADA ............................................... 51
● ORGANIZANDO CAMADAS ....................................................... 51
● OCULTANDO CAMADAS .......................................................... 52
● BLOQUEANDO CAMADAS ......................................................... 53
● EXCLUINDO CAMADAS ........................................................... 54
● ORDENANDO CAMADAS .......................................................... 54
● MOSTRAR CAMADAS COMO CONTORNO ....................................... 55
● CAMADAS DE MÁSCARA ......................................................... 55
LIÇÃO 7 - CLIPE DE FILME (MOVIE CLIP) .............................. 60
● CRIANDO CLIPES DE FILME ..................................................... 60
● INSERINDO CLIPE DE FILME DA BIBLIOTECA ................................. 61
● EDITANDO CLIPES DE FILME .................................................... 61
● CRIANDO ANIMAÇÕES COM CLIPES DE FILME ................................ 63
LIÇÃO 8 - EXPLORANDO ACTIONSCRIPT ............................... 66
● CRIANDO BOTÕES ................................................................ 66
● COMPORTAMENTO DOS BOTÕES ................................................ 68
● LINKS PARA PÁGINAS WEB ..................................................... 70
● EXPORTANDO UM FILME PARA USO FORA DO FLASH........................ 72
● TEXTOS DINÂMICOS ............................................................. 73
● INCORPORANDO FONTES ........................................................ 76
LIÇÃO 9 - INTERPOLAÇÃO DE MOVIMENTO ........................... 81
● FRAMES POR SEGUNDO (FPS) ................................................. 81
● ENTENDENDO VETOR ............................................................ 82
● UTILIZANDO SÍMBOLO DE OUTRO ARQUIVO.................................. 82
● FERRAMENTA TINTEIRO .......................................................... 83
● USANDO INTERPOLAÇÃO DE MOVIMENTO ..................................... 84
● PREDEFINIÇÃO DE MOVIMENTO ................................................ 86
● CRIANDO CLIPES DE FILME DENTRO DE OUTRO CLIPE DE FILME ......... 86
LIÇÃO 10 – PROJETOS ........................................................... 88
Lição 1 - Desenhos
● Ajustando O Layout

• Para abrir o Animate CC, clique no botão Iniciar

• Digite: Animate
• Clique no ícone do programa

● Para criar um arquivo: No grupo Criar novo, clique na opção

desejada:
● Para escolher um layout:
● 1. Clique no menu Janela, posicione em Espaço de trabalho e
clique num layout.
● Ou clique no botão à esquerda da caixa de pesquisa, no canto
superior direito, e escolha um layout.

● O Espaço (área) de trabalho padrão do Flash é o Essenciais.

● A seleção de um layout muda a disposição dos painéis e objetos
na tela.

● Conhecendo O Palco
● O palco é a área branca onde a animação é feita e possui, por
padrão, um tamanho de 550 x 400 pixels.

Animate CC 7
● Para alterar a cor do palco, clique no botão Palco (Cor do plano
de fundo), no painel Propriedades, e escolha uma cor ou um
tom.
● Ex.: Para alterar a cor do palco para um tom de laranja:

• Clique em Palco e clique num tom laranja

• Para alterar o tamanho do palco, clique no botão Config.

Avançadas...
● Altere as dimensões (largura e/ou altura) e clique em OK.
● A propriedade Tamanho será ajustada de acordo com a
necessidade do projeto, como criar um botão numa página de
internet.
● Para fechar um arquivo, clique no menu Arquivo e no submenu
Fechar ou tecle Ctrl+W.

● Conhecendo O Painel De Ferramentas

● Por padrão, o painel de Ferramentas fica à direita da tela.

● Clique numa ferramenta e altere suas propriedades.

• Ex.: Para desenhar um retângulo, clique na ferramenta
Retângulo
8 Animate CC
● Altere suas propriedades, como cor de preenchimento e traçado.

● Para alterar a cor do traçado (contorno), clique no botão Cor do

traçado e escolha uma cor.

● Para alterar a cor do preenchimento, clique no botão Cor do

preenchimento e escolha uma cor.

● Para alterar a altura do traçado (espessura do contorno), digite

um valor na caixa ou use o deslizante:

• Defina o estilo do traçado

• Para selecionar um objeto no palco, ative a ferramenta Seleção

e clique no objeto.
● Para desmarcar a seleção, clique no palco.
● O painel de propriedades mostra as propriedades do palco:

● Quando clicamos em um objeto, o painel de propriedades passa a

mostrar as propriedades do objeto selecionado.

Animate CC 9
● Algumas ferramentas, como a Retângulo, exibem uma pequena
seta no canto inferior direito do ícone, identificando um grupo de
ferramentas.

● Para usar uma ferramenta do grupo, clique sobre a ferramenta e

clique novamente sobre ela para exibir o grupo de ferramentas.
Clique sobre uma ferramenta do grupo.

• Ex.: Clique na ferramenta Retângulo

● Clique novamente nela e clique na ferramenta que deseja usar.

● Teclas De Atalho
● Use teclas de atalho para agilizar a seleção de ferramentas.
● A tecla de atalho é exibida à direita do nome da ferramenta.
● Ex.: Posicione o cursor no ícone da ferramenta Retângulo para
ver que sua tecla de atalho é a letra R.
● Tecle R para ativar a ferramenta Retângulo.
● Quando uma mesma tecla de atalho é usada para mais de uma
ferramenta num grupo, basta teclar a letra até selecionar a
ferramenta.

● Ex.: Para selecionar a ferramenta Retângulo, tecle R.

● Para selecionar a ferramenta primitiva de retângulo, tecle R
novamente.

10 Animate CC
● Preenchimento E Traçado
● O preenchimento e o traçado são tratados de forma
independente.
● Ex.: Desenhar um retângulo com contorno vermelho e fundo
amarelo.
● Com a ferramenta Retângulo selecionada, clique no botão Cor
do traçado e escolha a cor Vermelho.
● Clique no botão Cor do preenchimento e escolha a cor
Amarelo.

● Altere a altura do traçado para 3 pixels.

• Deixe o estilo sólido

● Para deixar os ajustes como padrão para outros objetos
desenhados, clique no botão Redefinir.
● Desenhe o retângulo no palco.
● Para mover o fundo do retângulo, clique no fundo do retângulo e
mova a seleção, separando-a do contorno.

● Para desfazer uma ação, tecle Ctrl+Z.

● Para mover o objeto (retângulo), clique duplo sobre ele e arraste-
o para outra posição no palco.
● O clique duplo seleciona o preenchimento e o traçado.

Animate CC 11
● Para selecionar uma parte do traçado, clique uma vez sobre ele.
● Para selecionar todo o traçado, clique duplo sobre ele.

● Apagando Objetos

• Ative a ferramenta Seleção

● Para apagar o traçado de um objeto, clique duplo sobre o traçado
e tecle Delete.

● Para apagar o preenchimento de um objeto, clique sobre o

preenchimento e tecle Delete.

• Ex.:
● Para apagar todo o objeto, clique duplo no preenchimento e tecle
Delete.

• Ex.:

● Ferramenta Balde De Tinta

• Ative a ferramenta Balde de tinta

● Escolha uma cor e clique no preenchimento do objeto.
● Ex.: Altere a cor do preenchimento para Vermelho.

12 Animate CC
● Clique no objeto para preenchê-lo com a cor selecionada.

● Movendo Objetos

• Ative a ferramenta Seleção

● Clique duplo no objeto para selecionar.
● Arraste o objeto selecionado para um local do palco.
● ou use as teclas de direção para mover o objeto.

• Teclas de direção:
● Para mover com maior espaçamento, use as teclas de direção e a
tecla Shift.

● Ferramenta Transformação Livre

• Clique duplo no objeto para selecionar

• Ative a ferramenta transformação livre

● O objeto ficará com alças de dimensionamento.

Animate CC 13
● Clique numa alça e arraste para dimensionar o objeto.
● Para inclinar o objeto, posicione o cursor numa alça até que ele
fique com a forma abaixo e arraste para a direção desejada.

● Para desmarcar, selecione a ferramenta Seleção e clique no

palco.

● Duplicando Objetos
● Selecione o objeto com um clique duplo e tecle Ctrl+D para
duplicar.

14 Animate CC
Lição 2 - Animação - Parte 1
● Linha Do Tempo
● Por padrão, a linha do tempo é exibida na parte de baixo da tela.

● A linha do tempo mostra onde a animação ocorre em um filme.

● Por padrão, os quadros são numerados de 5 em 5.

● Para repetir o conteúdo de um quadro, basta teclar F5 até atingir

o número de quadros que se quer repetir.
● Ex.: Para repetir o conteúdo do quadro 1 até o quadro 6, clique
no quadro 1 e tecle 5 vezes F5.

● Ou clique no menu Inserir, posicione em Linha do tempo e

clique em Quadro.
● Para visualizar como está a animação, clique no indicador de
reprodução e arraste para outro quadro.

• Ex.: Clique no indicador 1 e arraste até o quadro 2.

● Ou tecle . (ponto) para avançar um quadro e , (vírgula) para

retroceder um quadro. Se preferir, use o menu Controlar e

Animate CC 15
 escolha as opções Avançar um quadro e Retroceder um
quadro.
● Para percorrer uma vez toda a linha do tempo automaticamente,
tecle Enter ou clique no menu Controlar, submenu Reproduzir.
● Para reproduzir o filme ou animação no formato Flash (sfw),
tecle Ctrl +Enter ou clique no menu Controlar, posicione no
submenu Testar filme e clique em Testar.
● Após visualizar, feche a janela de visualização.
● Nessa opção de visualização o filme acaba e inicia
automaticamente.

● Quadro-chave
● Quadros-chave são os que têm bolinhas pretas.

• Ex.: Os quadros 1 e 16 são quadros-chave

● Sempre que quisermos inserir um novo conteúdo, temos de criar

um quadro-chave.
● Para criar um quadro-chave, tecle F6 ou clique no menu Inserir,
posicione em Linha do tempo e clique em Quadro-chave.
● Para excluir um quadro-chave, tecle Shift+F6 ou clique no menu
Modificar, posicione em Linha do tempo e clique em Limpar
quadro-chave.

● Inserindo Quadros
● Clique num quadro e tecle F5 para inserir ou clique no menu
Inserir, posicione em Linha do tempo e clique em Quadro.

● Excluindo Quadros
● Clique no quadro a ser excluído.
● Clique no quadro com o botão direito e clique na opção Remover
quadros ou tecle Shift+F5.

16 Animate CC
● Ou clique no menu Editar, posicione em Linha do tempo e
clique em Remover quadros.
● Para excluir vários quadros de uma vez, selecione os quadros
com o mouse e a tecla Shift, clique com o botão direito sobre a
seleção e clique em Remover quadros ou tecle Shift+F5.

● Animação Quadro A Quadro

● Pode-se ter um novo conteúdo a cada quadro ou repeti-lo por
vários quadros. Como visto, para cada novo conteúdo deve-se ter
um quadro-chave, teclando-se F6. Quanto maior o número de
quadros-chave, maior a percepção de movimento da
animação/filme.
● Para salvar um filme, clique no menu Arquivo, submenu Salvar.
Acesse o local de gravação, digite um nome e clique no botão
Salvar.
● Para fechar um arquivo, clique no menu Arquivo, submenu
Fechar.
● Para desfazer uma ação, tecle Ctrl+Z.

● Agrupando Formas
● O preenchimento e o traçado são tratados de forma
independente.
● Para agrupá-los, tecle Ctrl+G ou clique no menu Modificar,
submenu Agrupar.
● Para desagrupar, tecle Ctrl+Shift+G ou clique no menu
Modificar, submenu Desagrupar.
● O painel de propriedades mostra a informação Agrupar, quando
há objetos agrupados.

● Quando um objeto não é agrupado ele fica sempre atrás de outro

objeto que está agrupado.
●

Animate CC 17
● Editando Objetos Agrupados
● Para editar um objeto agrupado, clique duplo sobre ele para
entrar no modo de Agrupamento.
● Após a edição das propriedades do objeto, clique na seta para
sair do modo de Agrupamento.

● Alinhando Objetos No Palco

● Selecione o(s) objeto(s).
● Clique no menu Janela, submenu Alinhar ou tecle Ctrl+K.

• Deixe marcada a opção

• Escolha as opções de alinhamento

● Ex.: Para alinhar verticalmente, clique no botão Alinhar centro
vertical.

● Para fechar o painel Alinhar, tecle Ctrl+K.

18 Animate CC
Lição 3 - Aprimorando Desenhos
● Aprimorando Traçados
● O clique simples seleciona individualmente o traçado, enquanto o
clique duplo seleciona todo o traçado.
● Para alterar o estilo do traçado (contorno), clique no botão Estilo
e escolha entre os estilos Sólido, Extrafina, Tracejada,
Pontilhada, Irregular, Pontilhista ou Hachurada.
● Na caixa de texto Altura do traçado, digite um valor para
engrossar ou afinar a borda do objeto.

• Ex.:

• Utilizando o controle deslizante, clique e arraste até atingir o

valor 10 (aproximadamente):

• Ex.: Aumentou a altura do traçado:

● Exemplos de estilos de traçados:

Animate CC 19
● Aprimorando Preenchimento
● Clique na cor de preenchimento.

● Escolha uma cor de gradiente.

• Ex.: Escolha a cor gradiente vermelho e preto

● Tecle Esc para visualizar.

• Um círculo com esse preenchimento fica assim:

● Para alterar o tipo de gradiente, abra o painel Cor, usando o
menu Janela, submenu Cor ou tecle Alt+Shift+F9.

● Pode-se escolher os tipos Cor sólida, Gradiente linear,

Gradiente radial e Preenchimento de bitmap.
● Para escolher o tipo Gradiente linear, clique no botão Tipo de
cor e escolha Gradiente linear.

20 Animate CC
• Um círculo com o tipo Gradiente linear fica assim:

● Para alterar as cores de gradiente, clique num marcador de cor e

escolha um tom.
● Ex.: alterar a cor preto por um tom de laranja, clique duplo no
marcador e clique no tom desejado.

• Fica assim:

● Ferramenta Transformação De Gradiente

• Clique na ferramenta transformação livre

● Clique novamente na ferramenta transformação livre e clique
na ferramenta transformação de gradiente.

• Ou tecle F para ativar a ferramenta

● Num círculo, aparecem controles sobre o preenchimento.

Animate CC 21
● Para deslocar o centro do efeito preenchimento, clique no centro
e arraste o controle.
● Ex.: Deslocar o centro para cima e para a esquerda:

• Para pintar objetos, use a ferramenta balde de tinta

● Clique no botão Cor de preenchimento e clique na cor
desejada.
● Ex.: Pintar pétalas de uma flor de amarelo.

• Clique na Cor de preenchimento

• Clique na cor amarelo

22 Animate CC
• Clique nas pétalas para preencher
● Abra o painel Cor e altere o tipo do preenchimento para
Gradiente linear.

• Altere as cores do linear para branco e verde:

• Pinte a folha:

• Para preencher com arco-íris, selecione a cor

Animate CC 23
• Ex.: Pinte a asa da borboleta:

● Ferramentas Zoom, Borracha E Mão

● Para aumentar ou diminuir o zoom, use a caixa de zoom.

● Ex.: Para aumentar o zoom para 200%, digite "200" na caixa de

zoom e tecle Enter.

• Ou clique no botão e escolha

● Para facilitar a movimentação no palco quando se está com um
zoom elevado, clique na ferramenta mão ou tecle H, clique no
palco e arraste até o ponto desejado.

• Para ampliar um trecho específico, clique na ferramenta zoom

ou tecle Z.
● Abra uma caixa de seleção sobre o trecho para ampliar.
● Ex.: Abra uma janela de seleção na cabeça da borboleta:

24 Animate CC
● Ampliou a área selecionada:

• Volte o zoom para 100%

● Abra uma janela de seleção em cima das duas folhas:

● Para apagar trechos de desenho ou objetos, clique na ferramenta

borracha ou tecle E e passe o cursor sobre o trecho que se quer
apagar.

Animate CC 25
● Clique e arraste sobre a folha direita da flor, até apagá-la,
deixando assim:

● Só é possível apagar partes de objetos que estejam

desagrupados.
● Volte o zoom para 100%.

● Ferramenta Conta-Gotas
● A ferramenta conta-gotas copia uma cor para outro local.

● Ative a ferramenta conta-gotas ou tecle I.

● Clique dentro da asa da borboleta (preenchimento cor-de-rosa):

• O painel de propriedades mostra que foi escolhida a cor rosa:

• Clique em outro local para preencher com a cor escolhida

ou selecione um objeto e use a ferramenta conta-gotas sobre
outra cor para copiá-la para o objeto selecionado.

• Ex.: Ative a ferramenta oval

26 Animate CC
• Desenhe um círculo no palco

• O círculo ficou com o mesmo preenchimento da asa da borboleta.

● Posição E Tamanho Das Formas

• Para selecionar o objeto, use a ferramenta seleção

● Para ajustar, com precisão, a posição e tamanho das formas, use
o painel de propriedades Posição e Tamanho.

● Para ajustar a posição horizontal no palco, clique no valor à

direita de X, digite o valor desejado e tecle Enter.
● Para ajustar a posição vertical no palco, clique no valor à direita
de Y, digite o valor desejado e tecle Enter.
● Para ajustar a largura do objeto, clique no valor à direita de L,
digite o valor desejado e tecle Enter.
● Para ajustar a altura do objeto, clique no valor à direita de A,
digite o valor desejado e tecle Enter.
● Dica: Use a tecla Tab para ativar os campos e fazer as
alterações e tecle Enter para finalizar a edição.

• Ex.: Deixe a largura e altura assim:

● Definiu o objeto com a largura de 200 pixels e a altura com 300
pixels.
Animate CC 27
● Clique na caixa da posição horizontal, digite "0" e tecle Enter.

● Alinhou o retângulo horizontalmente na posição zero (início da

borda esquerda do palco):

● Manipulando Formas
● Desenhe um retângulo no palco.

• Ative a ferramenta seleção

• Posicione nas bordas do objeto, deixando o cursor assim:

● Clique e arraste para deformar o objeto.

• Ex.: Posicione o cursor na borda do objeto:

• Clique e arraste para deformá-lo:

• Posicione nos cantos do objeto, deixando o cursor assim:

● Clique e arraste para deformar o objeto.

• Ex.: Posicione o cursor na borda do objeto:

28 Animate CC
• Clique e arraste para deformá-lo:

● Unindo Objetos

• Posicione dois objetos, um sobre o outro. Ex.:

• Selecione o traçado comum aos dois objetos

• Tecle Delete para apagar, juntando os objetos

● Repita o procedimento para os demais objetos, caso existam.
● Se os objetos forem de cores diferentes, use a ferramenta
conta-gotas e pinte o outro objeto com a cor selecionada.
● Obs.: Após usar a ferramenta conta-gotas, a ferramenta balde
de tinta é automaticamente selecionada.

Animate CC 29
Lição 4 - Textos
● Textos Estáticos Simples

• Ative a ferramenta texto ou tecle T.

● No painel de propriedades, ajuste para Texto estático.

● O texto estático é um tipo de texto que não vai sofrer alterações

em seu conteúdo durante a reprodução do filme.
● Ajuste as propriedades, como Família (fonte), Estilo, Tamanho
e Cor.

• Ex.:
● Clique no palco e digite o texto.

• Ex.:
● Para encerrar a edição do texto, tecle Esc.

• Para mover o texto pelo palco, use a ferramenta seleção

● Usando o mesmo processo, insira outros textos e ajuste suas
posições, deixando assim:

30 Animate CC
● Para alinhar textos, use o painel Alinhar (Ctrl+K).

• Deixe marcada a opção

● A opção Alinhar ao palco vai fazer com que todos os textos
sejam alinhados pelos limites do palco.

• Clique no botão Alinhar centro horizontal

● Centralizou os textos na horizontal:

Animate CC 31
● Para editar o texto com a ferramenta seleção, clique duplo sobre
ele.
● Para selecionar trechos do texto ou uma letra, clique e arraste
sobre o trecho ou a letra.
● Para editar o texto com a ferramenta texto, clique sobre ele.
● Tecle Esc 2 vezes para sair da edição do texto e desmarcá-lo ou
clique no palco
● Para girar um texto, ative a ferramenta transformação livre ou
tecle Q
● Posicione o cursor numa alça de canto do texto, de modo que
adquira a forma de uma curva com uma seta apontando para a
esquerda.

● Clique e arraste para girar o texto.

• Ex.:

● Textos Estáticos De Parágrafos

● Um texto de parágrafo é um texto que pode conter muitas linhas.

• Ative a ferramenta texto ou tecle T.

● No painel de propriedades, ajuste para Texto estático.

32 Animate CC
● Ajuste as propriedades, como família (fonte), tamanho, estilo
e cor.

● Clique no palco e arraste para inserir uma caixa de texto e digite

o texto.
● Para encerrar a edição do texto, tecle Esc.
● Para mover a caixa de texto pelo palco, use a ferramenta
seleção.
● O texto de parágrafo fica dentro do espaço que foi delimitado na
caixa de texto.

• Ex.:

● Animação Com Texto

● Usando a ferramenta texto, digite um texto estático.

Animate CC 33
● Ex.:
● Ajuste suas propriedades, como fonte, tamanho, estilo e cor.
● Selecione o texto.
● Tecle Ctrl+X e Ctrl+V.
● Centralizou o texto horizontalmente e verticalmente no palco:

● Mantenha o texto selecionado.

● No painel de propriedades, clique para abrir o painel Parágrafo.

● Para alinhar o texto, use o grupo Parágrafo. Ex.: Clique no

botão Alinhar ao centro para centralizar o texto na caixa de
texto.

● Clique num quadro e tecle F6 para inserir um quadro-chave.

34 Animate CC
● Ex.: Clique no quadro 15 e tecle F6:

● Faça as alterações no texto.

● Ex.: Clique duplo no texto para selecioná-lo, digite "para" e tecle
duas vezes Esc.

● Ative a ferramenta seleção

● Continue a inserir quadros-chave em outros quadros, usando F6.
● Ex.: Clique no quadro 30:

● A cada quadro-chave inserido, faça alterações no texto.

● A frase "Flash para web é aqui!" será exibida assim:
Quadros 1 a 14: "Flash"
Quadros 15 a 29: "para"
Quadros 30 a 44: "web"
Quadros 45 a 60: "é aqui!"
● Ative a ferramenta seleção e clique no texto "FLASH" para
selecionar.
● Para desagrupar um texto, clique sobre ele e tecle Ctrl+B.

Animate CC 35
● Ao desagrupar uma palavra, todas as letras do texto ficam
selecionadas. Ex.: palavra FLASH desagrupada.

● Quando a palavra está desagrupada, cada letra pode ser

formatada individualmente (pode-se deixar cada letra com uma
cor, por exemplo).

● Efeitos De Filtros
● Usando a ferramenta seleção, selecione o texto desejado.

• Ex.:
● No painel de propriedades, abra o grupo Filtros, caso não esteja
visível.

• Clique no botão Adicionar filtro e selecione

um efeito.
● Efeitos disponíveis: Sombra, Desfoque, Brilho, Bisel, Bisel de
Gradiente, Brilho de gradiente e Ajustar cor.
36 Animate CC
• Ex.: Selecione o efeito Sombra:

• Exemplo do efeito Sombra aplicado:

● No painel de propriedades, no grupo Filtros, são mostradas as

proprie-dades do efeito Sombra.

● Para alterar uma propriedade do efeito, clique nele e faça a

alteração.
● Exemplo: para alterar a cor da sombra, clique em Cor da
sombra e escolha a cor Vermelho na paleta de cores.

• O efeito ficou assim:

Animate CC 37
● Para alterar a distância da sombra, clique no valor da distância,
digite o novo valor e tecle Enter.
● Ex.: Altere o valor da distância para 30 pixels:

• Fica assim:
• Volte a propriedade distância ao valor 5
● Para copiar efeitos:
● 1. Selecione o texto com os efeitos

• 2. Clique no botão Área de transferência

• 3. Clique em Copiar tudo
● Para colar efeitos:
● 1. Selecione o texto que vai receber os efeitos

• 2. Clique no botão Área de transferência

• 3. Clique em Colar
● Para remover um filtro:
● 1. Selecione o texto que contém o filtro (efeito).

• 2. Selecione a propriedade, que deseja excluir.

• 3. Clique no botão Excluir filtro

38 Animate CC
● Criando Links A Partir De Textos

• Selecione o texto no qual deseja inserir um link.

● No painel de propriedades, abra o grupo Opções.

● Clique no campo Link, digite o site (endereço) e tecle Enter.

• Ex.:
● Ao rodar a animação, o link digitado será acionado ao se clicar
sobre ele e será aberto no seu navegador.
● Para definir que é endereço de internet, deve ser utilizado o
prefixo http://.

● Convertendo Texto Em Objeto

● Ative a ferramenta texto.
● Ajuste as propriedades desejadas e insira uma letra no palco.

• Ex.:
● Ative a ferramenta seleção e clique na letra digitada.

• Para desagrupar o objeto, tecle Ctrl+B.

● O painel de propriedades não mostra mais propriedades relativas
a texto e passou a mostrar as propriedades relativas à forma:

Animate CC 39
● Clique no palco para desmarcar.

• Clique na borda da letra e arraste para deformá-la.

● Para desagrupar um texto, é necessário teclar 2 vezes Ctrl+B.

● Exemplo: Selecione o texto e tecle Ctrl+B para desagrupar.

● Tecle novamente Ctrl+B para desagrupar e transformar em

objeto.

40 Animate CC
● Agora se pode formatar e deformar cada letra de um jeito
diferente.

Animate CC 41
Lição 5 - Animação - Parte 2
● Interpolação De Forma
● A interpolação suaviza a mudança entre formas.
● Desenhe um objeto no palco, como, por exemplo, um retângulo.

● Insira um quadro-chave num quadro de sua escolha. Ex.:

Quadro 15:

• Modifique o objeto, usando a ferramenta transformação livre

ou desenhe outro objeto como, por exemplo, um círculo.

• Ex.: Modifique assim:

● Em cada quadro-chave (quadros 1 e 15) haverá duas formas
diferentes.
● Para interpolar a cor, basta deixar a cor do objeto no último
quadro-cha-ve com a cor a ser alterada.
● Clique com o botão direito sobre o intervalo de quadros escolhido

42 Animate CC
● Clique na opção Criar interpolação de forma.

● Aparece um preenchimento verde entre os quadros e uma seta

entre os quadros-chave.

● A interpolação de forma transforma um objeto em outro. Nós

definimos ponto inicial e final e o Flash se encarrega de criar a
sequência.

Animate CC 43
● Ex.: Sequência de interpolação entre os objetos retângulo e
círculo:

● Para visualizar quadro a quadro, tecle ponto (.) para avançar e

vírgula (,) para retroceder.
● Para aumentar o tempo de interpolação, clique no quadro-chave
desejado e, sem soltar, arraste até outro quadro para aumentar.
● Para remover as interpolações, clique com o botão direito sobre o
intervalo da interpolação e clique na opção Remover
interpolação.

● Parando A Animação
● Clique no último quadro-chave.
● Tecle F9 para abrir a janela Ações (ou clique no menu Janela,
submenu Ações) .

● Clique na área branca e digite o comando ActionScript "stop();"

● Tecle F9 para fechar a janela Ações.

44 Animate CC
• O quadro-chave exibe um símbolo de alfa

● Interpolação Com Textos

● Insira um texto no palco, usando a ferramenta texto, e ajuste-o.

• Ex.:
● O procedimento para a interpolação de um objeto com um texto
(um círculo se transforma num texto, por exemplo) é o mesmo
descrito em INTERPOLAÇÃO DE FORMA, com a diferença que o
texto precisa ser transformado em objeto antes da interpolação.
● Para transformar o texto em objeto, selecione o texto e tecle
duas vezes Ctrl+B ou clique no menu Modificar, submenu
Separar.

● Clique no objeto CGD

● Para alterar a porcentagem do tamanho do objeto, clique no
menu Modificar, posicione em Transformar e clique em
Dimensionar e girar.

● Digite o valor, em porcentagem, do dimensionamento do objeto e

clique no botão OK ou tecle Enter.

Animate CC 45
● Interpolação Clássica
● A interpolação clássica é usada em imagens e símbolos.
● Para importar uma imagem ou foto, clique no menu Arquivo,
posicione em Importar e escolha uma opção de importação.
Exemplo: Para importar para a biblioteca, use a opção Importar
para biblioteca.

● A imagem importada pode ser usada em várias animações,

bastando acessar a biblioteca (guia Biblioteca do painel de
propriedades).
● Localize a imagem e clique duas vezes nela para importá-la.
● No painel de propriedades, clique na guia Biblioteca.

● Exibiu o arquivo que foi importado:

● Clique no arquivo e arraste-o para o palco.

● Clique na guia Propriedades e ajuste o tamanho do objeto:

46 Animate CC
● Arraste o carro para o canto superior esquerdo do palco.

• No quadro 40, insira um novo quadro-chave

● Esse quadro é o final da animação, portanto, temos de alterar a
posição do carro.
● Selecione o objeto carro.
● Usando Shift+seta para a direita, arraste o carro para o canto
superior direito do palco.

● Clique com o botão direito sobre o intervalo de quadros escolhido

● Clique na opção Criar interpolação clássica.

● Apareceu uma seta apontando para a direita num fundo azul

entre os quadros 1 e 40 (quadro 2 ao 39). ÷

Animate CC 47
● Propriedades Da Interpolação Clássica
● Clique entre os quadros 1 e 40:

● Pode-se rotular o trecho da interpolação.

● Ex.: Clique no campo Nome, digite "movimento do carro" e
tecle Enter.

● Na linha do tempo aparece o rótulo digitado:

● Para diminuir (atenuar) a velocidade da interpolação, use o

campo Atenuação. Ex.: Clique em Atenuação, digite um valor e
tecle Enter (para iniciar a interpolação mais lenta, digite um
valor negativo).

48 Animate CC
● A duração da animação é o resultado da divisão do total de
quadros pelo valor dos quadros por segundo.

● Para editar a atenuação, clique no botão Editar atenuação.

● Clique no botão Redefinir.

● Clique num ponto desejado ou arraste o quadrado preto para o
local desejado.
● Ex.: No quadro 150, deixe com 20% de atenuação (até o
quadro 150 será processado 20% da animação) e clique no
botão OK.

● A partir do quadro 150 será processado 80% da animação,

ficando mais rápido.
● Para remover a atenuação, clique no botão Redefinir.
● Para deixar uma imagem ou foto totalmente transparente,
selecione a imagem ou foto e clique na guia Propriedades.

● Em Efeito de cor, escolha Alfa e configure para 0%.

Animate CC 49
● Digite outro valor para deixar com transparência.

● Convertendo Formas Em Símbolos

• Selecione o objeto. Ex.:

● Para transformar o objeto selecionado em símbolo, tecle F8 ou
clique no menu Modificar, submenu Converter em símbolo.
● Digite um nome e deixe com o tipo Gráfico:

● Clique no botão OK.

● No painel de propriedades, clique na guia Biblioteca e veja que
o símbolo é exibido na biblioteca.

50 Animate CC
Lição 6 - Camadas
● As camadas ajudam a organizar a arte-final do documento. É
possível desenhar e editar objetos em uma camada, sem afetar
os objetos em outra camada.
● Para desenhar, pintar, ou modificar uma camada ou pasta,
selecione a camada na Linha do tempo para torná-la ativa. Um
ícone de lápis, ao lado do nome de uma camada ou pasta na
Linha do tempo indica que a camada ou pasta está ativa.
Apenas uma camada pode ficar ativa por vez (embora mais de
uma camada possa ser selecionada por vez).
● Há 5 tipos de camadas que você pode usar no Flash: Camadas
normais, camadas de máscara, camadas com máscara, camadas
de guia e camadas com guia.

● Renomeando Camadas
● Clique duplo no nome da camada.
● Digite o nome e tecle Enter.

● Inserindo Uma Nova Camada

• Clique no botão Nova Camada

● Criou uma camada:

● Organizando Camadas
● Para organizar e gerenciar as camadas, crie pastas de camada e
coloque as camadas nessas pastas.

Animate CC 51
● O ícone de lápis identifica a camada ativa. Só pode haver uma
camada ativa na animação.

● Os objetos de uma camada são independentes dos objetos de

outra camada.

● Ocultando Camadas
● Clique no ícone de olho da camada a ser ocultada.
● Exemplo: Clique no ícone da camada Triângulo.

● Aparece um X vermelho, indicando que a camada está oculta.

● Isso indica que, em modo de desenvolvimento, o triângulo ficará

oculto.

52 Animate CC
• Para reexibir a camada oculta, clique no ícone "X"

● Para ocultar/reexibir todas as camadas, clique no ícone de olho.

● Bloqueando Camadas
● Clique no ícone de cadeado da camada a ser bloqueada.
● Exemplo: Clique no ícone da camada Triângulo.

● Aparece um cadeado, indicando que a camada está bloqueada.

● Isso indica que o triângulo não pode ser editado/modificado.

● Para desbloquear a camada, clique no ícone de cadeado.
● Para bloquear/desbloquear todas as camadas, clique no ícone de
cadeado.

Animate CC 53
● Excluindo Camadas
● Clique na camada a ser excluída.

• Clique no botão Excluir ou clique com o botão

direito sobre a camada e clique na opção Excluir camada.

● Ordenando Camadas
● Clique na camada e, sem soltar, arraste para a posição desejada.
● A prioridade de exibição dos objetos obedece a ordem de posição
das camadas, de cima para baixo.
● Exemplo: Camada Quadrado está em posição superior em
relação às outras camadas.

● O objeto quadrado é exibido em primeiro plano, na frente dos

outros objetos das outras camadas.

● Arrastando a camada Círculo para cima das outras, o objeto

círculo fica em primeiro plano.

● Arrastando a camada Triângulo para acima das outras, o objeto

triângulo fica em primeiro plano.

54 Animate CC
● Mostrar Camadas Como Contorno

• Clique no ícone de cor de contorno para exibir somente o

contorno dos objetos.

• Fica assim:
● Esse recurso serve apenas para melhorar a visualização dos
objetos nas camadas.

● Camadas De Máscara
● As camadas de máscara contêm objetos usados como máscaras
para ocultar partes selecionadas de camadas abaixo dela.
● Exemplo: Animação com máscara, usando uma foto e um círculo.

• Crie um novo arquivo

• Configure o tamanho do filme de acordo com sua necessidade

Animate CC 55
● Importe a imagem que deseja utilizar para o palco.

● Clique na foto para selecionar

● A camada Foto pode ser bloqueada, pois não queremos alterar a

posição da foto no filme.
● Clique na foto e veja que não é mais possível selecionar, pois a
camada está bloqueada.
● Crie uma camada para criar a Máscara.

● Essa nova camada vai conter uma animação de máscara.

● Usando a ferramenta oval, desenhe um círculo sem contorno e
posicione à esquerda da foto.

• Ex.:
56 Animate CC
● Clique no quadro 60 da camada Máscara e tecle F6 para criar
um quadro-chave.

● Arraste o círculo para a direita, deixando-o fora do palco.

• Clique no quadro 61 e crie um quadro-chave

• Clique no quadro 100 e crie um quadro-chave

● Clique no quadro 100 da camada Foto e tecle F5 para repetir a
foto em toda a animação (do quadro 1 ao 100).

Animate CC 57
• Clique no quadro 100 da camada Máscara
● Aumente e centralize o círculo no palco:

● Crie uma interpolação de forma entre os quadros 1 e 60:

● Crie uma interpolação de forma entre os quadros 61 e 100:
● Clique no quadro 1 da animação e tecle Enter.

● Para criar a máscara, clique com o botão direito na camada

Máscara e clique na opção Máscara.

58 Animate CC
● O círculo vermelho se transformou em uma máscara em cima da
foto.

● As camadas ficaram assim:

• Clique no quadro 100 da camada Máscara

• Tecle F9.
• Clique na área branca e digite "stop();"
● Para fechar a janela Ações, tecle novamente F9.
● Para testar o filme, tecle Ctrl+Enter.

Animate CC 59
Lição 7 - Clipe De Filme (Movie Clip)
● Criando Clipes De Filme
● Os clipes de filme são elementos essenciais para quem cria
conteúdo animado com a ferramenta de autoria do Flash e
deseja controlar esse conteúdo com o ActionScript. Sempre que
você cria um símbolo de clipe de filme no Flash, o Flash adiciona
esse símbolo à biblioteca desse documento Flash.
● Clique no menu Inserir, submenu Novo símbolo ou tecle
Ctrl+F8.

● Digite um nome para o símbolo, escolha o tipo Clipe de filme e

clique no botão OK.
● Exemplo: Criar um clipe de filme de nome bola:

● Um ambiente vazio para a criação do clipe de filme será aberto.

● Pode-se desenhar formas ou importar imagens (ou outros clipes).
● Para sair do modo de edição de clipe de filme, clique na seta
azul, localizada no canto superior esquerdo do palco.

60 Animate CC
● Inserindo Clipe De Filme Da Biblioteca
• Clique na guia Biblioteca
● Existe 1 item na biblioteca, que é o clipe de filme que foi criado:

● Clique no item e arraste-o para o palco.

● Inseriu o clipe de filme em cima dos objetos que estão em nosso
filme.
● Para inserir uma cópia (instância) do clipe, basta arrastar
novamente da biblioteca para o palco.
● Um clipe de filme, na biblioteca, pode ser usado quantas vezes
for necessário.
● Para excluir um clipe de filme do palco, selecione-o e tecle
Delete.
● Mesmo excluindo o clipe de filme do palco, ele permanece
disponível na biblioteca.
● Para excluir um clipe de filme da biblioteca, selecione-o e tecle
Delete ou clique no botão Excluir, no canto inferior direito do
palco.

● Editando Clipes De Filme

● Pode-se editar o clipe na biblioteca ou diretamente no palco.
● Na biblioteca, clique duas vezes sobre o ícone do clipe de filme.
● Ex.: Clique duplo no ícone do clipe bola.

Animate CC 61
● O nome do clipe que está sendo editado é exibido no canto
superior esquerdo do palco.

• Clique na guia Propriedades

● Clique no clipe de filme para selecioná-lo e altere a cor do círculo
para vermelho.

• Ex.:

• No meio da tela existe um gráfico na forma de cruz:

● Esse gráfico indica o centro do clipe de filme. Sempre que
trabalhamos com clipes de filme, devemos manter a animação
centralizada, usando esse gráfico como referência.
● No palco, clique duplo no clipe para entrar em seu modo de
edição.
● Quando editamos o clipe original, as cópias inseridas no palco são
alteradas automaticamente ao sair do modo de edição.
● A vantagem se editar diretamente no palco é poder visualizar os
outros clipes e objetos, o que facilita o posicionamento no filme
principal. Ao entrar no modo de edição de um clipe, somente ele
fica em destaque, deixando o filme principal com uma
transparência.

62 Animate CC
● Criando Animações Com Clipes De Filme
● Em um filme principal, podemos inserir outros clipes de filme.
● O filme principal deve possuir apenas 1 quadro na linha do tempo
e a animação virá dos clipes de filme inseridos.

● Um objeto do tipo Clipe de filme tem uma característica de

poder ser uma animação, separada do filme principal.
● Clique no menu Inserir, submenu Novo símbolo ou tecle
Ctrl+F8.
● Digite um nome para o símbolo, escolha o tipo Clipe de filme e
clique no botão OK.
● Um ambiente vazio para a criação do clipe de filme será aberto.
● Exibiu o nome do clipe de filme, no canto superior esquerdo:

● O clipe de filme possui sua própria linha do tempo.

● Ao criar um clipe de filme, é importante manter os objetos o mais
próximo possível do centro.
● No centro do clipe de filme existe um gráfico em forma de cruz,
indicando onde é o centro do clipe de filme.

● Desenhe um círculo no centro do clipe de filme (posicione o

cursor no centro e mantenha a tecla Alt pressionada enquanto
desenha o círculo)

Animate CC 63
● Na guia Propriedades ajuste as medidas do círculo:

• Centralize o círculo no centro do clipe de filme

• Crie um quadro-chave no quadro 30:

● Clique no quadro 30 do clipe de filme e modifique o círculo,
deixando assim:

● Crie uma interpolação de forma entre os quadros 1 e 30:

64 Animate CC
● Clique no quadro 1 do clipe de filme:
● Para visualizar o efeito da interpolação de forma, tecle Enter.
● O objeto muda de forma e também de cor.
● Agora temos um clipe de filme com 30 quadros.
● Para sair do modo de edição do clipe de filme, clique na seta

• Clique na guia Biblioteca

● Exibiu o clipe de filme bola:

● Arraste o clipe bola para o palco.

• Ex.:
● Posicione o clipe no canto inferior esquerdo do palco.

● Para testar o filme principal, tecle Ctrl+Enter.

● O filme principal está estático, mas o clipe de filme que criamos
está se movimentando.
● Feche a janela de visualização.

Animate CC 65
Lição 8 - Explorando ActionScript
● ActionScript é uma linguagem de programação orientada a
objeto utilizada em aplicações para Internet.

● Criando Botões
● Os botões são clipes de filme interativos de quatro quadros.
● Tecle Ctrl+F8 ou clique no menu Inserir, submenu Novo
símbolo...
● Digite um nome para o botão e escolha o tipo Botão.

• Exemplo:
● Clique no botão OK.
● O modo de edição do botão será iniciado automaticamente.
● Exibiu, no canto superior esquerdo, o nome do símbolo que
estamos editando:

● Desenhe a forma do botão (círculo, retângulo etc.).

• Ex.:

• Ative a ferramenta Texto e selecione o modo “Texto estático”

66 Animate CC
● Insira o texto estático "Entrar" abaixo do botão:

• Ajuste assim:
● Selecione o texto e alinhe horizontalmente e verticalmente no
palco:

• Saia do modo de edição do botão

● Clique na guia Biblioteca e veja que a biblioteca possui um
símbolo:
● Arraste o símbolo botão 1 para o canto superior esquerdo do
palco:

● Pode-se arrastar várias cópias do botão, a partir da biblioteca.

● Mesmo apagando o botão do palco, ele permanece na biblioteca.
Animate CC 67
● Ao teclar Ctrl+Enter e posicionar o cursor sobre o botão, o
mesmo adquire a forma de uma mão apontando. Todo botão
possui essa característica.

● Para inserir botões prontos, clique no menu Janela, posicione em

Bibliotecas comuns e clique em Buttons.

● Comportamento Dos Botões

● Para editar os botões, pode-se dar um clique duplo sobre o seu
ícone, na biblioteca ou no palco.
● Quando você seleciona o comportamento do botão de um
símbolo, o Flash cria uma linha do tempo com quatro quadros.
Os primeiros três quadros exibem os três estados possíveis do
botão; o quarto quadro define a área ativa do botão. A linha do
tempo na verdade não é reproduzida; ela reage ao movimento do
ponteiro e às ações saltando para o quadro apropriado.

● Cada quadro na linha do tempo do botão tem uma função

específica:
O primeiro quadro é o estado Acima, representando o botão
sempre que o cursor não estiver sobre o botão.
O segundo quadro é o estado Sobre, representando a
aparência do botão quando o cursor estiver posicionado
sobre o botão.
O terceiro quadro é o estado Para baixo, representando a
aparência do botão quando clicado.
O quarto quadro é o estado Ocorrência, definindo a área
que responde ao clique do mouse. Essa área é invisível no
arquivo SWF.

68 Animate CC
● Ex.: A cor do botão muda ao se posicionar o cursor sobre ele.
● Na biblioteca, clique duplo sobre o símbolo botão 1 para editá-lo.
● Altere a cor do preenchimento do botão para amarelo:

• Clique na seta azul para sair do modo de edição

● Alterou o botão que está no palco para amarelo.

● Clique duplo no botão que está no palco.

● Abriu o modo de edição do símbolo, mas continua sendo
mostrado o palco
● Veja que a linha do tempo possui os 4 estados de um botão
● Clique no quadro Sobre e crie um quadro-chave.

● Altere a cor do preenchimento do botão para azul-claro.

• Ex.:

Animate CC 69
• Clique no quadro Acima e veja que está amarelo.

● Clique no quadro Sobre e veja que está azul.

● Saia do modo de edição e teste a alteração, teclando

Ctrl+Enter.
● Posicione o cursor sobre o botão e veja que a cor muda para
azul. Posicione o cursor fora do botão e veja que a cor muda para
amarelo:

● Feche a janela de visualização.

● Links Para Páginas Web

• Crie um símbolo do tipo botão com o nome desejado

● No quadro Acima, desenhe um quadrado sem contorno, com a
medida desejada. Exemplo:

● Insira o texto dentro do quadrado e centralize-o. Exemplo:

70 Animate CC
● Clique no quadro Sobre e crie um quadro-chave.

● Modifique, deixando assim:

• Clique na seta azul para sair do modo de edição

● Arraste o botão para o palco:

• Clique na guia Propriedades

• Clique no botão globo.com para selecionar

● No painel de propriedades, exibiu o objeto como botão.

● Renomeie a camada Camada 1 para "Botões".
● Crie uma camada e altere seu nome para "Ações".

● Todos os códigos de ActionScript serão colocados na camada

Ações.

Animate CC 71
● Clique no botão globo.com para selecionar.
● Nomeie o botão como "Globo".

● Clique no quadro 1 da camada Ações.

● Tecle F9 ou clique no menu Janela, submenu Ações.
● Deixe o código assim:

● Onde Globo é o nome do botão que, ao evento de se clicar sobre

ele, executa a função abreglobo. Essa função abrirá a página da
Globo.com.
● Tecle F9 para fechar a janela Ações.

• Tecle Ctrl+Enter e clique no botão para testar o link.

● Após visualizar a página, feche a janela do navegador.

● Exportando Um Filme Para Uso Fora Do Flash

● Clique no menu Arquivo, submenu Configurações de
publicação... ou tecle Ctrl+Shift+F12.

• Marque a opção
● Clique na pasta referente ao arquivo de saída.
72 Animate CC
• Escolha o local para exportar. Ex.:

● Digite um nome para o arquivo.

• Ex.:
● Clique no botão Salvar.
● Clique no botão Publicar e no botão OK.
● Acesse o local de exportação e clique duplo sobre o arquivo para
abri-lo fora do Flash.

• Agora o filme ficou independente do Flash, pois foi exportado

como um programa:

● Textos Dinâmicos
● Um texto dinâmico pode ser alterado em tempo de execução,
reagindo a um evento, como, por exemplo, o clicar do mouse.
● Crie o os botões e as caixas de texto que você irá utilizar. Ex:

Animate CC 73
• Selecione o texto que será dinâmico:
● O painel de propriedades exibe o texto como "Estático":

● Por padrão, o texto inserido no palco é estático.

● O texto é estático quando ele não pode ser alterado durante a
execução da animação. Para que seja alterado conforme se clica
nos botões de cor, devemos alterar o tipo dos textos para
dinâmico.

● Altere o tipo do texto para "dinâmico" e deixe com um nome a

seua escolha. Exemplo: nomecor

● Clique duplo no texto para editar. Use a alça lateral e aumente o

tamanho. Clique no palco para desmarcar.

● O texto ficou com um contorno preto tracejado, indicando que o

texto é dinâmico.

74 Animate CC
• Repita o processo com todas as caixas de texto que serão

dinâmicas:
● Altere o tipo do texto para dinâmico e deixe com o nome
"descricaocor".

• Clique duplo no texto para editar

● Use a alça lateral e aumente o tamanho.

● Clique no final da palavra descrição e tecle Enter 5 vezes.

Clique no palco para desmarcar.

● O texto ficou com um contorno preto tracejado (texto dinâmico).

● Tecle Ctrl+Enter.
Animate CC 75
● O filme inicia com os textos que estão definidos nas caixas de
texto.

● O filme deve começar sem os textos. Somente irão aparecer os

textos quando se clicar nos botões.
● Na guia "Saída" é exibida uma mensagem pedindo para
incorporar as fontes, pois estamos usando textos dinâmicos.

● Incorporando Fontes
● Quando se usa texto dinâmico, deve-se incorporar a fonte.
● Para incorporar a fonte, clique no menu Texto e no submenu
Incorporação da fonte.

• Selecione a fonte a ser incorporada. Ex.:

● Selecione os intervalos de caractere desejados.

76 Animate CC
• Ex.:

• Clique no botão Adicionar nova fonte

• A fonte adicionada é exibida

● Clique no botão OK.
● Outra forma de incorporar a fonte é clicando na guia
Propriedades e clique no botão Incorporar.

● Após incorporar as fontes, se desejar, crie uma nova camada

para inserir o ActionScript responsável pela modificação do texto.
● Tecle F9.
● Clique na área branca da janela e digite o código na linha 1:

● Tecle Enter.

Animate CC 77
• Digite o código na linha 2:
● Com isso, ao abrir o filme, os conteúdos das duas caixas de texto
serão apagados.
● Para fechar o editor, tecle F9.
● Clique no quadro 1 da camada Ações.
● Insira o código para o botão verde:

● Copie o código e cole-o abaixo do atual, dando um espaço com

Enter.
● Altere o código para o botão amarelo, deixando assim:

● A descrição fica assim: 'O amarelo transmite calor, luz e

descontração. Simbolicamente está ligado à prosperidade.'
● Copie o código e cole-o abaixo do atual, dando um espaço com
Enter.
● Altere o código para o botão vermelho, deixando assim:

● A descrição fica assim: 'O vermelho é a cor da paixão e do

sentimento. Simboliza o amor.'

78 Animate CC
● Copie o código e cole-o abaixo do atual, dando um espaço com
Enter.
● Altere o código para o botão azul, deixando assim:

● A descrição fica assim: 'O azul é a cor do céu, do espírito e do

pensamento.'
● Tecle F9 para fechar a janela Ações.
● Tecle Ctrl+Enter para rodar o filme.

• Clique no botão verde para exibir o texto dinâmico:

• Clique no botão amarelo para exibir o texto dinâmico:

Animate CC 79
• Clique no botão azul para exibir o texto dinâmico:

• Clique no botão vermelho para exibir o texto dinâmico:

● Feche a janela de visualização.

80 Animate CC
Lição 9 - Interpolação De Movimento
● Frames Por Segundo (FPS)
● Frame significa quadro. Portanto, refere-se à quantidade de
quadros exibidos por segundo (em inglês, Frames Per Second).
● O padrão do Flash é 24 fps, que indica 24 frames por segundo,
ou 24 quadros por segundo.

● O Flash calcula o tempo decorrido da animação e o exibe à direita

do campo taxa de quadros. O cálculo é feito assim: O total de
quadros é dividido por 24 quadros por segundo. Exemplo: Uma
animação possui 160 quadros com um taxa de 24 fps, logo o
tempo total da animação é 6,6 segundos (160÷24).

● Para alterar o campo Taxa de quadros basta clicar na guia

Propriedades
● Clicar sobre o valor atual, digitar o novo valor e teclar Enter.

● Exemplo: alterar a taxa de 24 para 48:

● Dessa forma, serão processados 48 quadros em cada segundo, o
que deixará o filme duas vezes mais rápido.

Animate CC 81
● Entendendo Vetor
● Todos os objetos criados a partir da barra de Ferramentas do
Flash são vetoriais. O objeto é definido por uma equação
matemática e não baseado em resolução. Dessa forma, permite
alterações de tamanho sem nenhuma perda de qualidade e
também mudanças de cores e contornos.
● O objeto bitmap não permite alterações sem perder qualidade.
● O painel de propriedades exibe o objeto bitmap.

● Utilizando Símbolo De Outro Arquivo

● Abra o arquivo no qual estão os símbolos que você deseja
reutilizar.
● Crie um arquivo ActionScript 3.0.
● Clique na guia Biblioteca do novo arquivo.
● Selecione o arquivo flash que foi aberto.
● Os símbolos do arquivo aberto aparecerão no novo arquivo.
● Agora basta arrastar os símbolos desejados para o palco do novo
arquivo.
● O arquivo novo fica com os símbolos arrastados do arquivo
aberto.
● Podem ser abertos vários arquivos para reutilizar seus símbolos.
• Exemplo: Abra um arquivo que possua uma biblioteca.
● Crie um arquivo ActionScript 3.0.

• Clique na guia Biblioteca

● Selecione o arquivo que foi aberto.

82 Animate CC
• Aparecem os símbolos do arquivo
● Clique nos símbolos desejados e arraste-os para o palco do novo
arquivo.
● Feche o arquivo aberto.
● Os símbolos copiados para o novo arquivo permanecem nele.
● Podem ser abertos vários arquivos para se reutilizar seus
símbolos.

● Ferramenta Tinteiro
● A ferramenta tinteiro insere traçado (contorno) no objeto.

• Para selecioná-la, clique na ferramenta tinteiro

● Para usar o atalho para a ferramenta tinteiro, tecle S.
● Ajuste as propriedades de traçado, como cor e altura e clique no
objeto para inserir o traçado.

• Ex.:

Animate CC 83
● Usando Interpolação De Movimento
● A interpolação de movimento é a maneira mais simples e fácil de
animar um objeto no Flash.
● Desenhe um círculo sem contorno no canto superior esquerdo do
palco:

• Ajuste a medida ao símbolo

● Para aplicar a interpolação de movimento precisamos converter a
forma em símbolo, do tipo clipe de filme.

• Selecione o círculo
● Para converter em símbolo, clique com o botão direito sobre o
objeto e clique em Converter em símbolo… ou tecle F8.
● Digite um nome para o símbolo, selecione o tipo clipe de filme e
clique no botão OK.
● Clique com o botão direito no clipe de filme e clique na opção:

● Clique no palco para desmarcar.

● Na linha do tempo, os quadros de 1 a 24 ficaram azuis. Isso
indica que existe uma interpolação de movimento:

84 Animate CC
● Por padrão, a interpolação de movimento insere 24 quadros na
linha do tempo, o que equivale a 1 segundo de animação (24
fps).
● A diferença básica entre interpolação clássica e interpolação
de movimento é que na interpolação de movimento não
precisamos utilizar quadros-chave e temos a linha de trajeto para
modificar.
● Clique no quadro 24
● Arraste o clipe de filme para a direita do palco.
● Uma linha verde aparecerá, mostrando a trajetória da bola.

• Exemplo:
● Ao arrastar o clipe para outro local, a linha de trajetória
acompanha o clipe de filme.
● Cada ponto que aparece na linha de trajetória representa um
quadro da linha do tempo.
● Para alterar a trajetória, clique num ponto qualquer da linha e
arraste para outra posição.

• Exemplo:

Animate CC 85
● Predefinição De Movimento
● O Flash possui uma biblioteca de efeitos de movimento prontos
para uso.
● Selecione o clipe de filme.
● Clique no menu Janela, submenu Predefinições de
movimento.

● Abra a pasta Predefinições padrão.

• Clique no efeito desejado e clique no botão

● Criando Clipes De Filme Dentro De Outro Clipe De Filme

● Abra um arquivo que contenha clipes que você deseja reutilizar.
● Importante: Quando queremos que uma animação seja
reaproveitada, o usual é criar clipe de filme dentro de outro clipe
de filme.
● Crie uma camada, renomeie-a e clique no quadro 1 da nova
camada.
● Tecle Ctrl+F8 para criar um clipe de filme vazio.
● Digite um nome para o símbolo, selecione o tipo clipe de filme e
clique no botão OK.
● Clique na guia Biblioteca e arraste uma cópia de um clipe para o
palco.
● Aplique predefinições de movimento (menu Janela -
Predefinições de Movimento).
● Escolha um efeito, clique no botão Aplicar e feche o painel de
predefinições.
86 Animate CC
● Ajuste o tempo da animação, arrastando os quadros da
interpolação criada pelo efeito de predefinições.
• Saia do modo de edição.
● Criou um clipe com um efeito predefinido, reutilizando um clipe
que já estava pronto na biblioteca.

Animate CC 87
Lição 10 – Projetos
● Nesta lição você praticou o que foi aprendido no curso.

FIM DA APOSTILA
Método CGD ® - Todos os direitos reservados.
Protegidos pela Lei 5988 de 14/12/1973.
Nenhuma parte desta apostila poderá ser copiada sem prévia
autorização.

88 Animate CC