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

O QUE É ANIMAÇÃO

Uma animação em Flash® CS3 é uma seqüência de imagens gráficas posicionadas de forma ligeiramente diferente da anterior em quadros (frames) do Painel Timeline, de forma a criar a ilusão de movimento e/ou alteração de forma.

A TIMELINE

É a timeline (linha do tempo) que nos possibilita gerar as animações. Ela é dividida em quadros, por padrão a reprodução começa sempre no quadro 1 e se move pelos quadros seguintes até alcançar o último quadro do documento. Cada timeline tem sua própria camada.
 

FIGURA 5.1 - TIMELINE

OS TIPOS DE ANIMAÇÃO NO FLASH® CS3

Para se criar animações no Flash® CS3 normalmente utilizamos uma das três opções abaixo:

• Interpolação de movimento (motion tween transition): Usadas para alterar a posição de um objeto ao longo de um tempo determinado, através da definição dos pontos iniciais (aqueles onde ocorrerão alterações) e do ponto final nos quadros-chave. Ao ser aplicado o Flash® CS3 desenha as etapas intermediárias, produzindo um efeito de movimento.
• Interpolação de forma (shape tween transition): Usadas para alterar a forma de um objeto ao longo de um tempo determinado, através da definição dos pontos iniciais (aqueles onde ocorrerão alterações) e do ponto final nos quadros-chave. Ao ser aplicado o Flash® CS3 desenha as etapas intermediárias, produzindo um efeito de alteração de forma do objeto.
• Animação quadro a quadro (frame to frame transition): Usadas para alterar a posição e/ou a forma de um objeto ao longo de determinado período de tempo, através da criação manual de cada um dos quadros, tendo como efeito final a produção de movimento e/ou alteração de forma, só que de maneira mais controlada e com efeitos mais sofisticados.

INTERPOLAÇÃO DE MOVIMENTO

A aplicação de uma interpolação de movimento preenche todos os quadros entre os pontos iniciais e finais, sendo que só é possível interpolar movimentos de instâncias de símbolos. Em uma interpolação de movimento você cria animação simplesmente modificando instâncias de símbolos em diferentes quadros-chave da Timeline. Com a interpolação de movimento podemos alterar a posição de um objeto em determinado período de tempo, também podemos alterar propriedades, tais como: dimensões, rotação, tonalidades e transparência. Na imagem abaixo, temos um exemplo de Interpolação de Movimento (Motion Tween), onde em cada Quadro-chave (1, 10, 20, 30 e 40) fora modificada a posição e a transparência (Alpha) do símbolo.

FIGURA 5 2 –QUADROS-CHAVE PARA CRIAR INTERPOLAÇÃO DE MOVIMENTOS

O QUE DEVEMOS SABER PARA CRIAR UMA INTERPOLAÇÃO DE MOVIMENTO

• Utilize o palco para adicionar ou modificar instância de símbolo nos quadros-chave no início e no final da transição da interpolação de movimento.
• A interpolação de movimento aplicada aos quadros entre os quadros-chave move a instância de símbolo do quadro-chave inicial até o quadro-chave final.
• A interpolação de movimento também pode: girar, redimensionar e inclinar a instância entre os quadros inicial e final.
• A interpolação de movimento pode ser usada para alterar o alfa, o brilho e a tonalidade do símbolo ao longo do tempo.

ADICIONANDO QUADROS-CHAVE (KEYFRAMES) À TIMELINE

Um quadro-chave é um tipo de quadro onde adicionamos símbolos ou outras propriedades a uma timeline de determinada camada.  Ao inserir um quadro-chave em novos quadros, a propriedade do quadro-chave anterior é copiada para o novo quadro-chave. Ao abrirmos um novo arquivo no Flash® CS3 automaticamente é inserido um quadro-chave no frame (quadro) 1 da Layer 1 (Camada 1). Para inserirmos outros quadros-chave em outros locais da timeline, selecionamos o quadro desejado e no menu principal clicamos em

Opcionalmente podemos clicar no quadro desejado usar a tecla de atalho F6 para a inserção do quadro-chave.

ADICIONANDO QUADROS (FRAMES) À TIMELINE

Uma animação normalmente se estende por vários quadros. Quando o arquivo contiver (e normalmente contém) mais de uma camada, pode ser necessário estender suas timelines para que o conteúdo desta camada fique visível pelo mesmo tempo das camadas com animação. Para estender uma timeline inserimos um quadro no mesmo local do quadro da camada que contém a animação. Essa ação estende a visibilidade dos objetos que estejam nessa camada. Ao contrário dos quadros-chave, não é possível editar o conteúdo de um quadro normal. Para inserirmos quadros em outros locais da timeline, selecionamos o quadro desejado e no menu principal clicamos em

Opcionalmente podemos usar a tecla de atalho F5 para a inserção de quadros (frames).

IDENTIFICANDO QUADROS-CHAVE

Um círculo vazio é exibido em um quadro-chave quando ele não tem conteúdo. Um quadro-chave sem conteúdo é chamado de blank keyframe (quadro-chave em branco). Quando o quadro-chave tem conteúdo um círculo sólido é exibido.

CRIANDO UMA INTERPOLAÇÃO DE MOVIMENTO: OS PASSOS BÁSICOS

1. Selecionamos o quadro-chave onde começará a animação em uma timeline da camada e arrastamos uma instância de um símbolo da biblioteca até o quadro-chave, ou criamos diretamente um símbolo nesse quadro.
2. Fazemos as modificações nas propriedades da instância do símbolo para descrever a forma como queremos que se inicie a animação, também conhecida como começo da posição de interpolação de movimento.
3. Clicamos no quadro onde a animação deve terminar e no menu principal selecionamos Insert -> Timeline -> Keyframe.
4. Fazemos as modificações nas propriedades da instância do símbolo para descrever a forma como queremos que termine a animação.
5. Voltamos ao quadro-chave onde a animação começará e clicamos nele.
6. No painel de propriedades na caixa Tween, selecionamos Motion para aplicar a interpolação de movimento.

DEFININDO A DIREÇÃO E O GRAU DE ROTAÇÃO EM UMA INTERPOLAÇÃO DE MOVIMENTO

Em uma interpolação de movimento, também podemos definir a direção e o grau de rotação do símbolo selecionado, existem quatro opções:

• None
• Auto: item girado na direção que requer o menor grau de movimento.
• CW: gira o objeto o número especificado de vezes no sentido horário.
• CCW: gira o objeto o número especificado de vezes no sentido anti-horário.

CRIANDO INTERPOLAÇÃO DE MOVIMENTO

1. Inicie um novo arquivo Flash, crie uma bola com 40x40 pixels e cor de sua preferência e a transforme em símbolo de movie clip, dê a essa camada o nome de “bola”;
2. Crie uma segunda camada e a posicione abaixo da camada “bola”, atribua a essa nova camada o nome de “quadro” e crie um quadro de 336x265 pixels. Atribua ao preenchimento desse quadro uma cor diferente da atribuída à bola. Clique no frame 40 e pressione F5 para inserir quadros até essa posição.
3. No frame 1 posicione a bola no centro esquerdo. Crie um novo quadro-chave no Frame 10 e nesse quadro posicione a bola no centro superior sempre fazendo com que a borda da bola toque ligeiramente a linha do quadro e atribua um alpha de 50%. Entre o frame 1 e 10, clique em Insert > Timeline > Create Motion Tween.
4. Crie um novo quadro-chave no frame 20 e posicione novamente a bola no centro direito do quadro, atribua um alpha de 30%. Clique entre o frame 10 e 20 e em seguida clique em Insert > Timeline > Create Motion Tween.
5. Crie um novo quadro-chave no frame 30, posicionando a bola no centro inferior do quadro e atribua alpha de 50%. Clique entre o frame 20 e 30 e em seguida clique em Insert > Timeline > Create Motion Tween.
6. Crie um novo quadro-chave no frame 40 e posicione a bola novamente no centro esquerdo do quadro, Agora o alpha deve ser de 100%. Clique entre o frame 30 e 40 e em seguida clique em Insert > Timeline > Create Motion Tween para finalizar a animação.
7. Salve o arquivo e clique em CTRL + Enter ou clique no Menu Control > Test Movie para visualizar a animação criada.

Quando por algum motivo a interpolação de movimento não puder ser criada, o Flash® CS3 indicará o erro através da aparição de uma linha tracejada na linha do tempo da camada onde estiver a animação. Por exemplo: se você tentar aplicar interpolação de movimento a formas brutas que não sejam instância de símbolo, a linha do tempo e o painel de propriedades exibirão erros.

INTERPOLAÇÃO DE BRILHO VERSUS INTERPOLAÇÃO ALFA

Dê preferência (sempre que possível) à interpolação de brilho, pois a interpolação de alfa, principalmente nos bitmaps, consome muito mais recursos do processador do que as de brilho. Isso ocorre porque o Flash® CS3 precisa fazer muito mais cálculos na interpolação de uma transparência do que na interpolação de uma cor. Contudo isso não quer dizer que você nunca deva usar a interpolação alfa, existem situações em que ela é bem vinda e cria efeitos interessantes, tipo um fade in fade out. Lembre-se o valor de alfa 0 torna o objeto totalmente transparente, já o valor 100 o torna totalmente visível.

EXERCÍCIO PRÁTICO: CRIANDO UMA INTERPOLAÇÃO DE MOVIMENTO

FIGURA 5. 3 – EXECUTANDO INTERPOLAÇAO DE MOVIMENTO

O exercício pronto!

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

Crie outras animações usando os conceitos vistos nessa aula.

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.