o flash – timeline bárbara a. g. p. yamada [email protected]

O Flash – Timeline

Bárbara A. G. P. YamadaBárbara A. G. P. [email protected]@gmail.com


TimelineÉ um local onde são feitas as animações

ao longo do tempoUma animação é composta por vários

frames, podendo ter também quantas layers forem necessárias

Quando um frame contém um objeto ele tem bolinha preenchida e quando está vazio ele tem uma bolinha branca


Layers Imagine a layer como um papel

transparenteCada objeto pode ser inserido em um

desses papéisNo final, se tem uma “pilha” de “papéis

transparentes”


LayersA vantagem do uso da layer é possibilitar a

edição de cada objeto individualmente, sem interferir nos que estão nas layers acima ou abaixo

É mais fácil lidar com objetos quando estão em layers individuais


Animação quadro-a-quadroÉ o método que possibilita a criação de

cada frame da animaçãoÉ ideal para criar animações complexas


Animação quadro-a-quadro Exercício Prático 1: Criar um sinal de trânsito.

1. Abra o Flash e crie um novo documento com o palco no tamanho 200 x 300, fundo branco e 12fps. Window – properties – edit

2. Ative a ferramenta Retângulo (R), e desenhe no palco um retângulo com 130 de largura e 252 de altura. Posicione-o no palco com as seguintes coordenadas: X=35 e Y = 24.9. Coloque a cor #333333 para preenchimento e contorno


Animação quadro-a-quadro Exercício Prático 1 (continuação)

3. Renomeie essa primeira layer para Retângulo.

4. Selecione a ferramenta Oval (O)

5. Acione, na subdivisão Options da caixa de ferramentas, o item Object Drawing (J), para que os dois objetos não sejam mesclados

6. Desenhe um círculo e na sua barra de propriedades coloque 75 para W e H (largura e altura) e para o posicionamento no palco use: X=63 e Y=31. Use a cor preta para preenchimento e contorno



7. Desenhe mais dois círculos com as mesmas cores e tamanho do anterior e, para posicionamento, use:

X=63 e Y=115 (para o círculo do meio) e X=63 e Y=196.9 (círculo da parte inferior)

8. Ative a ferramenta de Seleção (V). Clique uma vez sobre o primeiro círculo (da parte superior). Na barra de propriedades, coloque a cor vermelha (#FF0000) para preenchimento. Na linha do tempo, clique no frame 15 e pressione a tecla F6



9. Uma vez estando no frame 15, clique novamente, com a ferramenta de seleção, no primeiro círculo e, na barra de propriedades, coloque a cor preta (para voltar o sinal ao estado de apagado) para preenchimento. Selecione agora o círculo do meio e coloque a cor amarela (#FFF000) para preenchimento. Na linha do tempo clique no frame 30 e pressione a tecla F6



10.Uma vez estando no frame 30, clique novamente , com a ferramenta de seleção, no círculo do meio e, na barra de propriedades, coloque a cor preta (para voltar o sinal ao estado de apagado) para preenchimento. Selecione agora o último círculo (da parte inferior) e coloque a cor verde para preenchimento. Na linha do tempo clique no frame 45 e pressione a tecla F6

11.Para testar, vá ao menu Control – Test – Movie (Controlar – Teste – Filme) ou Ctrl+Enter

12.Salve o arquivo com o nome sinaldetransito.fla


Animação quadro-a-quadro Exercício Prático 2: Consiste em um lápis que

escreve uma palavra sobre uma folha de caderno.

1. Crie um novo documento e deixe o palco com as configurações padrões: 550 x 400 pixels, 12 fps e fundo branco. Salve o projeto como lapisescrevendo.fla.


Animação quadro-a-quadro Exercício Prático 2 (continuação):

2. Desenhe uma folha, solta, de um caderno. Ative a ferramenta Retângulo. Na barra de propriedades, selecione a cor #E1E9FF para preenchimento e #0000FF para contorno. Desenhe um retângulo com 230 de largura e 306.6 de altura. Posicione-o no palco com as seguintes coordenadas: X=30.7 e Y=70.7



3. Use círculos para construir furos no papel por onde passa o arame do caderno. Para permitir reposicionar os círculos sobre o retângulo, acione, na subdivisão Options da caixa de ferramentas, o item Object Drawing (ou J). Use como fundo a cor branca e #0000FF para contorno. Use o tamanho 21 por 21. Ao desenhar o primeiro, clique sobre ele uma vez e pressione as teclas Ctrl+C. Depois Ctrl+V para colar.

4. Use a ferramenta Line, com cor #0000FF e espessura 2 para desenhar as linhas da folha.



5. Selecione todos os objetos que estão no palco usando as teclas Ctrl+A. Em seguida, clique com o botão direito do mouse sobre a folha e clique em Convert to Symbol. Na janela que se abre, em Name coloque Folha selecione Graphic e clique em Ok.



6. Copie e cole essa folha algumas vezes no palco. Coloque uma sobre a outra, gire algumas folhas que estão por baixo, usando a ferramenta de transformação livre. Deixe a folha principal (a 1ª) na posição inicial. Ao copiar e colar uma folha, para movê-la para trás da folha original, clique com o botão direito do mouse sobre ela e clique em Arrange (Organizar). Escolha Send to back (Enviar para trás) ou Send Backward (Enviar para trás somente de uma)


Animação quadro-a-quadro Exercício Prático 2 (continuação): Desenhe um lápis. Ao invés de construí-lo no palco e

transformá-lo em símbolo, construa-o direto como símbolo.

1. Clique no menu Insert – New Simbol. Em Name, coloque lápis, selecione Graphic e clique em Ok.

2. Ative a ferramenta Retângulo. Selecione a cor preta e tamanho 2 para contorno. Faça um retângulo com 29.0 de largura e 180 de altura. Ative a ferramenta Seleção. Clique uma vez sobre o contorno. Clique em Window – Color. Em cor de fundo, aplique o gradiente vermelho (a esfera vermelha). Em Type selecione Linear.



3. Ative a ferramenta Polygon. Na barra de propriedades, clique em Options. Em Number Of Slides coloque 3. Clique em Ok. Pressione Alt e desenhe um triângulo apontando para baixo.Na barra de propriedades, coloque o valor 29 para largura e 33.1 para altura. Na janela Color Mixer, coloque como preenchimento o primeiro gradiente da paleta (da esquerda para a direita). Agora, use a ferramenta de seleção para arrastar esse triângulo (preenchimento e contorno) para a parte de baixo do retângulo.



4. Desenhe o grafite do lápis. Desenhe mais um triângulo (apontando para baixo), com fundo e contorno preto e com 14.7 de largura e 13.0 de altura. Coloque-o com a ferramenta seleção, bem na pontinha do lápis.

5. O lápis está pronto. Clique em Scene1 para voltar à cena principal. Ele esta agora na biblioteca (Window – Library)


Animação quadro-a-quadro Exercício Prático 2 (continuação): Construir a animação.

1. Renomeie a layer atual para Folhas

2. Crie duas novas layers e nomeie-as para Texto e Lápis, respectivamente.

3. Clique na layer Lápis. Arraste o símbolo Lápis da biblioteca (Window – Library) para o palco. Posicione-o no lado direito do palco.



4. Criar uma animação do lápis saindo de onde ele está e indo para a folha de papel, para “começar a escrever”. Ele irá começar a “escrever” a partir da segunda linha. Para isto, ative a ferramenta de seleção. Clique na layer Lápis. Pressione F6 uma vez. Feito isso, arraste o lápis para um espaço de um 1/4 do ponto de onde ele vai começar a “escrever”. Aproveite e use a ferramenta Free transform para girá-lo levemente para a direita.



5. Clique no último frame da layer Lápis e pressione F6 mais uma vez. Mova o lápis novamente, deixando-o mais ou menos na metade do percurso.



6. Clique no último frame da layer Lápis e pressione F6 mais uma vez. Mova o lápis novamente, deixando-o mais ou menos a ¾ do ponto onde ele vai começar a “escrever”.



7. Clique no último frame da layer Lápis e pressione F6 mais uma vez. Finalmente, mova o lápis, deixando-o no ponto onde ele vai começar a “escrever”.



8. Clique no último frame da layer Texto e pressione F6. Acione a ferramenta texto e, na barra de propriedades, escolha a fonte Monotype Corsiva, tamanho 35, cor preta e negrito. Posicione a caixa de texto de tal forma que a ponta do lápis fique na extremidade inferior esquerda do caractere, como se ele fosse escrevê-lo.



9. Digite o primeiro caractere no último frame da layer Texto. Pressione F6 e digite o próximo caractere da palavra. Pressione F6 novamente e digite o próximo caractere. Continue até terminar a palavra.



10. Dar movimento ao lápis. Para isso, clique na layer Lápis, no frame onde surge o 1º caractere. Pressione F6. Mova o lápis simulando tal como se estivesse escrevendo o caractere em questão. Pressione F6 novamente e mova o lápis tal como se estivesse escrevendo os novos caracteres que aparecem. Continue assim até completar a palavra.



11. Para testar, clique no menu Control – Test Movie (Controle – Testar Filme) ou use Ctrl+Enter.

12. Dica: para diminuir a velocidade do lápis, diminua o valor de frames per second (fps).

13. Salve novamente o projeto.


A interpolação de movimento é a forma mais fácil e rápida de animar no flash.

Enquanto na animação quadro-a-quadro deve-se editar manualmente cada frame da animação, na interpolação basta indicar o movimento, o estado inicial e o final que o flash faz tudo automaticamente.

Em um projeto, ambos os métodos podem ser usados.


Há diferenças entre cada método. Nem tudo pode ser feito através de

interpolação. No método quadro-a-quadro há mais

controle da animação, pois pode-se fazer o que quiser e o que for necessário em cada frame.


O método de interpolação é mais rápido, porém, limitado.

O flash só consegue animar um objeto quando ele consegue "prever" o seu movimento ao longo da timeline.


Exercício1: Fazer um círculo se mover. 1. Abra o Flash e crie um novo documento com

fundo branco com 550 x 200 pixels e 12fps. 2. Ative a ferramenta Oval(O). 3. Desenhe um círculo bem à esquerda da

janela. Use qualquer cor de contorno e preenchimento.

4. Clique uma vez no frame 30 e pressione a tecla F6.


Exercício1 (continuação): 5. Clique uma vez no primeiro frame. Em

seguida, clique com o botão direito do mouse sobre algum frame, entre o primeiro e o 29 (não clique no último frame). No menu, clique Create Motion Tween (Criar Movimento Entre)

6. Observe que alinha de tempo do primeiro ao penúltimo frame está com uma seta apontando para a direita.


Exercício1 (continuação): 7. Clique no último frame (30) para indicar a

posição final do objeto. 8. Mova o círculo para a posição oposta (para o

lado direito da tela). Pressione as teclas Ctrl+Enter (ou no menu Control – Test Movie) para testar a animação.


Exercício de fixação: Faça esse mesmo exercício, mas com a bola se movendo na vertical ou na diagonal.


Exercício2: Construir uma animação de uma flecha que acerta uma maçã que está na frente de um alvo, partindo-a em dois pedaços.

1. Abra o Flash e crie um novo documento com fundo branco, palco com 550 x 400 pixels e 12 fps.

2. Renomeie a primeira layer para Alvo.


Exercício2 (continuação): Construir uma animação de uma flecha que acerta uma maçã que está na frente de um alvo, partindo-a em dois pedaços.

3. Ative a ferramenta Oval. Acione, na subdivisão Options da caixa de ferramentas, o item Object Drawing (J).

4. Faça, no canto superior direito, um círculo com cor de contorno e preenchimento pretos. Na barra de ferramentas use 145.2 para largura e altura.



5. Faça outro círculo com cor de contorno e cor de preenchimento amarelos. Na barra de propriedades, use 113.0 para largura e altura. Coloque-o sobre o círculo anterior.

6. Faça mais um círculo com cor de contorno e preenchimento pretos. Na barra de propriedades, use 80.4 para largura e altura. Coloque-o sobre o círculo anterior.



7. Pressione as teclas Ctrl+A (para selecionar tudo) e pressione F8. Em seguida, converta o símbolo em gráfico.

8. Vá a barra de propriedades e mude a largura do símbolo para 83.4. Isso fará ele parecer que está voltado para esquerda.



9. Crie mais duas layers com os nomes Maça1 e Maça2, respectivamente.

10. Clique no primeiro frame da layer Maça2. 11. Selecione a ferramenta Oval. Se o Object

Drawing (J) estiver acionado, então desative-o.



12. Na barra de propriedades, escolha o terceiro gradiente (bolinha vermelha) para preenchimento e o quarto (bolinha verde para contorno.

13. Faça um círculo no palco. Em seguida, ative a ferramenta Seleção (V). Dê um duplo-clique sobre o círculo para selecionar o contorno e o preenchimento. Na barra de propriedades, coloque 55.4 para largura e altura.



14. Mude o zoom para 200%. Clique no menu Modify – Transform – Envelope. Use a alça de dimensão da parte central superior para achatar levemente o círculo para baixo, fazendo o seu formato lembrar uma maçã.

15. Use a ferramenta Pencil com espessura 2 para desenhar o talo da maçã.

16. Quando a flecha atingir a maçã, ela irá se dividir em dois pedaços. Então, agora divida a maçã em dois pedaços. Para isso, use a ferramenta Lasso (L). Ative a ferramenta Lasso e selecione um pedaço da parte de baixo da maçã.


Exercício2 (continuação): 17. Quando completar a seleção, pressione as teclas

Ctrl+X (para recortar) 18. Clique no primeiro frame da layer Maça1 e pressione

as teclas Ctrl+V para colar. Em seguida, converta este pedaço para símbolo gráfico.

19. Clique na layer Maça2, certifique-se que tanto o talo quanto o pedaço superior da maçã estejam selecionados e converta-os para um único símbolo.

20. Posicione essas duas partes na frente do alvo (encaixe os dois pedaços da maçã de forma bem perfeita). E volte o zoom para 100%.


Exercício2 (continuação): 21. Crie uma nova layer com o nome Flecha e posicione

abaixo da layer Maça2. 22. Ative a ferramenta Line e mude a cor de contorno para

preta. Coloque 5 para espessura. Pressione a tecla Shift e faça uma linha na horizontal. O comprimento dela pode ter mais ou menos a altura do alvo.

23. Para fazer a ponta, ative a ferramenta Polygon. Na barra de propriedades, clique em Options e em Number of Sides coloque 3. Clique Ok.

24. Para cor de preenchimento, escolha o terceiro gradiente (bolinha vermelha) e para contorno use preta com espessura 1.


Exercício2 (continuação): 25. Pressione Shift e faça um triângulo apontando para a

direita e posicione-o na extremidade da linha que foi desenhada.

26. Para fazer a parte da outra extremidade da flecha (pena), ative a ferramenta Polygon e, na barra de propriedades, clique Options. Em Style, selecione Star. Em Mumber of Sdies, coloque 3. Clique em Ok.

27. Segure a tecla Shift e faça uma estrela de tal forma que uma ponta aponte para a direita e duas para a esquerda. Em seguida, posicione-a na outra extremidade da linha que foi desenhada.


Exercício2 (continuação): 28. Finalmente, selecione com a ferramenta Selection toda

a flecha (ou clique uma vez sobre o nome da layer e todos os itens são selecionados) e converta-a para um único símbolo gráfico. Posicione-a no lado esquerdo do palco, em linha reta para atingir a maçã bem no meio (no ponto onde ela se divide em duas partes).


Exercício2 (continuação): Todos os objetos para criar a animação foram criados,

então: 1. Começando pela flecha, clique no frame 15 da layer

Flecha. Pressione F6. Faça o mesmo com as outras três layers.

2. Clique no primeiro frame da layer Flecha com o botão direito do mouse. No menu que se abre, clique em Create Motion Tween. Agora clique com o botão esquerdo do mouse no frame 15 dessa mesma layer. Mova a flecha para o lado direito da tela, em linha reta, colocando-a na Maçã.


Exercício2 (continuação): Todos os objetos para criar a animação foram criados, então: 3. Agora, faça a maçã se dividir ao meio. Clique no frame 30

da layer Maça1. Pressione a tecla F6. Faça o mesmo com as outras três layers.

4. Clique no frame 15 da layer Maça1 com o botão direito do mouse. No menu que se abre, clique Create Motion Tween. Agora clique com o botão esquerdo do mouse no frame 30 dessa mesma layer. Mova o pedaço de baixo da Maçã para baixo, em linha reta, como se estivesse caído no chão.

A animação desse exercício está finalizada. Pressione as teclas Ctrl+Enter para testar.

o flash – timeline bárbara a. g. p. yamada [email protected]

Documents