quarta-feira, 7 de abril de 2010

FLASH: Como criar uma simples animação - Parte 1

@
E aí, pessoal? Tudo certo?
A lição deste post está relacionada a um poderoso aplicativo, bastante utilizado para criar animações, filmes, banners e outros conteúdos contendo certo tipo de animação.
Como este é o primeiro post relacionado ao Flash, vamos começar com algo bem simples: uma animação onde um objeto irá de um ponto a outro na tela, a partir de um recurso chamado "Motion Tween".

O objeto irá fazer o seguinte trajeto:



Vamos aos procedimentos:
1. Inicie um novo arquivo no Flash, utilizando os passos convencionais.
2. Clique na ferramenta de retângulos - Rectangle Tool -, que está localizada na barra de ferramentas. A tecla [R] é um atalho para selecioná-la. Basta teclar uma vez.
3. Antes de desenhar o objeto, vamos escolher previamente a cor de preenchimento que ele terá. Portanto, clique no ícone correspondente à cor de preenchimento, que encontra-se localizado na parte inferior da barra de ferramentas, como apontado na figura ao lado.
4. Desenhe um quadrado no canto superior esquerdo da janela de desenhos, de cerca de 5 x 5 cm. Para se conseguir um quadrado correto, mantenha a tecla [SHIFT] pressionada, enquanto pressiona e arrasta o mouse na área de desenhos.
5. Para que o efeito de movimento possa ser aplicado sobre qualquer objeto, é necessário convertê-lo para "símbolo gráfico" do Flash. Para isso, alterne para a ferramenta de seleção principal - teclando [V] - e, depois, pressione e arraste o mouse em torno do quadrado, para que ele seja completamente selecionado. Feito isso, tecle [F8] para acionar a caixa de diálogo 'Convert to Symbol' (converter para símbolo).

6. No campo 'Name', digite "quadro". Marque ou mantenha marcada a opção 'Graphic'. Clique OK para concluir a conversão.

7. Acima da janela de desenhos, temos a Timeline do Flash, ou seja, a linha de tempo que determina a posição ou aparência de um objeto em determinada parte da animação. A linha de tempo também trabalha com camadas, uma para cada objeto, normalmente, como acontece no Photoshop. Uma camada contém vários frames vazios, que representam, cada um, um ponto no tempo, ou seja, um quadro da animação. Em um segundo de filme, podemos ter, normalmente, de 15 a 30 quadros (frames), dependendo da velocidade desejada na animação.  Nesta simples animação, iremos usar uma só camada, que é justamente esta em que nosso quadro se encontra, ok? Já temos o ponto inicial do tempo ocupado por este quadro que acabamos de converter em símbolo.
8. Para definir a segunda posição do quadro na animação, vamos primeiro inserir um keyframe na linha de tempo, no quadro número 20. Clique em seu interior e, então, tecle [F6].
Em destaque, o quadro no qual você irá clicar e inserir um 
keyframe, teclando [F6].
9. Posicione o apontador do mouse sobre o objeto na janela de desenho. Pressione e arraste esse objeto até o canto inferior direito da janela de desenhos.
10. Insira um novo keyframe no quadro 40, usando a mesma tecla de atalho [F6]. Mova o objeto para o canto superior direito da janela de desenhos.
11. Insira um outro keyframe, desta vez, no quadro número 60 da timeline. Mova o objeto para o canto inferior esquerdo da janela.
12. Agora, um novo keyframe no quadro 80 da timeline. Mais uma vez, mova o objeto para o canto superior esquerdo da janela, o mesmo em que o objeto se encontra no primeiro quadro.
13. Chegou a hora de "dizermos" ao Flash que queremos que o objeto percorra a janela, seguindo as posições definidas nos quadros anteriores. Portanto, selecione todos os quadros preenchidos da seguinte forma: (a) clique no primeiro quadro da camada na timeline; (b) segure a tecla [Shift] e clique no último quadro preenchido, fazendo a seleção de todos eles; (c) clique com o botão auxiliar do mouse sobre os frames selecionados e clique no comando 'Create Motion Tween'. Agora, veja que, entre cada um dos keyframes que inserimos anteriormente, surge uma seta, e o espaço de quadros entre esses keyframes encontra-se na cor roxa: isso significa que foi adicionado o efeito de motion entre os keyframes.
14. Vamos testar sua animação? Basta teclar [Ctrl] [Enter].

E está pronto. Depois, veremos mais sobre o Flash e seus recursos. Até a próxima.

Nenhum comentário:

Postar um comentário