Flash – Animando uma Borboleta
Autor: Rodrigo Freitas | Publicado: 2011-07-17T11:05:00-07:00

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; 
Inicie o Flash com novo documento em branco;

Importe a imagem Borboleta (File &gt; Import &gt; Import to Stage... – Ctrl + R) que se encontra na pasta do exercício para o palco como mostra a figura abaixo:&nbsp;


Com a imagem borboleta no palco, converta-a em Símbolo (Modify &gt; Convert to Symbol... – F8) com o Name (Nome) BorboletaMovie e Type (Tipo) Movie Clip;

Com o símbolo BorboletaMovie selecionado, clique em Edit &gt; Edit in Place, para editá-lo;

Estando no modo de edição, clique no menu Modify &gt; Bitmap &gt; Trace Bitmap...;

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. 
Selecione a asa direita da borboleta como mostra na imagem abaixo: 
Pressione Ctrl + G para agrupar a área selecionada;

Selecione a asa direita da borboleta como mostra a imagem abaixo: 

Pressione Ctrl + G para agrupar a área selecionada;

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: 
 
Pressione Ctrl + G para agrupar a área selecionada;

Habilite as réguas através do menu View &gt; Rules – Ctrl + Alt + Shift + R;

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: 

Insira um Keyframe (Quadro-chave) no quadro dois da linha do tempo;

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: 

 
  
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:&nbsp;
&nbsp;



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

 
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: 

 
  
Clique com o botão direito no terceiro quadro da linha do tempo e clique em seguida na opção Copy Frames;

Clique no quadro cinco da linha do tempo com o botão direito do mouse e clique em seguida na opção Paste Frames;

Clique com o botão direito no segundo quadro da linha do tempo e clique em seguida na opção Copy Frames;

Clique no quadro seis da linha do tempo com o botão direito do mouse e clique em seguida na opção Paste Frames;

Sua linha do tempo deverá ficar como a da imagem abaixo: 

Volte para a Scene 1 (Cena 1) menu Edit &gt; Edit Document – Ctrl + E;

Selecione a ferramenta Free Transform na barra de ferramenta ou pressione “Q” no teclado;

Altere o tamanho da imagem e posicione-a na parte inferior esquerda do palco como na imagem abaixo:

 
Clique com o botão direito do mouse no quadro 30 da linha do tempo e insira um Keyframe (Quadro-chave);

Clique com o botão direito do mouse no quadro um da linha do tempo e clique na opção Create Motion Tween;

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: 

 
  
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;

Clique no primeiro quadro da linha do tempo da camada Guide Layer 1 para selecioná-lo;

Selecione a ferramenta Pencil na barra de ferramentas ou pressione “Y” no teclado;

Em Options na barra de ferramentas, selecione a opção Smooth;

Clique sobre a borboleta e desenhe um caminho como na figura abaixo: 

 
Teste a animação pressionando Ctrl + Enter;

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: 


 
  
A animação está pronta!!!