2.5.2 - Tweening. Animação linear

O Tweening é a principal forma de animação do Flash. Basta definir o quadro chave inicial e o quadro chave final de cada animação ou bloco da animação.

2.5.2.1 - Começaremos com a Criação de um símbolo em nossa biblioteca Flash.

Depois de introduzidos os conceitos básicos do Flash, vamos colocar em prática alguns deles para nos familiarizarmos com a interface.

Começemos gerando um documento em branco:

File > New

Como podemos observar na linha de tempo, nossa animação consta de uma só camada (layer) e um único keyframe representado por um retângulo com um círculo.

Este círculo significa que se trata de um fotograma que contém uma imagem chave vazia.

A animação que pretendemos criar consiste em um movimento de translação de uma esfera com uma trajetória elíptica. Sendo assim, o primeiro que devemos fazer é desenhar a esfera.

Começemos criando a esfera diretamente como um símbolo em nossa biblioteca.

Window > Library

Para inserir um símbolo podemos faze-lo a partir do botão com uma cruz situada na parte inferior esquerda da janela da biblioteca, ou então ir à barra de menus:

Insert > New Símbol

Uma nova janela de diálogo aparece. Nela poderemos definir o nome e o comportamento (gráfico).

Para desenhar a esfera vamos usar Tool > Oval Tool.

Com o botão esquerdo do mouse selecionado e deslocando o mouse para qualquer direção, desenhamos a esfera.

No menu de ferramentas Colors selecione a cor com o tipo de preenchimento (degradée), para dar a sensação de perspectiva à esfera.

Ou então utilize

Window > Design Panels > Color Mixer

Com as ferramentas de pintura obtemos a esfera com a pintura desejada.

Vamos incluir no primeiro keyframe o símbolo que acabamos de criar.

Antes de nada, iremos à biblioteca (se tiver fechada poderá ser aberta com Window > Library ) e selecionaremos o símbolo esfera.

Observe a diferença entre o palco (onde você trabalha editando e construindo símbolos) e o espaço onde cada símbolo se apresenta para edição. Eles são muito parecidos. A diferença está no botão de identificação.

A seguir, clicamos e arrastamos o símbolo até o palco, criando o keyframe inicial.

Para criarmos o keyframe seguinte ou final tiramos o primeiro símbolo da seleção, selecionamos a posição correspondente ou final no Layer e arrastamos o símbolo da biblioteca ou do painel de animação para a posição requerida.

Como dissemos, pretendemos simular um movimento de translação da esfera com uma trajetória elíptica, dando a impressão de um círculo em perspectiva. Obedecemos aos seguintes passos:

1. Criamos a guia de movimento, selecionando o ícone de Add Motion Guide. Constatamos o aparecimento de uma nova camada Guide: Layer Name.

2. Selecionando Oval Tool, após a criação da guia, desenhamos uma elipse no painel de animação. Clicando na elipse, deletamos a sua parte interior, ficando apenas a borda ou fronteira que servirá de caminho para a animação.

3. Selecionando um retângulo intermediário entre a posição inicial e a posição seguinte, pressionando o botão direito do mouse, escolhemos a opção Create Motion Tween para criar a interpolação do movimento. Repetimos este processo até o último keyframe.

Para ver o movimento pressione Enter.

Se não funcionar selecione Control > Loop Playback e tecle Enter para executar a animação e Enter para parar.

2.5.2.2 - Aceleração e desaceleração.

Se você quizer que a velocidade seja constante no início e haja uma desaceleração, deverá editar o tweening. Selecione o keyframe 1 e no painel Frame, na opção Ease digite 100.

Para conseguir o efeito oposto, fazer com que o elemento inicie o percurso lentamente e apresente uma aceleração, em Ease digite -100.

Se você quizer criar uma aceleração no início e uma desaceleração no final, deverá dividir o processo em duas sequências, criando um keyframe intermediário.

2.5.3 - Rotação.

Você pode também usar o tweening para fazer um objeto girar. Inicie um novo projeto.

Com o ponteiro no keyframe 1 desenhe um círculo, divida-o ao meio e pinte cada metade de uma cor.

Com o botão direito do mouse insira um keyframe na posição 40 da linha de tempo. Selecione o objeto colocado na posição do keyframe 1 e desloque-o para a posição desejada.

Com o botão direito do mouse no keyframe 1 selecione a opção Create Motion Tween.

Clique no painel de Instâncias e selecione o painel Frame. Na opção Rotate selecione Clockwise (CW) e digite o número de giros que o objeto efetuará no percurso.

2.5.4 - Movimento sobre um caminho irregular definido.

Inicie um novo projeto.

Com o ponteiro no keyframe 1 desenhe um novo objeto.

Selecione Insert > Timeline > Motion Guide ou Add Motion Guide

Na posição 40 da camada da guia gerada insira um keyframe com o botão direito do mouse (Insert keyframe).

Selecione o quadro 1 da Guia (Guide: Layer Name). Com o ícone da linha ou do lápis selecionado desenhe um caminho a partir do centro do objeto do keyframe 1.

Com o botão direito do mouse insira um keyframe na posição 40 do Layer na linha de tempo. Selecione o objeto colocado na posição do keyframe 1 e desloque-o para a posição desejada.

Com o botão direito do mouse no keyframe 1 e Selection Tool selecione a opção Create Motion Tween. Faça o mesmo com o keyframe 40.

Para ver o movimento pressione Enter.

Se não funcionar selecione Control > Loop Playback e tecle Enter para executar a animação e Enter para parar.

Se quizer ocultar a guia do percurso, clique sobre o ponto localizado logo abaixo do ícone do olho na camada da Guia.