Tcnicas de Multimdia

Animao 2D Avanada Ferramenta Bone Tool

Ficha de Trabalho n 4

1. Cria na pasta Documentos Comuns de alunos -> 11 Tcnico de Multimdia -> Tcnicas de Multimdia
-> Mdulo 10 -> Atividade N4, uma nova pasta com o teu nome. Dentro desta deves guardar cada um dos exerccios que se seguem.

2. Abre o programa Flash Professional CS5. Cria um novo documento (New Document ActionScrip 3.0). 3. Ativa as Rguas. 4. Aplica a cor Branco de fundo e resoluo 800 x 450 pixis. 5. No menu View -> Grid -> Edit Grid... - Grelha - 10px x 10 px. 6. Ativa a opo Anti-alias Text. 7. Guarda o ficheiro como Atividade N4_Nome_N.fla. Faz gravaes peridicas do trabalho. 8. Importa para o stage o documento elementos.ai. 9. Seleciona cada elemento e converte-o em movieclip. Para manteres a tua library organizada deves guard-los da seguinte forma (da esquerda para a direita, de cima para baixo):

2 3 1

4 5

6 7

8 9

10 11

12 13

14 16 15

17 19 18

20

21 22

23 24

1 - mc_magenta 2 - mc_verde_escuro_g1 3 - mc_verde_escuro_p1 4 - mc_amarelo_g1 5 - mc_amarelo_p1 6 - mc_vermelho_g1 7 - mc_vermelho_p1 8 - mc_azul_g1

9 - mc_azul_p1 10 - mc_verde_claro_g1 11 - mc_verde_claro_p1 12 - mc_verde_escuro_p2 13 - mc_verde_escuro_g2 14 - mc_amarelo_p2 15 - mc_amarelo_g2 16 - mc_amarelo_m

17 - mc_vermelho_p2 18 - mc_vermelho_g2 19 - mc_vermelho_m 20 - mc_azul_p2 21 - mc_azul_m 22 - mc_azul_g2 23 - mc_verde_claro_p2 24 - mc_verde_claro_g2

Pgina

Tcnicas de Multimdia Mdulo 10 - Edio 2D Avanada

10. Seguindo o exemplo, coloca uma guia a 300px, para comeares a construir a palavra MULTIMDIA com os elementos movieclip. No final da palavra escrita dimensiona-se dimen ao stage. Aplica os elementos com um parafuso nas terminaes, rodando-os. rodando os. Verifica se a opo snapping (no menu View) est ativa nos objects e desativa nas Guides. Nota que a letra A fica ligeiramente mais pequena que as restantes, deves posicion-la posicio a meio das restantes verticalmente.

11. Reduz proporcionalmente as letras e converte cada uma num movieclip: mc_M; mc_U; mc_L; mc_T; mc_I; mc_M2; mc_E; mc_D; mc_I2; mc_A

Nota que a designao dada aos movieclips ser depois a aplicada no script, pelo que deves ter o mximo cuidado a nome-los. nome los. Atribui o mesmo nome s instncias do stage, nas propriedades (Instance Name).

12. Altera o nome da Layer, no stage, para Letras. 13. Seleciona o movieclip mc_M. Faz duplo clique para o puderes editar. Adiciona Adic uma blank Keyframe antes da letra. Aplica a Bone Tool na letra M, da esquerda para a direita seguindo a estrutura da letra, fazendo os segmentos at cada articulao. Na frame 26 adiciona uma Pose. Articula a letra amontoando-a. a. Verifica o resultado. Para que fique mais movimentado adiciona uma Pose na frame 10 e move as articulaes. Seleciona as

11 ANO PROFISSIONAL TCNICO DE MULTIMDIA

2012-2013

frames da Layer Armature e com o boto direito do rato seleciona Reverse Frames. Verifica o resultado e adiciona uma pose a meio caso seja necessrio aumentar aumentar a movimentao da letra. Adiciona uma nova layer altera-lhe altera o nome para Actions, adiciona uma keyframe na frame 26 e aplica-lhe um stop: stop(); Aproxima o mais possvel do exemplo dado. Faz a mesma operao para os movieclips das letras U, L, I, M, D e I as letras T, e A necessitam de outros passos. 14. Seleciona o movieclip mc_A. Para a letra A e semelhana das anteriores, tambm deves colocar uma keyframe em branco antes da letra. Cria uma nova Layer, , adiciona-lhe adiciona lhe uma keyframe semelhana da Layer 1 e copia o A (da Layer 1) e cola-o o na Layer 2 (Paste in Place), fazendo com que fiquem sobrepostos, em layers diferentes. Oculta a Layer 2, permitindo-te permitindo trabalhar a ferramenta Bone Tool sem conflitos com os objetos das duas layers. 15. Na Layer 1 elimina os elementos lementos como no exemplo:

Oculta agora a Layer 1.

16. Na Layer 2 elimina os elementos como no exemplo:

Oculta agora a Layer 2.

17. Na Layer 1, desoculta, podes aplicar o Bone Tool da mesma forma linear. Oculta quando terminares. Coloca uma pose na frame 20, criar a posio final e adicionar frames (iguais pose da frame 20) at frame 40.

AGRUPAMENTO DE ESCOLAS AS DE PORTO DE MS 3

18. Adiciona na Layer 2, 19 frames, antes da frame que tem o segundo grupo de elementos da letra A. 19. Uma vez que temos um centro mas duas ramificaes ramificaes necessitamos de um ponto fictcio mas invisvel. Na Layer 2, frame 20, cria um novo movieclip chamado Blank como mostra no exemplo e posiciona-o o da mesma forma (cor preta 25px x 25px). Agora aplica a ferramenta Bone Tool como mostra o exemplo: Com o movieclip Blank selecionado clica Crtl, verificas que surge um cone diferente no stio da seta do rato. Move o movieclip Blank para cima do centro, com esta opo podes animar os elementos separadamente. Manipula agora o esqueleto da letra semelhana do exemplo (Atividade N4.fla). N

1 2 3

20. Para que a letra se forme semelhana das anteriores deves ambas as animaes, seleciona os frames da Layer 1 e com o boto direito do rato seleciona Reverse Frames. Faz o mesmo com as frames s animadas da Layer 2. O resultado das diferentes layers dever ser semelhante imagem. Podes adicionar poses de forma a que a transio seja mais fluda.

11 ANO PROFISSIONAL TCNICO DE MULTIMDIA

2012-2013

21. Deves proceder de forma semelhante com as letras T e , utilizando o movieclip Blank como centro de rotao das poses dos elementos.

(Letra T antes de mover o movieclip Blank)

22. Depois de fazeres a letra abre o movieclip Blank e altera o alpha (da cor) a zero. 23. Adiciona a cada movieclip letra uma nova Layer, atribui-lhe o nome Aes, com uma keyframe no fim e uma ao de Stop (sobre a ltima frame da armature Layer).

24. Visualiza o ficheiro Swf. Deves ter as letras a surgiram em simultneo e a pararem no fim. 25. Bloqueia a Layer letras. 26. No stage, adiciona uma Layer e altera-lhe altera o nome para Fundo. Importa para a Library a imagem Fundo.png. Aplica a imagem e dimensiona-a a ao stage. Verifica se est bem posicionado e atrs do movieclip. 27. Cria uma layer Actions, copia o script e cola-o cola o na frame 1, o objetivo que as letras surjam uma de cada vez. Aplica o script:
mc_U.stop(); mc_L.stop(); mc_T.stop(); mc_I.stop(); mc_M2.stop(); mc_E.stop(); mc_D.stop(); mc_I2.stop(); mc_A.stop(); addEventListener(Event.ENTER_FRAME, fl_EnterFrameHandler); function fl_EnterFrameHandler(event:Event):void { if ((mc_M.currentFrame==mc_M.totalFrames) && (mc_U.currentFrame !== mc_U.totalFrames)){ mc_U.play(); } else if ((mc_U.currentFrame==mc_U.totalFrames) && (mc_L.currentFrame !== mc_L.totalFrames)){ mc_U.stop();

AGRUPAMENTO DE ESCOLAS AS DE PORTO DE MS 5

mc_L.play(); } else if ((mc_L.currentFrame==mc_L.totalFrames) && (mc_T.currentFrame !== mc_T.totalFrames)){ mc_L.stop(); mc_T.play(); } else if ((mc_T.currentFrame==mc_T.totalFrames) && (mc_I.currentFrame !== mc_I.totalFrames)){ mc_T.stop(); mc_I.play(); } else if ((mc_I.currentFrame==mc_I.totalFrames) && (mc_M2.currentFrame !== mc_M2.totalFrames)){ mc_I.stop(); mc_M2.play(); } else if ((mc_M2.currentFrame==mc_M2.totalFrames) && (mc_E.currentFrame !== mc_E.totalFrames)){ mc_M2.stop(); mc_E.play(); } else if ((mc_E.currentFrame==mc_E.totalFrames) && (mc_D.currentFrame !== mc_D.totalFrames)){ mc_E.stop(); mc_D.play(); } else if ((mc_D.currentFrame==mc_D.totalFrames) && (mc_I2.currentFrame !== mc_I2.totalFrames)){ mc_D.stop(); mc_I2.play(); } else if ((mc_I2.currentFrame==mc_I2.totalFrames) && (mc_A.currentFrame !== mc_A.totalFrames)){ mc_I2.stop(); mc_A.play(); } }

O script indica a ordem de entrada de cada letra.

28. Verifica se todas as instncias tm o mesmo nome indicado no script. Podes alterar apenas no script em vez de alterares a instncia.

Verifica o resultado e guarda o trabalho. Exporta como swf.

Bom Trabalho! As Formadoras, Aline Mendes e Dina Duarte