75

5

© FCA – Editora de Informática

CRIAÇÃO DE ANIMAÇÕES

Neste capítulo iremos aprender os diferentes tipos de animações que podemos criar no Flash; para facilitar a sua aprendizagem serão acompanhados de exer-cícios.

5.1 Tipos de animaçãoNo Flash CS4 podemos criar quatro tipos diferentes de animação: frame-by- -frame, tweened animation, através de ActionScript ou utilizando a ferramenta Bone. Este último tipo de animação corresponde a uma novidade desta versão do Flash.

Frame-by-frame

Este método é o mais directo para criar animações. Defi nimos cada frame como um keyframe e criamos uma imagem diferente para cada frame. Inicialmente, quando criamos um novo keyframe, o conteúdo é uma cópia do keyframe ante-rior. Esta técnica de animação é bastante utilizada para criar animações com um nível de detalhe elevado, dando um controlo mais criativo.

Fig. 5.1 – Animação frame-by-frame

76

5 Flash CS4 - Depressa & Bem

© FCA – Editora de Informática

Tween

Nesta nova versão do Flash podemos encontrar três tipos de animações tween: Tween Motion, Tween Classic e Tween Shape.

Tween Motion

Apesar do nome se manter, o conceito deste tipo de animação foi totalmen-te reformulado de forma a facilitar a criação de animações tween motion. Trata-se de um novo tipo de animação do Flash CS4 baseado em objectos e não em keyframes. Ou seja, basta criar um símbolo do tipo movie clip e logo em se-guida atribuir ao objecto um Tween Motion.

Aplicada a animação, basta mudar as propriedades do objecto, como arrastá-lo pelo stage ou mudar o seu tamanho e transparência; isto porque o Flash detecta automaticamente a(s) alteração(ões) e cria os keyframes para gerar a animação.

Para criar este tipo de animação é necessário que o fi lme de Flash utilize ActionScript 3.0 e seja publicado em Flash Player 10.

São representadas na timeline por um ponto preto nos keyframes inicial e fi nal. Entre os dois keyframes, os frames são representados por um fundo azul claro.

Tween Classic

Agora o que era conhecido como Tween Motion, ou seja, uma animação de símbolos baseada em keyframes foi renomeada para Tween Classic. Neste tipo de animação apenas defi nimos um keyframe de início e um keyframe fi nal da animação. O Flash automaticamente cria os frames entre os dois keyframes com base nos conteúdos desses mesmos keyframes. Na animação Tween Classic,

Fig. 5.2 – Animação Tween Motion

5 Criação de Animações

77© FCA – Editora de Informática

podemos defi nir diversas propriedades tais como a posição, o tamanho e a rota-ção de uma instância, o grupo de objectos ou o bloco de texto num determinado ponto da timeline e, depois, alterar estas mesmas propriedades num outro ponto da timeline. Podemos também animar um objecto seguindo um determinado percurso através do desenho de um segmento.

São representadas na timeline por um ponto preto nos keyframes inicial e fi nal. Entre os dois keyframes, os frames são representados por uma seta preta e fundo lilás.

Tween Shape

Esta técnica de animação com objectos vectoriais é semelhante ao efeito de mor-phing. Desenhamos um objecto vectorial num determinado ponto da timeline e depois alteramo-lo num outro ponto da timeline ou desenhamos outro objecto.

O Flash automaticamente vai interpolar os valores ou os objectos entre os keyfra-mes e criar a animação.

São representadas na timeline por um ponto preto nos keyframes inicial e fi nal. Entre os dois keyframes os frames são representados por uma seta preta e fundo verde claro.

Fig. 5.3 – Animação Tween Classic

Fig. 5.4 – Animação Tween Shape

78

5 Flash CS4 - Depressa & Bem

© FCA – Editora de Informática

Ferramenta Bone

No campo das animações temos mais uma novidade no Flash CS4 com a introdu-ção da ferramenta Bone, que facilita a criação de animações que necessitem da técnica conhecida como Inverse Kinematics, em que um movimento infl uencia outros. A sua principal utilidade é reproduzir movimentos do corpo humano.

Desta forma, é possível criar uma estrutura óssea em desenhos no Flash e apli-car movimentos coordenados. Ao activá-la numa fi gura, é criada uma nova layer na timeline, onde a animação pode ser controlada. Esta técnica é aplicada a instâncias de símbolos e a objectos vectoriais.

Fig. 5.5 – Aplicação da ferramenta Bone

Motion Presets

Outra novidade importante na área de animação é o painel Motion Presets, onde podemos encontrar diversas animações pré-confi guradas prontas a aplicar em objectos no stage.

O leitor pode ainda criar e guardar modelos de animação para posteriormente aplicar noutros projectos.

Para abrir o painel Motion Presets, deverá executar o comando Window > Mo-tion Presets.

5 Criação de Animações

79© FCA – Editora de Informática

ActionScript

Outra técnica de criar animações em Flash é através da utilização da linguagem de programação ActionScript. Uma das vantagens da utilização de programação é a possibilidade de podermos criar efeitos de animação com fi cheiros de tama-nho reduzido. No entanto, esta é uma matéria que será abordada um pouco mais à frente.

NOTA O aparecimento de uma linha a tracejado na timeline indica que a animação está incompleta ou quebrada, por exemplo, pode faltar um keyframe.

Fig. 5.6 – Painel Motion Presets

Criar pasta

Eliminar modeloGuardar animação

como modelo

Aplicação do modelo seleccionado

5Criação de Animações

119© FCA – Editora de Informática

NESTE ÚLTIMO EXERCÍCIO, TEREMOS A OPORTUNIDADE DE AVALIAR OUTRA DAS NOVIDA-DES DO FLASH: A CRIAÇÃO DE ANIMAÇÕES UTILIZANDO SÍMBOLOS APLICADOS NO STAGE AO LONGO DE UMA ÁREA.

Exercício 5.11

9. Repetir os passos 6 a 8 se desejar prolongar a animação.

10. Para ver o resultado fi nal desta animação, executar o comando Control > Test Movie.

1. Criar um novo documento em Flash do tipo ActionScript 3.0.

2. Importar uma imagem através do comando File > Import > Import to Library.

3. Abrir a biblioteca do documento actual através do comando Window > Library.

4. Seleccionar a imagem importada e arrastar para o stage.

5. Nomear a layer como “imagem”.

Fig. 5.76 – Imagem no stage

120

5 Flash CS4 - Depressa & Bem

© FCA – Editora de Informática

6. Executar o comando Insert > Timeline > Layer para inserir uma nova layer.

7. Nomear a layer como “estrelas”.

8. Executar o comando Insert > New Symbol para inserir um novo símbolo do tipo Movie clip.

Fig. 5.77 – Criação de um novo símbolo do tipo Movie clip

9. Ao entrar no modo de edição do movie clip, vamos desenhar uma estrela pequena no frame 1.

10. Seleccionar o frame 20 e executar o comando Insert > Timeline > Key-frame.

11. Com a ferramenta Free Transform diminuir o tamanho da estrela.

12. Seleccionar o frame 40 e executar o comando Insert > Timeline > Key-frame.

13. Com a ferramenta Free Transform aumentar o tamanho da estrela para o tamanho inicial.

14. Fazer clique num dos frames no intervalo 1-19 e executar o comando In-sert > Shape Tween.

15. Fazer clique num dos frames no intervalo 21-39 e executar o comando In-sert > Shape Tween.

16. De seguida, vamos voltar ao stage principal. Para tal, basta fazer clique no nome da cena ou na seta .

17. Seleccionar a ferramenta Spray Brush.

5Criação de Animações

121© FCA – Editora de Informática

Fig. 5.78 – Configuração da ferramenta Spray Brush

19. Aplicar a ferramenta no stage sobre a imagem.

Fig. 5.79 – Aplicação da ferramenta Spray Brush

18. No painel Properties defi nir os valores seguintes.

122

5 Flash CS4 - Depressa & Bem

© FCA – Editora de Informática

RESUMO: Neste capítulo, foi dito apenas o essencial e passou-se à prática. Ficámos a conhe cer as diferentes formas e tipos de criar animações em Flash: frame-by-frame, tween classic, tween motion, tween shape e ActionScript, entre outras novidades. Ao longo dos exercícios foram transmitidos diversos conceitos e diversas técnicas sobre a criação de animações.

■ ■ ■ ■

■ ■ ■ ■

20. Para ver o resultado fi nal desta animação, executar o comando Control > Test Movie.