Texto animado

Nesta aula vocês vão aprender como criar um texto animado muito interessante, e bem simples de criar, tenha um ótimo aprendizado.

Clique no botão para iniciar a animação

1. Abra o Texto Animado_inicio.fla fornecido com os arquivos do tutorial. Para poupar tempo, os elementos que serão usados já estão presentes na Library (Ctrl + L).

2. Acrescente novas layers até que tenhamos um total de 7. Denomine-as como: AS, Máscara 1, Texto Escuro, Máscara 2, Texto Claro, Botões e Fundo.

3. No frame 1 da layer Fundo, desenhe um retângulo de 365 x 105 px, cor #999999 e posicione-o nas coordenadas X: 0 e Y: 0.
4. Clique no frame 20 da mesma layer e tecle F5 para inserir frames até ele.
5. Na layer Botões, clique no frame 2 e tecle F6 para criar um keyframe.
6. Arraste uma instância do rounded grey play da Library para o Stage. Denomine essa instância de avanca_bt (no painel Properties) e posicione nas coordenadas X: 169 e Y: 74.


7. Clique no frame 20 da layer Botões e tecle F7 para criar um keyframe em branco.
8. Arraste uma instância do rounded grey back da Library para o Stage. Denomine essa instância de volta_bt (no painel Properties) e posicione nas coordenadas X: 169 e Y: 74.


9. Na layer Texto Claro , clique no frame 2 e tecle F6 para criar um keyframe.
10. Arraste uma instância do Título Claro da Library para o Stage. Posicione-a nas coordenadas X: 15 e Y: 4.

11. Na layer Texto Claro, clique no frame 20 e tecle F6 para criar um keyframe.
12. Reposicione o Título Claro do frame 20 nas coordenadas X: 15 e Y: 20.
13. Clique entre os frames 1 e 20 com o botão direito do mouse e opte por Create Motion Tween.
14. Clique em qualquer um dos frames entre o 1 e o 20 e configure o Ease do Motion Tween para 100, desta maneira o movimento começará rápido e diminuirá a velocidade no final.
15. Clique no frame 2 da layer Máscara 2 e tecle F6 para inserir um keyframe.
16. Desenhe neste frame um retângulo com dimensões 336 de base e 26 de altura, posicionando-o nas coordenadas X: 15 e Y: 47. Escolha a cor que quiser, pois como servirá de máscara é indiferente.
17. Clique no frame 20 e tecle F5 para criar frames até ele.
18. Clique sobre a layer Máscara 2 com o botão direito do mouse e opte por Mask.
19. Na layer Texto Escuro , clique no frame 2 e tecle F6 para criar um keyframe.
20. Arraste uma instância do Título Escuro da Library para o Stage. Posicione-a nas coordenadas X: 15 e Y: 47.
21. Na layer Texto Escuro, clique no frame 20 e tecle F6 para criar um keyframe.
22. Reposicione o Título Claro do frame 20 nas coordenadas X: 15 e Y: 21.
23. Clique entre os frames 1 e 20 com o botão direito do mouse e opte por Create Motion Tween.
24. Clique em qualquer um dos frames entre o 1 e o 20 e configure o Ease do Motion Tween para 100, desta maneira o movimento começará rápido e diminuirá a velocidade no final.
25. Clique no frame 2 da layer Máscara 1 e tecle F6 para inserir um keyframe.
26. Desenhe neste frame um retângulo com dimensões 336 de base e 26 de altura, posicionando-o nas coordenadas X: 15 e Y: 21 . Escolha a cor que quiser, pois como servirá de máscara é indiferente.
27. Clique no frame 20 e tecle F5 para criar frames até ele.
28. Clique sobre a layer Máscara 1 com o botão direito do mouse e opte por Mask.

29. Clique no frame 1 da layer AS e tecle F9 para abrir o painel Actions e insira o seguinte código:

stop();
avanca_bt.onRelease = function() {
gotoAndPlay(2);
};


30.
Clique no frame 20 e tecle F7 para criar um keyframe em branco e siga o mesmo procedimento anterior para inserir o seguinte código nele:

stop();
volta_bt.onRelease = function() {
gotoAndPlay(1);
};


31.
Agora é só testar com Ctrl+Enter.

(Fonte: ActionScript.org, Cleopatra Art Group, adaptado por Francisco Teodorico Pires de Souza)

Anúncios

~ por gigabr em janeiro 19, 2008.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

 
%d blogueiros gostam disto: