Animação de texto com máscara

Baseado em tutorial do forum fwdesign: http://forum.fwdesign.net

Importante: Você deverá conhecer as técnicas de animação pelo painel “Frames” para obter este efeito.

::Objetivo::

Mostrar uma técnica de animação de um texto com uso de máscara.


::Visão antecipada::

O efeito final da animação é mostrado abaixo.

textani8

Observar:

Cor do texto: vermelha;
Cor da animação: verde;


::O texto a animar::

Abra um novo documento;

Digite no palco o texto a animar na cor de sua preferência e aplique efeitos se assim desejar. Neste tutorial usei um texto na cor vermelha sem efeitos;

Clone o texto digitado. Para clonar Ctrl + Shift + D

Mude a cor do clone para a cor da animação. Neste tutorial usei a cor verde;

Você deve obter o mostrado na figura abaixo:

textani1


::A máscara::

Sobre o texto digitado, desenhe um retângulo na cor preta e com a ferramenta “screw” “skew” distorça o retângulo dando-lhe a forma de um paralelogramo como mostrado na figura abaixo:
Em 2005-12-01: Você pode “pegar” a ferramenta skew assim: selecione o retângulo e tecle duas vezes a tecla “Q”.

textani2


::Colando a máscara::

Agora vamos colar o paralelogramo como máscara no texto:

Selecione o paralelogramo e tecle Ctrl + X para recortá-lo do palco;
Selecione o texto que está no palco e menu Modify ==> Paste as Mask

Você obterá o mostrado na figura abaixo

textani3


::Desvinculando a máscara::

Observe no painel “Layers” da figura acima um símbolo em forma de “8” (oito) entre o texto e a máscara.
CLIQUE no símbolo e ele vai desaparecer, desvinculando o texto da máscara;

Pegue a ferramenta de seleção seta branca e clique dentro do paralelogramo que agora está com uma linha de contorno e sem preenchimento (cor amarela neste tutorial) para selecioná-lo e arraste para um lado e para outro para constatar que você pode movê-lo a vontade ficando o texto imóvel.

textani4


::Criando frames::

Posicione o paralelogramo no início do texto como mostrado abaixo;

Abra o painel “Frames” Shift + F2

Clique para abrir o menu suspenso do painel “Frames”
Duplicate Frames ==> Number 23 ==> OK

textani5


::Animando no painel Frames::

Clique sobre Frame 2 e desloque o paralelogramo uns 2 pixel para a direita;

Clique sobre Frame 3 e desloque o paralelogramo uns 4 pixel para a direita;

Clique sobre Frame 4 e desloque o paralelogramo uns 6 pixel para a direita;

Clique sobre Frame 5 e desloque o paralelogramo uns 8 pixel para a direita;

textani6

Vá repetido a operação até atingir o último Frame que deverá coincidir com a chegada do paralelogramo no final do texto.

textani2


::O efeito final::

Aqui está o texto animado que você já havia visualizado no início deste tutorial.

textani3


::Nota::

A quantidade de Frames e o tempo de cada frame dependerá do tamanho do texto e da velocidade desejada para a animação.

Quanto maior o texto maior será a quantidade de Frames e em consequência, o tamanho do arquivo crescerá em Kb.

~ por Julio Cesar Milanes em outubro 31, 2007.

Deixe uma resposta

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: