Flash – Animando uma Borboleta

Conceitos a utilizar: Importação de imagem bitmap para o Flash; converter imagem em Símbolo; Converter imagem bitmap em imagem vetorial; Utilização de Réguas e Linhas guia; Agrupamento; Redimensionamento; Animação Quadro-a-Quadro; Animação por Interpolação; Animação com Motion Guide;

1. Inicie o Flash com novo documento em branco;
   
2. Importe a imagem Borboleta (File > Import > Import to Stage... – Ctrl + R) que se encontra na pasta do exercício para o palco como mostra a figura abaixo: 

3. Com a imagem borboleta no palco, converta-a em Símbolo (Modify > Convert to Symbol... – F8) com o Name (Nome) BorboletaMovie e Type (Tipo) Movie Clip;
   
4. Com o símbolo BorboletaMovie selecionado, clique em Edit > Edit in Place, para editá-lo;
   
5. Estando no modo de edição, clique no menu Modify > Bitmap > Trace Bitmap...;
   
6. Na janela Trace Bitmap, configure as opções como na figura abaixo:

Obs: Se quiser um resultado melhor na vetorização, diminua os valores dos campos Color threshold e Minimum area. Vale lembrar que, quanto maior for o nível de detalhe, maior será também o tamanho do arquivo final.

7. Selecione a asa direita da borboleta como mostra na imagem abaixo:

8. Pressione Ctrl + G para agrupar a área selecionada;
   
9. Selecione a asa direita da borboleta como mostra a imagem abaixo:

10. Pressione Ctrl + G para agrupar a área selecionada;
    
11. Selecione toda a borboleta e utilizando a tecla Shift, clique na asa esquerda e depois na direita para remover a seleção das mesmas ficando somente com o centro da borboleta selecionado como mostra a imagem abaixo:

12. Pressione Ctrl + G para agrupar a área selecionada;
    
13. Habilite as réguas através do menu View > Rules – Ctrl + Alt + Shift + R;
    
14. Com as réguas sendo exibidas, clique sobre a parte numérica das mesmas e arraste linhas guia para cima da imagem como mostra a figura abaixo:

15. Insira um Keyframe (Quadro-chave) no quadro dois da linha do tempo;
    
16. Clique numa área vazia do palco para desfazer a seleção de toda a imagem e em seguida clique na asa esquerda da borboleta, como mostra a figura abaixo:

17. Com a asa esquerda selecionada, clique na ferramenta Free Transform na barra de ferramentas ou pressione “Q” no teclado para alterar a forma da asa como mostra a imagem abaixo: 

 

18. Selecione agora a asa direita e a redimensione como mostra a figura abaixo:

19. Repita a seqüência de passos desde o 15 até 18 até que alinha do tempo e as duas asas fiquem como na figura abaixo:

20. Clique com o botão direito no terceiro quadro da linha do tempo e clique em seguida na opção Copy Frames;
    
21. Clique no quadro cinco da linha do tempo com o botão direito do mouse e clique em seguida na opção Paste Frames;
    
22. Clique com o botão direito no segundo quadro da linha do tempo e clique em seguida na opção Copy Frames;
    
23. Clique no quadro seis da linha do tempo com o botão direito do mouse e clique em seguida na opção Paste Frames;
    
24. Sua linha do tempo deverá ficar como a da imagem abaixo:

25. Volte para a Scene 1 (Cena 1) menu Edit > Edit Document – Ctrl + E;
    
26. Selecione a ferramenta Free Transform na barra de ferramenta ou pressione “Q” no teclado;
    
27. Altere o tamanho da imagem e posicione-a na parte inferior esquerda do palco como na imagem abaixo:
    

28. Clique com o botão direito do mouse no quadro 30 da linha do tempo e insira um Keyframe (Quadro-chave);
    
29. Clique com o botão direito do mouse no quadro um da linha do tempo e clique na opção Create Motion Tween;
    
30. Clique no quadro 30 da linha do tempo para selecioná-lo e arraste a borboleta para a parte direita superior do palco, como mostra a figura abaixo:

31. Clique com o botão direito do mouse em cima da Layer 1 na linha do tempo e clique em seguida na opção Add Motion Guide;
    
32. Clique no primeiro quadro da linha do tempo da camada Guide Layer 1 para selecioná-lo;
    
33. Selecione a ferramenta Pencil na barra de ferramentas ou pressione “Y” no teclado;
    
34. Em Options na barra de ferramentas, selecione a opção Smooth;
    
35. Clique sobre a borboleta e desenhe um caminho como na figura abaixo:

36. Teste a animação pressionando Ctrl + Enter;
    
37. Se a borboleta não seguir o caminho, tente posicionar o ponto central dela exatamente no início da linha (quadro1 da linha do tempo) e no final da linha também (quadro 30 da linha do tempo), como mostra a imagem abaixo:

38. A animação está pronta!!!