Introdução

Este é um dos efeitos que melhor fica numa página ou mesmo num banner publicitário. Vamos então aprender a animar o fundo das vossas criações.

Neste exemplo vamos animar o fundo do ecrã parecido com o espaço. Este tipo de animação pode ser aplicada a qualquer uma das animações que vocês queiram criar. Podem ser nuvens, estrelas, flores, o que vocês melhor entenderem para por como fundo animado.

Vamos então começar com o trabalho. Necessitamos criar duas versões do mesmo fundo e depois animá-las para que possamos criar um efeito contínuo.

Downloads:

Ficheiro Fla Tutorial em PDF

Primeiro Passo: Criar o fundo do espaço

1. Comecemos por criar um simples rectângulo preto.

2. Crie um rectângulo um pouco maior do que o filme e converta-o para gráfico.

3. Seleccione a ferramenta do lápis, e desenhe alguns pequenos círculos de maneira a que se pareçam com estrelas (ver figura 1).

(Figura 1)

Segundo passo: Transformar o espaço em modo gráfico do Flash

1. Vamos duplicar o fundo desenhado. Para isso vamos selecciona-lo e vamos ao menu de Edit e de seguida escolhemos a opção de copy.

2. Após termos copiado, vamos fazer a colagem do fundo. Para tal, vamos ao menu Edit e de seguida escolhemos a opção de paste.

3. Já com os dois gráficos que foram desenhados, dispostos no ecrã, vamos coloca-los um ao lado do outro para podermos criar um efeito contínuo de movimento. Devem ver o Align Top Edge e o Align Bottom Edge, para terem a certeza que ambos os gráficos ficam correctamente dispostos um ao lado do outro;

4. Devemos agora, seleccionar ambos os gráficos para depois transformá-los em modo gráfico do Flash. Assim sendo, vamos seleccionar ambos gráficos, indo ao menu Edit e de seguida clicar na opção de Select All (Ctrl + A).

Terceiro Passo: Criar o Motion Tween

1. Criar uma Keyframe na frame 30. Deve-se clicar sob a frame 30, e de seguida ir ao menu de Insert e escolher a opção de Keyframe (F6);

2. Com o botão direito do rato, clicar sob qualquer posição entre a frame 1 e a frame 30, e escolher a opção de Create Motion Tween;

3. Na frame 30, carregando no tecla de Shift devemos arrastar o fundo que foi copiado por nós, de maneira a que o mesmo seja alinhado com o nosso primeiro gráfico. Devem ter atenção às margens dos gráficos, de maneira a que elas fiquem coincidentes uma com a outra. É aconselhável que tenham em atenção a maneira como a disposição das estrelas fica disposta no ecrã (ver Figura 2).

(Figura 2)

Quarto Passo: Inserir uma Keyframe na frame 29

1. Clicar na frame 29;

2. Criar uma Keyframe, clicando na tecla F6;

3. Clicar na frame 30, e apaga-la. Para tal, após termos clicando na frame, com o botão direito do rato, clicar na opção clear Keyframe. Esta opção serve de prevenção a que o filme não repita a mesma frame duas vezes quando o filme esteja a correr (ver Figura 3).

(Figura 3)

Quinto Passo: Fazer da Animação um Movie Clip

1. Seleccionar todas as frames. Com o botão direito do rato em cima das Timeline, escolher a opção Select All Frames;

2. Copiar todas as frames. De novo, com o botão direito do rato, clicar em cima das frames, e seleccionar a opção de Copy Frames;

3. Criar um novo símbolo, clicando no menu Insert e seguida escolher a opção Convert to Symbol (F8). Nesse menu, deveremos dar um nome ao novo Movie Clip (por exemplo Estrelas em Movimento), e de seguida escolher a opção de Movie Clip. Clicar em OK;

4. Clicar sobre a frame 1, e com o botão direito do rato, escolher a opção de Paste Frames (ver Figura 4).

(Figura 4)

Sexto Passo: Adicionar o Movie Clip ao nosso Filme

1. Clicar no link que diz Scene 1;

2. Criar uma nova layer. Através do menu de Insert, escolher a opção de Layer;

3. Adicione o novo Movie Clip ao filme a ser publicado;

4. Apagar a primeira layer ou layer 1. A layer 1 contém a animação que nós fizemos para ambos os gráficos. Assim que criamos o Movie Clip, não temos mais necessidade de manter esta layer, pois já temos o efeito criado.

Sétimo Passo: Testar a animação

1. Clicar sob o menu de Control e de seguida escolher a opção de Test Movie (Ctrl+Enter).