Autor: Rodrigo Gonçalves

Tema: Loop de animação com rotação no Flash CS3.
Versão: Flash CS3. Poderá utilizar versões anteriores também.
Dificuldade: Básico.
Obs: Para um bom aproveitamento deste artigo é interessante ter conhecimentos básicos de funcionamento do Flash, conhecimentos de símbolos e animação Motion Tween.

Vamos ver um pouco sobre loop de animação com rotação no Flash CS3. É algo bastante simples. Mas, que já conseguimos criar coisas legais apenas utilizando conceitos de Tween Motion(ou Motion Tween), e que pode ser bastante utilizado para diversos fins da animação com o Flash.
Estamos utilizando versão Flash CS3 para este tutorial. Mas, podemos aplicar esse conceito em versões anteriores do Flash. Não iremos ver Actionscript nesse tópico.

Download: Ao final deste tópico existe um link para download deste exemplo.

Indice:

- Introdução
1. Configure o documento para animação;
2. Crie o objeto que receberá animação;
3. Animação Motion Tween com rotação;
4. Ajustando detalhes de animação;
5. Download do exemplo;
6. Considerações finais.

Introdução

Um "loop" podemos considerar como uma "repetição". Iremos rotacionar(animar) uma imagem qualquer que será convertida antes em um símbolo Movie Clip.
Não importa o objeto ou imagem que queira animar. Acredito que, entendendo um conceito de algo e para quê e como usá-lo, tudo parece ser mais fácil na hora de praticar. Iremos utilizar esses conceitos em futuros tópicos de animação.

Estão "animados"?
Obs.: Isso não foi trocadilho.

Flash, luzes, camera… Animação!
Divirta-se.

1 - Configure o documento para animação.

Antes de partimos para animação de fato, precisamos configurar adequadamente nosso documento Flash para cada animação. É bem simples e fácil. Mas, se esquecer desse detalhe pode comprometer toda a qualidade da sua animação, por mais simples que seja.

O ponto principal é ajustar o número de FPS(Frames Per Second), que traduzindo seria "quadros por segundo". O FPS irá determinar uma maior "fluência" ou "naturalidade" de uma animação. Isso porque temos uma maior quantidade de imagens para realizar algum movimento em apenas 1 segundo.

Dica:
Caso utilize sua animação para Web(como a maioria dos casos), fique atento com a quantidade de FPS, dependo da quantidade de elementos, se for algo muito pesado, pode gerar grande consumo de CPU e certamente o desempenho da sua animação não será tão boa. E pior, dependendo do caso poderá até travar o computador do seu usuário. Na maioria dos casos podemos resolver apenas baixando a quantidade de FPS. Se possível, faça testes em diversos computadores com diferentes configurações para ter uma idéia do que a maioria dos usuários conseguirão ver realmente.

O padrão do flash é 12 FPS. No nosso exemplo, estamos utilizando tamanho de 200×200 pixels com 30 FPS para fazer nossa animação.
Assim como mostra na imagem 1. Podemos configurar o tamanho em largura, altura, bem como o número de FPS, isso de acordo com seu projeto e necessidades do mesmo. Geralmente são utilizados em média de 15 à 30 FPS para animações no Flash.

Imagem 1: configurando o documento Flash.

Para definir essa configuração como padrão caso queira utilizar sempre a mesma em novos documentos. Logo após ter configurado este painel, aperte o botão Make Default (criar padrão). Isso fará com que o novo documento será criado exatamente com as mesmas configurações definidas nesta janela Document Properties (imagem 1 logo acima).

Também podemos configurar rapidamente pela janela de propriedades. Para termos o acesso a propriedades de uma ferramenta, objeto, componentes, etc. Temos que ter o painel de properties(propriedades) habilitado e ao selecionar o que precisamos configurar, no nosso caso o stage(palco) do flash. Basta clicar apenas uma vez em qualquer área para habilitar essas configurações do stage.
Por alí, podemos fazer as modificações do documento e também ter acesso ao painel de Document Properties clicando no botão Size. Como mostra na imagem 2:

Caso não esteja aberto o painel propriedades, acesse pelo menu window > properties >> properties, atalho [Ctrl] + [F3].



Imagem 2: Painel de propriedades, configuração do stage.

 

2. Crie o objeto que receberá animação

Vamos criar uma imagem qualquer. No nosso caso será uma quadrado na cor preta que no nosso exemplo é o suficiente para mostrar uma animação em loop. Use sua imaginação: pode ser uma roda de carro, uma bola de praia, uma hélice de helicóptero, um sol girando, etc.

Dica:
Uma recomendação. Sempre que quiser fazer animação utilizando o Motion Tween (quando os quadros da timeline ficam na cor azul claro) converta antes o objeto que receberá animação em um Símbolo do tipo: Movie Clip ou Graphic. O mais utilizado é o Movie Clip. Pois, além de possuir uma timeline independente da timeline principal, que nos dá liberdade pra criar loops de animação, temos também a possibilidade de dar nomes de instância para conseguir manipular com código Actionscript se for necessário.

A grande vantagem de converter sempre em símbolo antes da animação é, caso precise alterar o objeto por algum motivo, ele estará disponível na biblioteca, basta abrir sua biblioteca e clicar duas vezes no objeto para editá-lo. depois que fizer sua edição automaticamente ele irá ser atualizado no stage sem precisar alterar diretamente na timeline, o que tomaria um tempo precioso.

Continuando…

Para converter uma imagem vetorial ou bitmap(pixel) em um símbolo, basta selecioná-lo com a ferramenta Selection tool, atalho [v]. Após selecionado acesse pelo menu Modify > Convert to Symbol, atalho [F8]. Como mostra a figura 3 logo a seguir.

Outra maneira de converter uma imagem em símbolo, é clicar com botão direito do mouse exatamente sobre o objeto e na lista de menu que irá aparecer, clique na opção "Convert to Symbol.." irá abrir a mesma janela Convert to Symbol…. Basta configura-lo de acordo com a sua necessidade.

Ao abrir a janela Convert to Symbol coloque um nome que identifique-o na biblioteca, isso irá facilitar na sua organização conforme crie mais símbolos.
Escolha um tipo(Type) de símbolo, Movie clip, e o mais importante, o ponto de registro deve estar no centro. Este ponto de registro que será nosso "eixo" para fazer uma rotação. Feito essa configuração clique em OK e seu objeto agora estará disponível na biblioteca do flash. Como mostra na imagem 3 logo a seguir.

Imagem 3: Convertendo uma imagem em símbolo Movie clip com ponto de registro no centro.

Com o nosso símbolo devidamente criado e configurado no Stage. Caso não esteja visualizando, temos também este símbolo agora disponível no painel Library(biblioteca). Window > Library, atalho [F11] ou [Ctrl] + [L]. Se ele não estiver no stage, basta abrir a biblioteca e arrastar o objeto no stage.

Até agora sua imagem deve ter ficado algo parecido como a imagem 4 logo a seguir:

Imagem 4: Objeto configurado no stage.

Vamos a animação Motion Tween.

 

3. Animação Motion Tween com rotação.

No 1º e única layer(camada) clique uma vez no frame 20 para selecioná-lo. como mostra na imagem 5:

Imagem 5: Selecione o quadro 20 clicando apenas uma vez sobre ele.

Com o frame ainda selecionado vamos agora inserir um keyframe(quadro chave), atalho [F6]. Ou também clique com botão direito sobre o frame 20 e escolha pela lista de menu a opção Insert keyframe para inserir um quadro chave. Isso fará uma copia do último quadro chave(keyframe). Como mostra na imagem 6:

Imagem 6: com botão direito do mouse sobre o quadro selecione insert keyframe.

Imagem 7:keyframe no frame 20 criado.

Agora clique com botão direito do mouse em qualquer frame sendo a partir do 1º keyframe até o frame 19, e selecione a opção Create Motion Tween. Iremos criar um animação entre estes 2 quadros chaves que foram criados. Como mostra na imagem 8.

Imagem 8: Criando um Motion Tween.

"flecha" mostrando a interação que há entre os keyframes, no nosso caso a partir do 1º keyframe até o keyframe seguinte (frame 20). como mostra na imagem 9.

Imagem 9: Tween Motion Criado.

Pronto! Agora para vermos o objeto animando de fato, ou melhor, rotacionando em loop. O flash fará todo esse trabalho para nós. Mas, precisamos antes fazer alguns ajustes na propriedades da timeline. Com o painel de Properties aberto(atalho [Ctrl] + [F3]). Clique apenas uma vez em qualquer frame (entre o 1º a 20º frame) que tenha animação Tween Motion (barra azul na timeline), isso irá habilita as propriedades de animação Tween Motion e da timeline.
No painel de propriedades do frame, acesse a opção em Rotate e coloque para ser rotacionado no "sentido horário" CW(Clock Wise). Tem outras opções de escolher sentido anti-horário CCW(Counter Clock Wise). A opção Auto é quando fazemos a rotação do objeto manualmente no keyframe seguinte. A opção None desabilita a rotação entre os quadros chaves.

No nosso caso deixamos apenas como CW para Rotate, e automaticamente ficará também com a quantidade 1 para os times(vezes que irá rotacionar). Lembrando que o objeto irá rotacionar em torno do seu eixo(ponto de registro do objeto). Como mostra na imagem 10 a seguir e animação.

Imagem 10: configurando o objeto para rotacionar na animação.

Swf: Animação com rotação.

Mas observe que ainda nossa animação parece dar um pequena "quebra". Alguém sabe o porque isso acontece? Isso que iremos resolver agora.

4. Ajustando detalhes de animação.

Lembra que o 1º keyframe e o keyframe seguinte(no nosso caso o frame 20) são extamemente iguais. Já que quando criamos um keyframe ele faz uma copia exata to ultimo. Então, temos 2 quadros iguais fazendo com que animação cria uma pequena "pausa" impedindo que a animação flua corretamente. Para resolver isso, devemos registrar um keyframe um quadro antes do ultimo keyframe e em seguida apagar o ultimo quadro. Como mostra na imagem 11, 12 e 13 a seguir.

Imagem 11: Selecionando o frame 19, anterior ao ultimo keyframe.

Imagem 12: Registramos um novo keyframe.

Remova este ultimo keyframe pelo menu clicando com botão direito sobre ele e escolhendo a opção Remove Frames. Ou selecione o frame e aperte a tecla de atalho [Shift] + [F5]. Como mostra a imagem 13 logo abaixo.

Imagem 13: removendo o ultimo keyframe.

Deste modo, sua timeline deve ter ficado algo parecido como a imagem 14.

Imagem 14: Agora os keyframes estão configurados. Não havendo repetições dos quadros.

Agora basta testar seu filme, teclas [Ctrl] + [Enter] e ver o resultado mais fluente na animação.
Provavalmente sua animação pode ocorre o seguinte:

Swf: Animação fica mais rápida.

Caso isso ocorra em algum momento com sua animação, para resolver isso devemos mudar no painel de propriedades da animação o numero de rotação inserindo 0(zero). Esta rotação é referente ao número de vezes que o objeto irá rotacionar entre um quadro chaves ao outro. Isto não é o numero de vezes que a animação irá repetir. Com mostra na imagem 15.

Imagem 15: Configurando o numero de vezes que irá rotacionar.

Teste sue filme novamente, [Ctrl] + [Enter]. Com isso sua animação volta ao normal.

Swf: Animação finalizada.

Dica: Claro que depende da sua animação e intenção. Mas evite colocar mais de 2 vezes para rotacionar o objeto na animação. Dependendo da sua intenção a rotação começa criar um aspecto esquisito. Vale a pena fazer alguns testes para conhecer as possibilidades.

Esta animação apenas está na timeline principal. Precisamos colocar colocar está animação dentro de um Movie clip. Com isso conseguimo reaproveitarmos em outra animações do palco.

Selecione todos os frames em seguida clique com botão direito do mouse sobre os frames selecionados e selecione na lista a opção Cut Frames, ou utilizar o atalho [Ctrl] + [Alt] + [x] para recortar os frames selecionados. Com isso além de retirar os frames da timeline ao mesmo tempo copiamos esses frames. Como mostra na imagem 16 e 17. Iremos colocar esses frames em um novo símbolo mais adiante.

Imagem 16: recortando os frames da timeline principal.

Imagem 17: Frames vazios na timeline principal, porque recortamos para inserir em um novo símbolo.

Agora vamos criar um novo símbolo do tipo Movie clip para insrir essa animação que criamos. Para isto, basta ir pelo menu Insert > New Symbol, atalho [Ctrl] + [F8].
Irá abrir um painel Create New symbol, dê um nome que irá identificá-lo na biblioteca depois, para este símbolo e escolha o tipo para ser Movie clip. Como mostra na imagem 18.

Imagem 18: Criando um novo siimbolo do tipo Movie clip.

Automaticamente ao criar um símbolo novo iremos visualizar a timeline deste Movie clipe. Imagem 19.

Imagem 19: Visualizando a timeline do novo símbolo.

Agora clique com o botão direito do mouse sobre o único frame desta timeline, e na lista selecione a opção Paste Frames, ou atalho [Ctrl] + [Alt] + [v] para inserir os quadros de animação que criamos anteriormente. Como mostra na imagem 20 e 21.

Imagem 20: Inserindo a animação neste novo símbolo.

Imagem 21: Novo símbolo com a animação inserida.

Repare que automaticamente a layer tem o nome que definimos anteriormente e também exatamente a mesma animação que criamos na timeline principal. A diferença que agora essa animação está inserida em um Novo Movie clip.

Obs:
Poderiamos criar um novo símbolo desde do começo e inserir a animação nele. Mas como fizemos neste exemplo antes na timeline principal, está é uma das maneiras de resolver isso caso precise converter sua animação em um novo Símbolo. Não necessariamente precisa ser desta ordem de criação.

Agora, para retornar ao palco principal clique no botão Scene1.
Como mostra na imagem 22.

Imagem 22: retornando ao palco principal do Flash.

Este Movie clipe que denominamos de Animação Objeto agora está disponível na library(biblioteca) do flash. Para visualizar abra a biblioteca Window > Library, atalho da biblioteca [F11] ou [Ctrl ]+[L].
Basta selecioná-lo e arastar para o stage e utilizar em sua animação da maneira como achar necessário.

Imagem 23: Inserindo objeto no stage.

Experimente duplicar o objeto (selecione-o e com a tecla [Alt] ou tecla [Ctrl] pressionadas arraste o objeto no palco, isso fará com que duplique o objeto. Depois experimente modificar suas características. Por exemplo, podemos modificar largura, altura, rotacionar ou "deformar"(skew) o objeto utilizando o painel Transform, Window > Transform, atalho [Ctrl] + [T]. Com este painel, podemos criar efeitos facilmente de "perspectiva" no objeto. Vale a penas fazer testes pra conhecer melhor. Como mostra na imagem 24.

Imagem 24: Alterando caracteristicas do objeto pelo painel Transform.

E também mudar caracterisca de cor, alpha, brilho do Movie clip pelo painel properties(propriedades), atalho [Ctrl] + [F3].

Imagem 25: Alterando caracteristicas do Movie clip pelo painel Properties(propriedades).

Swf: Exemplo final da animação.

5. Download do exemplo

Donwload deste exemplo.

6. Considerações finais

O MovieClipe possui a vantagem de ter uma timeline própria que não depende de número de quadros da timeline principal para rodar animação. E conseguimos também inserir nome de instância nele para podermos controlar pelo código Actionscript caso for necessário. Além de poder aplicar filtros nele.

Já o símbolo do tipo Graphic(gráfico) também possuí uma timeline própria. Mas ele depende de número de quadros inserido na timeline principal para rodar, e não conseguimos inserir nome de instância nele. Não é possível também utilizar filtros em símbolo do tipo “Graphic”. Este tipo de simbolo é mais utilizado quando não desejamos ter animações em sua timeline. Geralmente, o mais utilizado são símbolos do tipo Movie clip tanto para animações quando para controlar objetos pelo Actionscript.

Claro que este exemplo é bastante simples. Mas, pense que no lugar deste simples quadrado você pode utilizar qualquer outra imagem que precisar animar e rotacionar. Com isso já podemos fazer exemplos legais que vemos em banners ou animações pela internet. seja curioso, o conceito é o mesmo utilizado e com tempo e prática certamente você mesmo descobrirá novas técnicas que sinta mais confortável em trabalhar. Divirta-se.

Abraços e até a próxima!

Rodrigo Gonçalves
Equipe Alvo Web