Aplicando máscaras no Flash

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina

No mini-tutorial de hoje apresentarei como aplicar o efeito de máscaras no Flash. O resultado do uso deste efeito pode ser visualizado na animação abaixo.

A máscara é simplesmente uma área delimitadora que define o que realmente será apresentado na apresentação. Tudo que a máscara sobrescreve será visualizado. Tudo que estiver fora do perímetro da máscara será ocultado.

Tal técnica já foi apresentada em um post anterior, que descreve como criar efeitos de assinatura no Flash.

Vamos começar (lembrando que estou utilizando o Flash 8 para descrever o processo de criação)! Crie um novo documento Flash. Neste documento, crie dois layers (novos layers podem ser gerados a partir da opção de menu Insert >> Timeline >> layer). O layer superior conterá frames que utilizaremos para desenhar a máscara, e o inferior conterá algo que será exibido de acordo com o movimento da máscara. Clique com o botão esquerdo do mouse sobre a área de animação e siga até a aba Properties (Ctrl + F3), vá até a lista de cores para o background da animação e defina uma cor para o fundo (no exemplo, utilizo azul marinho).

Selecione o primeiro frame do layer inferior e, na área de desenho, digite a frase “Teste de máscaras no Flash” através da ferramenta Text (pressionando T). Defina a cor da fonte como branca, tipo arial, tamanho 39, negrito (selecione o texto e pressione Ctrl + F3 para definir tais propriedades na aba Properties). Procure deixar a frase no centro da área de desenho.

Clique com o botão esquerdo do mouse sobre o primeiro frame do layer superior e desenhe a máscara que será utilizada na animação. No nosso exemplo, desenharemos um pequeno circulo branco (Ferramenta Oval… pressione O). Selecione o círculo recém-criado, pressione F8 e o converta em gráfico (Graphic). Procure posicionar o gráfico por cima do início a frase digitada anteriormente.

Agora clique com o botão direito do mouse sobre o nome do layer superior e selecione a opção “Mask”. Você notará que o layer inferior ficará “submisso” ao superior, com o título deste layer ficando mais a direita (os ícones dos layers ficarão azuis). Já será possível observar o efeito de máscara em ação na área de desenho.

Provavelmente os dois layers ficarão bloqueados após esta etapa (será apresentado um ícone com cadeados nas duas layers). Portanto, clique sobre os cadeados para desbloqueá-los novamente.

Você também poderá verificar uma prévia do efeito da máscara pressionando as teclas Ctrl + Enter. Só será apresentado parte do texto “coberto” pelo círculo. Mas ainda tudo está muito estático… Vamos animar um pouco!

Segure a tecla Shift e clique com o botão esquerdo do mouse sobre o primeiro frame de cada layer, para selecioná-los. Pressione a tecla F5 até que a animação tenha 60 frames. Selecione o frame 30 do layer superior e pressione F6 para definir o ponto central de animação e, logo em seguida, selecione o último frame do layer superior e pressione F6 para definir o ponto final. Selecione novamente o frame 30 e, na área de animação, arraste o círculo até fim da frase. Clique com o botão direito do mouse sobre o primeiro frame do layer superior e selecione a opção “Create Motion Tween” (criar interpolação de movimento). Clique agora com o botão direito sobre o frame 30 e aplique novamente a interpolação.

Teste sua animação pressionando novamente as teclas Ctrl + Enter! A tendência é sua animação ficar parecida com a animação apresentada neste post. Caso você tenha alguma dificuldade em seguir o passo a passo, CLIQUE AQUI, baixe o arquivo .fla do exemplo e tente acompanhar o tutorial utilizando o mesmo.

Espero que este mini-tutorial tenha sido útil!

Até a próxima!