Módulo 5: Criando Animação no Flash® CS3: 5.4 - Interpolação de forma

INTERPOLAÇÃO DE FORMA

Com a interpolação de forma podemos transformar uma forma em outra ao longo de um tempo determinado. A interpolação de forma funciona de modo inverso da interpolação de movimento, podemos criar animação de interpolação de forma para dados brutos, mas não podemos criá-la para instâncias de símbolos, itens agrupados ou bitmaps. Com este tipo de interpolação podemos alterar objetos vetoriais ao longo do tempo, em vez de se criar manualmente cada imagem a ser animada, simplesmente definimos o início, os pontos-chave onde haverá alteração da forma e o fim da animação.

O QUE DEVEMOS SABER ANTES DE CRIAR UMA INTERPOLAÇÃO DE FORMA

Não é possível interpolar formas de símbolos, formas agrupadas ou textos, nem em bitmaps que foram desmembrados. Se precisarmos interpolar forma de texto estático ou objetos armazenados em símbolos, primeiro devemos selecionar o objeto e em seguida clicar em Modify -> Break Apart, dessa forma estaremos convertendo os gráficos em objetos editáveis.

Clique no logo do Flash para ver o exercício pronto.

PASSOS BÁSICOS PARA CRIAÇÃO DE UMA INTERPOLAÇÃO DE FORMA

Ao criar interpolações de forma, tenha em mente o seguinte: esse tipo de interpolação produz arquivos maiores em função de não utilizar símbolos e sim formas vetoriais, dessa forma procure, sempre que possível trabalhar com formas simples.

1. Selecionamos a ferramenta de desenho no painel Tools e desenhamos uma forma.
2. Selecionamos outro quadro na linha do tempo (exemplo quadro 20) e clicamos em Insert -> Timeline -> Keyframe.
3. Ativamos o marcador de transparência pressionando o botão Onion Skin no painel Timeline.
4. Arrastamos o Onion Skin Marker esquerdo para sobrepor os quadros anteriores.
5. Selecionamos novamente a ferramenta de desenho no painel Tools e desenhamos outra forma no quadro 20.
6. Alinhamos a nova forma sobre a forma apresentada pelo Onion Skin.
7. Desativamos o Onion Skin, pressionando o botão Onion Skin na Timeline.
8. Clicamos na ferramenta Selection no painel Tools e selecionamos o quadro-chave 1.
9. No painel de propriedades na caixa com o rótulo Tween, selecionamos Shape para aplicar a interpolação de forma.
10. Clicamos em Control -> Test Movie para ver a animação (opcionalmente podemos usar teclas de atalho Ctrl + Enter).

CRIANDO UMA INTERPOLAÇÃO DE FORMA

1. Crie um novo arquivo no Flash CS3/CS4 e salve-o. Usando o painel de propriedades altere as dimensões do palco para 450x400 pixels a atribua cor preta ao background. Altere o frame rate para 20 fps;
2. Dê duplo clique sobre Layer1 e altere o nome para "animação";
3. Insira uma nova camada (Insert > Timeline > Layer) e altere seu nome para "texto";
4. Na camada "texto" clique sobre o frame 80 e pressione F5 para inserir quadros até essa posição. Repita esse procedimento na camada "animacao" para inserir quadros até a posição 80 da timeline;
5. No frame (quadro) 1 da camada "texto", usando a ferramenta Text escreva Interpolação de Forma (Shape Tween) e posicione o texto na parte superior do palco e centralizado;
6. No frame 1 da camada "animacao" usando a ferramenta PolyStar Tool, no painel de propriedades na opção Options... altere o estilo para star, número de lados 5 e star point size para 0.50 e dê OK;
7. Ainda no painel de propriedades da PolyStar tool altere a opção para "sem traço" e preenchimento gradiente azul (acessível também pelo painel Color Swatches). Desenhe a estrela redimensione-a para 50x50 pixels e a centralize no palco;

8. Insira um quadro-chave no frame 20 (pressione a tecla F6) e nesse quadro altere as dimensões da estrela para 394x394 pixels. Centralize-a no palco;


9. Clique entre o frame 1 e 20 da camada "animacao" e no painel de propriedades na opção Tween, selecione Shape. Os frames de 1 a 20 ficarão na cor verde. Até esse passo você já gerou a primeira animação de forma.
10. Clique no frame 25 da camada "animacao". Insira um novo quadro-chave nessa posição. Em seguida redimensione a forma da estrela para 5x5 pixels, com posição X em 229 e posição Y em 196 de forma a mantê-la centralizada no palco;
11. Clique com o botão direito do mouse entre o frame 20 e 25 e selecione Create Shape Tween no menu pop up. Já criamos a segunda parte da animação;
12. Insira um novo quadro-chave no frame 35. Em seguida redimensione novamente a estrela para 50x50 pixels, com X=206 e Y=176 de forma a mantê-a centralizada no palco; 
13. Clique com o botão direito do mouse entre o frame 25 e 35 e selecione Create Shape Tween no menu pop up. Já criamos a terceira parte da animação;
14. Clique no frame 45 da camada "animacao" e insira um novo quadro-chave (F6) nessa posição, em seguida mantendo a tecla Alt pressionada clique na estrela e arraste para criarmos cópias da mesma. Repita a operação de forma a criar várias estrelas no palco (oriente-se pela figura abaixo). Uma vez criadas as estrelas, altere a cor de algumas estrelas usando o painel Color Swatches escolhendo gradientes cinza, vermelho verde e azul. Por fim clique com o botão direito do mouse entre o frame 35 e 45 e escolha Create Shape Tween;


15. Clique no frame 80 e insira um novo quadro-chave. Apague todas as estrelas! Deixando o palco vazio. Em seguida clique no frame 35, copie a estrela que está nesse frame e cole-a no frame 80 usando as teclas CTRL+Shift+V para colá-la na mesma posição do frame 35. Em seguida clique com o botão direito do mouse entre o frame 45 e 80 e selecione Create Shape Tween.


16. Finalmente salve o trabalho e pressione Ctrl+Enter para observar a animação.

CONTROLE SOBRE AS MODIFICAÇÕES OCORRIDAS NA FORMA

A interpolação de forma pode produzir resultados inesperados, uma vez que o controle que temos sobre sua execução é limitado. Com isso a trajetória que uma parte específica da forma adota entre o início e o fim da interpolação pode não ser o que desejávamos.

Sugestão de exercício de fixação:

Repita o exercício acima, agora definindo atenuações aos movimentos da estrela. Use a atenuação in e out e veja a diferença.

Quem ficou com dúvidas, não conseguiu reproduzir algum procedimento demonstrado nos tópicos que compreende este módulo 5 ou não entendeu algum conceito, por favor poste a dúvida ou comentário logo abaixo.