CADASTRE-SE

0 Categoria: Tutoriais » Flash

Tutorial Flash: efeito de aparição de texto

Por Otacílio Vieira
Data:

Neste tutorial você vai aprender a fazer um efeito de aparição de texto usando o Flash. Este efeito mostra todas as letras de um texto aparecendo uma de cada vez com esmaecimento.

Neste tutorial você vai aprender a fazer um efeito de aparição de texto usando o Flash. Este efeito mostra todas as letras de um texto aparecendo uma de cada vez com esmaecimento.

Vamos aprender a fazer a seguinte animação:


Bem comece criando um novo arquivo. O tamanho não importa mas criei um arquivo 250x150 px e com 50 frames por segundo...

http://www.oficinadanet.com.br//imagens/coluna/2479/1.gif

Bem Crie um texto com a ferramenta TEXT TOOL(T) http://www.oficinadanet.com.br//imagens/coluna/2479/bt1.gif... eu Coloquei o ETUTORIAIS...
http://www.oficinadanet.com.br//imagens/coluna/2479/2.gif

Bem após isso acionei a ferramenta Subselection TOOL (A) http://www.oficinadanet.com.br//imagens/coluna/2479/bt2.gif e em seguida clique sobre o texto e aperte CTRL B. Isso fará com que o texto seja quebrado letra por letra. Veja a imagem:
http://www.oficinadanet.com.br//imagens/coluna/2479/3.gif

Bem agora vamos transfomar cada letra em um gráfico. Com a ferramenta subselection clique na letra E. Após isso aperte no seu teclado a tecla F8. faça como mostra a imagem abaixo:
http://www.oficinadanet.com.br//imagens/coluna/2479/4.gif

Após isso faça com todas as camadas a mesma coisa. Após terminar isso aperte no seu teclado F11. Aparecerá a caixa da library.
http://www.oficinadanet.com.br//imagens/coluna/2479/5.gif

Selecione todas as letras pressioando CTRL A e apos isso vá em Modify - Timeline - Distribute to layers ou simplesmente pressione (Ctrl Shift D)
http://www.oficinadanet.com.br//imagens/coluna/2479/6.gif

Você pode apagar a layer 1. ela não servirá para nada. O próximo passo você tem que ter bastante atenção. Selecione a letra T e afaste ela três frames. Selecione a letra U e afesta 6 frames. Selecione a outra letra T e afaste 9 frames. Repita com essa progressão nas outras camadas.
http://www.oficinadanet.com.br//imagens/coluna/2479/7.gif

Selecione a camada da letra E e vá no quadro 20. Aperte F6 para adicionar um Key Frame nele. Selecione a camada da letra T e vá ao frame 23 e faça a mesma coisa. aperte F6. Faça a mesma coisa seguindo a proporção para as demais camadas.
http://www.oficinadanet.com.br//imagens/coluna/2479/8.gif

Selecione o primeiro frame da camada E e faça o seguinte. Ative a ferramenta Free Transformation(Q) http://www.oficinadanet.com.br//imagens/coluna/2479/bt3.gif e com a letra é selecionada aumente cerca de 40%.
http://www.oficinadanet.com.br//imagens/coluna/2479/9.gif

Após isso vá ao painel das propriedades... Ctlr F3 e procure color mude para alpha e deixe o sue valor em 0%.
http://www.oficinadanet.com.br//imagens/coluna/2479/10.gif http://www.oficinadanet.com.br//imagens/coluna/2479/11.gif

A letra vai sumir. Não se preocupe. Agora procure e abra o painel do histórico. Ctrl F10 e procure pelas as ações Scale e Instance Alpha selecione as duas e clique onde mostra imagem.
http://www.oficinadanet.com.br//imagens/coluna/2479/12.gif

Selecione Salvar Comando
http://www.oficinadanet.com.br//imagens/coluna/2479/13.gif

Nomeie o comando como comando... Agora na camada T selecione o frame que contem o primeiro T. Digo o 3 frame da camada T.
http://www.oficinadanet.com.br//imagens/coluna/2479/14.gif

Vá em Commands e Clique sobre o comando que você criou. Repita nas demais cadamas(Importante somente nos primeiros frames de cada camada... assim como na camada T. Agora Selecione o o frame subsequente ao ultimo da cadada S e arrasta uma seleção para baixo ate a camada E. Veja como deve ser na imagem.
http://www.oficinadanet.com.br//imagens/coluna/2479/15.gif

Após isso aperte F5 para criar frames
http://www.oficinadanet.com.br//imagens/coluna/2479/16.gif

Estamos terminando. Agora vamos na primeira camada [E] e na propriedades mude o tween de nome para motion
http://www.oficinadanet.com.br//imagens/coluna/2479/17.gif

Faça isso em todas as camadas. Vamos ter um resultado de imagens mais ou menos assim.
http://www.oficinadanet.com.br//imagens/coluna/2479/18.gif

Bem agora basta testar... CTRL ENTER.
ATÉ MAIS GALERA, o arquivo anexo contem pronto este tutorial

Leia a seguir: Flash CS4 - Máscara de Texto



Recomendados para você
Ainda restam dúvidas? Pergunte aqui em nosso fórum
Mais de Flash



Comentários:

TOPO