A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

O Flash – Timeline Bárbara A. G. P. Yamada

Apresentações semelhantes


Apresentação em tema: "O Flash – Timeline Bárbara A. G. P. Yamada"— Transcrição da apresentação:

1 O Flash – Timeline Bárbara A. G. P. Yamada

2 O Flash – Timeline Timeline É um local onde são feitas as animações ao longo do tempo Uma 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

3 O Flash – Timeline Layers Imagine a layer como um papel transparente Cada objeto pode ser inserido em um desses papéis No final, se tem uma pilha de papéis transparentes

4 O Flash – Timeline Layers A 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

5 O Flash – Timeline 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

6 O Flash – Timeline 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 = Coloque a cor # para preenchimento e contorno

7 O Flash – Timeline 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

8 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 1 (continuação) 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 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 1 (continuação) 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 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 1 (continuação) 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

11 O Flash – Timeline 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.

12 O Flash – Timeline 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 de altura. Posicione-o no palco com as seguintes coordenadas: X=30.7 e Y=70.7

13 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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.

14 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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.

15 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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)

16 O Flash – Timeline 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.

17 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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.

18 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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)

19 O Flash – Timeline 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.

20 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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.

21 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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.

22 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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.

23 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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.

24 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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.

25 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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.

26 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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.

27 O Flash – Timeline Animação quadro-a-quadro Exercício Prático 2 (continuação): 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.

28 O Flash – Timeline 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.

29 O Flash – Timeline 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.

30 O Flash – Timeline 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.

31 O Flash – 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.

32 O Flash – Timeline 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.

33 O Flash – Timeline 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.

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

35 O Flash – Timeline 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.

36 O Flash – Timeline 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 para largura e altura.

37 O Flash – Timeline 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. 5. Faça outro círculo com cor de contorno e cor de preenchimento amarelos. Na barra de propriedades, use 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.

38 O Flash – Timeline 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. 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 Isso fará ele parecer que está voltado para esquerda.

39 O Flash – Timeline 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. 9. Crie mais duas layers com os nomes Maça1 e Maça2, respectivamente. 10. Clique no primeiro frame da layer Maça Selecione a ferramenta Oval. Se o Object Drawing (J) estiver acionado, então desative-o.

40 O Flash – Timeline 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. 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.

41 O Flash – Timeline 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. 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çã.

42 O Flash – Timeline 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%.

43 O Flash – Timeline Exercício2 (continuação): 21. Crie uma nova layer com o nome Flecha e posicione abaixo da layer Maça 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.

44 O Flash – Timeline 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.

45 O Flash – Timeline 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).

46 O Flash – Timeline 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çã.

47 O Flash – Timeline 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.


Carregar ppt "O Flash – Timeline Bárbara A. G. P. Yamada"

Apresentações semelhantes


Anúncios Google