domingo, 27 de fevereiro de 2011

flash.bacground movimento

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.

Ficheiro Swf

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:
Flash Player icon 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).
 
Acabaste de conseguir criar, uma animação que aparenta um movimento contínuo das estrelas. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.
 
Bons trabalhos!
Pedro Teixeira
pedro.teixeira@flashwebtraining.com

Nenhum comentário:

Postar um comentário