Criação de Animações 2D

Técnicas de Multimédia – 11ºano

Ficha de Revisão
EXERCÍCIO 1
OBJETIVOS: Aprender a desenhar com o Animate.

1. Entre no Animate e crie um novo documento. (ActionScript 3.0)

2. Active a ferramenta Linha e defina as seguintes propriedades:
a) Cor: preto;
b) Espessura: 0.5;
c) Estilo de linha: Solid
3. Desenhe uma linha horizontal, quase do tamanho do palco, como pode ver na figura 1.

Figura 1
4. Seleccione a linha que acabou de criar e transforme-a numa curva como pode ver na figura 2.
Para isso posicione a seta do rato no meio da linha e repare que o símbolo que aparece no cursor representa
agora um arco. Clique e segurando o botão do rato, arraste-a para cima formando uma curvatura na linha.

Figura 2

NOTA:
Símbolo Arco: O símbolo que aparece ao lado da seta indica que pode deformar esse segmento.
Símbolo rosa-dos-ventos: Quando junto ao objecto seleccionado aparecer uma rosa-dos-ventos, isso indica que
pode mover o objecto.

5. Com a linha seleccionada, altere as dimensões e a posição da mesma, definindo para isso as seguintes
propriedades no painel Properties.
a) Largura (W): 400
b) Altura (H): 50
c) Posição da linha X: 40 e Y: 120
d) Ver figura 3.
6. Duplique o objecto. Para isso posicione a seta do rato sobre o objecto seleccionado e, segurando o botão do rato
com a tecla ALT pressionada, arraste-o para baixo. Ou simplesmente vá ao menu Edit > Duplicate (Editar >
Duplicar).
7. Inverta o objecto. Para isso vá ao menu Modify > Transform > Flip Vertical (Modificar > Transformar > Inverter
Verticalmente).
 Criação de Animações 2D
Técnicas de Multimédia – 11ºano

8. Arraste o objecto invertido e coloque-o como o ilustrado na figura 3.

Figura 3
9. Elimine as sobras das pontas, de forma a ficar com a imagem ilustrada na figura 4.

Figura 4

10. Active a ferramenta Oval e defina as seguintes propriedades:

a) Estilo da linha: Solid
b) Espessura: 0.5
c) Preenchimento: sem cor
11. Desenhe um círculo, no palco abaixo do avião.
12. Defina as dimensões do círculo que acabou de criar com a largura e altura de 80.
13. Mova o círculo para que o seu centro fique na ponta do corpo do avião.

Figura 5
14. Elimine a parte externa do círculo de forma a ficar como na figura 6.

Figura 6

15. Com a ferramenta Selection ativa transforme o bico do avião para que fique como na figura7. Para isso leve a
seta até à ponta do desenho, ao lado da seta aparece um ângulo recto. Clique e segurando o botão do rato,
arraste o cursor em direcção ao meio do desenho, até que a bolinha na ponta da seta cresça. Verifique se na
caixa de ferramentas a opção Snap to objects está activada.

Figura 7
 Criação de Animações 2D
Técnicas de Multimédia – 11ºano

MONTANDO A CABINE DO AVIÃO

16. Com a ferramenta Selection ativa aproxime a seta da linha de cima do avião bem no centro até aparecer um arco
ao seu lado. Clique, segurando o botão do rato, e arraste-a para a esquerda e um pouco para cima na diagonal,
até o fazer sobressair à cabine do avião.

Figura 8
17. Fora da área do avião, desenhe um rectângulo com as seguintes características:
a) Estilo da linha: Solid
b) Espessura: 0.5
c) Preenchimento: sem cor
18. Depois de desenhar o rectângulo defina no painel Properties 10 para a altura (H) e 70 para a largura (W).
19. Seleccione o rectângulo e arraste-o para dentro do avião.
20. Posicione a seta sobre a linha do rectângulo e, segurando o botão do rato, arraste-o para dentro do avião.

Figura 9

21. Retire a selecção e elimine a parte externa da cabine do avião. Veja o exemplo da figura 10.

Figura 10
22. Faça um Zoom próximo da cabine e com a ferramenta linha activa faça 3 linhas na cabine.

Figura 11
23. Verifique se o avião está muito barrigudo e diminua a barriga.
 Criação de Animações 2D
Técnicas de Multimédia – 11ºano

Figura 12
CRIAR AS JANELAS
24. Seleccione a ferramenta Oval com as seguintes características:
a) Estilo da linha: Solid
b) Espessura: 0.5
c) Preenchimento: sem cor
25. Desenhe dentro do avião 5 círculos com 7 de largura (W) e 7 de altura (H).

Figura 13
DESENHAR O LEME
26. Fora da área do avião, desenhe um rectângulo com as seguintes características:
a) Estilo da linha: Solid
b) Espessura: 0.5
c) Preenchimento: sem cor
27. Depois de desenhar o rectângulo defina no painel Properties 50 para a altura (H) e 30 para a
largura (W).
28. Arraste o rectângulo para cima do avião na posição igual a imagem da figura 14.

Figura 14
29. Apague as partes necessárias como na figura da figura 15.

Figura 15
30. Com a ferramenta Selection activa, transforme o leve de forma que fique conforme o desenho da figura 16.
31. Arredonde a traseira do avião.
 Criação de Animações 2D
Técnicas de Multimédia – 11ºano

Figura 16
DESENHAR A ASA DIANTEIRA
32. Active a ferramenta linha e desenhe, perto do avião, uma pequena linha horizontal que seja proporcional ao seu
avião.
33. Defina no painel Properties (Propriedades) a largura (W) 120 e a altura (H) 0.
34. Posicione a linha dentro do avião.
35. Transforme a linha numa curva como pode ver na figura 17.

Figura 17
36. Duplique a linha que acabou de transformar.
37. Inverta a cópia. Com a cópia seleccionada vá ao menu Modify > Transform > Flip Vertical
(Modificar – Transformar – Inverter Verticalmente).
38. Junte as duas linhas de forma que fique como ilustrado na figura 18.

Figura 18
39. Alongue a linha inferior de forma para criar a asa do avião, como ilustrado na figura 19.
40. Elimine a linha da parte interna da asa.

Figura 19
41. Elabore a asa traseira, utilizando a mesma técnica que utilizou para desenhar a asa dianteira.
Defina como tamanho da linha as medidas a largura (W) 45 e a altura (H) 0.

Figura 20
42. Atribua cor ao avião como pode visualizar na figura 21.
IMAGEM FINAL
 Criação de Animações 2D
Técnicas de Multimédia – 11ºano

Figura 21
43. Depois de pronto transforme o avião em símbolo, menu Modify > Convert to Symbol (F8).
44. Aplique a cor #00CCFF ao stage (palco).
45. Escreva o texto “viaje com a TAP”, com tipo de letra Arial, estilo Bold, tamanho 30 e cor
#FFFF00.
a) Com o botão direito do rato sobre o texto, escolha a opção Break Apart (o texto fica dividido
individualmente pelos caracteres que o constituem.
b) De seguida, aplique novamente o comando Break Apart para transformar os caracteres em vectorial.
c) Seleccione a ferramenta Ink Bottle e defina a cor de contorno #00FFFF e uma espessura de linha de 2
pt.
d) Aplique a nova cor de contorno a cada uma das letras do texto.
46. Seleccione todo o texto e utilize as opções Distort e Envelope (ferramenta Free Transform Tool) para obter o
efeito pretendido no texto. Agrupe o texto.
47. Componha os restantes grafismos ilustrados na figura 22.

Figura 22
48. Guarde o trabalho com o nome Avião.
 Criação de Animações 2D
Técnicas de Multimédia – 11ºano

EXERCÍCIO 2
OBJETIVOS: Animação frame-by-frame

Frame-By-Frame – é a técnica de animação mais trabalhosa, uma vez que obriga à criação de um
quadro de imagem diferente para cada frame da animação.

1) Crie um novo documento no Animate.

2) Para o ajudar na tarefa proposta para este exercício, faça:
a) View > Grid > Show Grid.
b) View > Grid > Edit Grid e insira (50 px) na vertical e na horizontal.
3) Desenhe um círculo com a ferramenta Oval (se mantiver o dedo na tecla SHIFT, enquanto desenha,
desenha um círculo perfeito):
a) Sem contornos.
b) Tamanho 100x100 pixéis.
c) Preenchimento radial
2) Coloque o círculo no canto superior esquerdo do stage.

Figura 4
3) Insira agora as seguintes keyframes na timeline 10, 20, 30, 40 e 50. Para isso estando na timeline no
frame pretendido, faça Insert > Timeline > Keyframe ou clique no botão do rato do lado direito e
selecione Insert Keyframe ou pressione a tecla F6.

Figura 5
4) Selecionando cada keyframe arraste a imagem para o sítio pretendido, como mostram as seguintes
figuras.
 Criação de Animações 2D
Técnicas de Multimédia – 11ºano

Figura 6 Figura 7

Figura 8 Figura 9

Figura 10 Figura 11

5) Veja o resultado e grave o seu trabalho com o nome bola-frame a frame.

 Criação de Animações 2D
Técnicas de Multimédia – 11ºano

EXERCÍCIO 3
OBJETIVOS: Animação motion guide

Motion Guide – ou movimento sobre uma guia, começa por ser semelhante à animação por Motion
Tween. A diferença é que a interpolação do movimento é feita sobre uma linha guia.

1. Crie um novo documento no Animate.

2. Altere as dimensões do stage (palco) para 1000x600 pixéis.
3. Na Camada 1 desenhe um boneco, no final agrupe-o.

Figura 1
4. Mude o nome da Camada para Boneco.
5. Na Camada Boneco insira uma keyframe na frame 30.
6. Insira agora a motion guide (botão direito do rato na camada Add Classic Motion guide).
7. Estando na frame 1 da nova Camada (Guide: boneco). Usando a ferramenta Pencil Tool, desenhe
uma linha, que pode ter a forma que desejar, inclusive sair do palco e voltar.

Figura 2
8. Na Camada boneco, frame 1 arraste o objecto para o início da linha guia e na frame 30 para o fim
da linha.
9. Seleccione na Camada boneco da frame 1 à frame 30 e faça Insert Classic Tween.
10. Teste a animação e grave-a, com o nome Boneco-Linha Guia.
 Criação de Animações 2D
Técnicas de Multimédia – 11ºano

EXERCÍCIO 4
OBJETIVOS: Animação tween shape e tween motion

Tween Shape – ou interpolação de formas. É uma técnica em que a animação é obtida a partir de uma
forma inicial e de uma forma final, com o programa a criar a interpolação das formas intermédias.
Tween Motion – ou interpolação de movimento, é a técnica de animação em que esta é obtida a partir de
uma posição inicial e uma posição final, com o programa a criar a interpolação das posições intermédias.

1. Crie um novo documento no Animate.

2. Altere as dimensões do stage (palco) para 450x200 pixéis; cor de fundo: #CCFF66.
3. Na Layer 1, frame1 desenhe um círculo.
a) Sem contornos.
b) Tamanho 70x70 pixéis.
c) Preenchimento radial, com o aspecto da figura 1.

Figura 1
4. Na Layer 1 frame 40 insira uma Blank keyframe.
5. Desenhe o objecto ilustrado na figura 2 usando um rectângulo.
a) Sem contornos.
b) Preenchimento radial.

Figura 2
6. Seleccione com o rato na Timeline da frame 1 à frame 40.
7. Crie uma Tween Shape no menu Insert + Shape Tween ou botão direito do rato sobre a seleção.

Figura 3
Figura 4
8. Teste a animação e grave-a, com o nome Interpolação de forma.
 Criação de Animações 2D
Técnicas de Multimédia – 11ºano

EXERCÍCIO 5
1. Crie um novo documento no Animate.
2. Altere as dimensões do stage (palco) para 450x200 pixéis.
3. Na Camada 1 desenhe uma linha e duas legendas de texto.
a. Espessura da linha 8; cor preta (#000000)
b. Texto: Arial; Estilo: Regular; Tamanho 12; Cor: preta; Alinhado à esquerda.

Figura 8
4. Na Camada 2 desenhe um círculo, que irá ficar posicionada no início na linha.
a) Sem contornos
b) Tamanho 80x80 pixéis
c) Preenchimento radial com o aspecto da figura 9.
d) Converta-o em símbolo.

Figura 9

Uma forma fácil de inserir uma frame é, estando na timeline na posição desejada, fazer
F5(frame) ou F6 (keyframe).

5. Na Camada 1 insira uma Frame na posição 24 (com isto criamos um conjunto de frames na
Camada 1 que nos vão permitir ver os objetos desta Camada ao longo dos 24 frames – duração da
animação). Proteja a Camada 1.
6. Na Camada 2 vai ser definida uma ação em que a esfera vai se deslocar na linha. Para isso
fazemos o seguinte estando na camada 2:
a) Na frame1, clique com o botão do rato do
lado direito escolha a opção Create a
Motion Tween.
b) Na frame 24, arraste o objeto para a
posição desejada, ou seja, no final da
linha.
7. Teste a animação e grave-a, com o nome
Interpolação de movimento.