Módulo 5: Criando Animação no Flash® CS3: 5.3 - Guia de Movimento (Motion Guide)

Como criar um motion guide

Utilizamos um Motion Guide (Guia de Movimento), para desenhar o caminho que um objeto deve percorrer durante a interpolação. Há duas maneiras de se fazer:

• Através do painel Layers, clicando no botão Add Motion Guide.
• Através do menu principal, clicando em Insert -> Timeline -> Motion Guide.

Clique no logo do Flash para ver a animação pronta.

Criando um Guia de Movimento na Camada Motion Guide

Os passos para criarmos um guia de movimento na camada motion guide:

1. Utilizamos uma das ferramentas de desenho do painel tools do Flash® CS3 para desenharmos um caminho do quadro-chave inicial até o quadro-chave final na camada Motion Guide.
2. Certifique-se de estar usando o modelo de criação de formas Merge Drawing, pois Motion Guides não funcionam em formas criadas com Object Drawing.
3. Desenhe o caminho desejado usando uma cor diferente, apenas para facilitar a visualização no Stage.
4. Utilize a ferramenta Selection para anexar os gráficos ao guia nos quadros-chave inicial e final.

Criando Interpolação de Movimento com Motion Guide.

1. Crie novo arquivo no Flash CS3/CS4 modifique a camada Layer1 para "Background", modifique o tamanho do palco para  450 x 400 pixels e importe (File > Import ) para essa camada a imagem "Montanhas Azuis" da pasta amostra de imagens do Windows, ou escolha outra imagem de sua preferência atribua a essa imagem o tamanho de 440 x 390 pixels usando o Inspetor de Propriedades;
2. Crie uma segunda camada (Insert > Timeline > Layer) e atribua a essa nova camada o nome de "Bola";
3. Clique com o botão direito do mouse sobre a camada "Bola" e selecione a opção Add Motion Guide no menu pop up;
4. Clique na camada "Bola" e na caixa de ferramentas selecione a ferramenta oval, no painel Color selecione a Aba Swatches e selecione a bola azul no formato tridimensional, usando o painel de propriedades atribua a essa bola o tamanho de 14x14 pixels e a transforme em movie clip  clicando sobre ela e pressionando o botão F8, atribua o nome de bola_mc e ponto de registro no centro;

Painel Color
5. Clique na camada "Guide: Bola" e desenhe uma linha com altos e baixos conforme a sugerida no desenho abaixo;


Inserindo motion guide
6. Insira quadros-chave até o frame 30 (clique no frame 30 e pressione a tecla F5) de cada uma das três camadas, clique na camada "Bola" no frame 1 arraste a bola até o início da linha de forma que o ponto de registro de bola_mc toque no inicio da linha;
7. Clique no frame 30 e insira um outro quadro-chave nesse frame, em seguida arraste bola_mc até a outra ponta da linha, faça com que o ponto de registro de bola_mc coincida com o final da linha;
8. Clique com o botão direito do mouse entre o frame 1 e 30 da camada "Bola" e selecione Create Motion Tween conforme a figura abaixo;
  Inserindo interpolação de movimento A visão final da área de trabalho

9. Clique Ctrl + Enter para visualizar a animação. A bola deve percorrer o caminho desenhado na camada "Guide: Bola".

Aplicativo rodando

Atribuindo atenuação à interpolação de movimento

Podemos melhorar o exercício acima atribuindo atenuação de movimento, para isso podemos usar o painel de propriedades para atribuir atenuação a nossa interpolação de movimento clicando no botão Edit da caixa Ease, com isso podemos obter efeitos tipo de gravidade, acelerar ou retardar movimentos. Por padrão a atenuação é 0, ou seja, sem atenuação. Se movermos o controle deslizante Ease para cima – valores entre 1 e 100, obteremos uma animação mais rápida e depois ela desacelera no fim da interpolação. Já valores negativos entre -1 e -100 inicia a animação mais lentamente e faz com que ela se torne mais rápida no fim da interpolação. Qualquer que seja a opção, a animação será executada durante o mesmo período de tempo.

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

Repita o exercício acima, agora definindo atenuações aos movimentos da bola_mc. 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.