anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Como criar máscaras no Adobe Flash

Capa do post

Sejam bem vindos a mais um post do Blog de Web Design! O post de hoje foi escrito pelo instrutor Elson Lorena, da Microcamp de Praia Grande. Você pode conhecer melhor o Elson e entrar em contato com ele no seu perfil do Facebook ou deixando um recado para ele diretamente nos comentários do Blog. Boa leitura!

Olá, leitores do Blog! Neste Tutorial do Adobe Flash, irei mostrar como fazer o efeito de Máscara, muito usado hoje em animações e também irei demonstrar como aplicá-lo em seus trabalhos!

Primeiramente, preciso que entenda o conceito de máscara em Flash. Imagine uma Folha de sulfite… imaginou? Então imagine agora que você fez um recorte no meio dela e pode enxergar qualquer coisa por meio desse buraco que fez. Uma máscara é exatamente isso, uma abertura que possibilita a você visualizar algo (um gráfico, um clipe de filme ou qualquer outro desenho) através dela. No Flash você pode desenhar uma forma em uma camada e, transformando-a  em máscara você poderá enxergar o conteúdo da camada logo abaixo dela. Você também pode aplicar esta camada com máscara em uma ou mais camadas. Outro fator digno de atenção é que essa máscara poderá ter qualquer formato: círculo, quadrado, polígono, estrela, enfim, a forma que você imaginar, desde que seja um único objeto ou forma livre.

Se você ainda não conseguiu visualizar em sua mente o que é um efeito de Máscara, acredito que a figura abaixo irá lhe ajudar:


Demonstração Máscaras

Compreendeu agora? Que tal colocarmos nossos conhecimentos em prática no Adobe flash para tentar realizar esse tipo de trabalho? Mãos á obra, então!

Abra o programa e crie um novo documento (no menu principal do programa, opção Arquivo > Novo ou com o atalho Control+N) e escolha  Action Script 2.0.

tela de abertura

Na janela que aparecerá, insira as seguintes configurações, que você pode ver na figura abaixo:

tamanho

Selecione a Ferramenta Texto na barra de ferramentas lateral. Clique dentro do palco e digite uma frase no centro da página. No exemplo que você vê a seguir, eu utilizei a fonte Arial Black, cor preta, Tamanho 24. Mas você pode digitar a frase que quiser, na fonte e cor que desejar.

Criando texto 01

Agora, na barra de Linha do tempo do programa, clique no quadro 26 e pressione a tecla F7 para digitarmos outro texto:

camada 01 quadro 26

Novamente, com a ferramenta Texto, digite outra frase:

texto 02

Após digitar a frase, vá até o quadro 71 e aperte a tecla F6 para continuar a animação.

camada01 frame 71

Pronto. Agora temos os 2 blocos de texto. Renomeie a camada 01 com um duplo clique diretamente no nome dela e coloque o nome como Texto (atenção: esta é a camada que receberá a Máscara). Crie mais uma camada acima da camada de texto e coloque nela o nome de Máscara. Sua linha do tempo deve ficar com duas camadas, Texto e Máscara, como se vê a seguir:

camadas 01 e 02

Bloqueie a camada Texto (acostume-se a sempre bloquear as camadas onde você não está trabalhando, para evitar qualquer tipo de acidente). Posicione o ponteiro do mouse sobre o primeiro quadro da camada Máscara. Selecione a ferramenta Retângulo na Barra de Ferramentas lateral (a cor de preenchimento não importa, pois ela não será vista depois de realizado todo o nosso procedimento) e faça um retângulo com 150 x 45 pixels, aproximadamente.

retangulo

Clique no retângulo para selecioná-lo e pressione a tecla F8. Na janela que abrirá, coloque um nome qualquer para a forma que estamos convertendo em símbolo, pode ser “retângulo” mesmo, e escolha a opção Gráfico.

Converter símbolo

Agora posicione o retângulo para antes da frase e altere a Largura para o tamanho 2px. Observação importante: para alterar a Largura, selecione o retângulo que criou clicando diretamente sobre ele e digite um valor no Campo L.

retangulo 02 pixels

Em seguida, selecione o quadro 10 e pressione F6.

quadro 10 camada 02

Agora, altere a largura de uma maneira que o retângulo ocupe toda a área do texto. Eu utilizei 420 pixels de largura, pode ser que você tenha de fazê-lo maior, dependendo do tamanho de sua frase. Em seguida, criaremos a animação clicando com o botão direito entre os quadros 1 e 10 da Linha do tempo escolhendo a opção Criar Interpolação clássica.

interpolação

Agora, clique no quadro 26 da camada Máscara e pressione F6, alterando em seguida a largura do retângulo para 2 pixels, com o objetivo de realizar a animação do segundo texto.

quadro 26 camada 02

 

Na sequência, clique no quadro 36 e pressione F6. Agora altere a largura do retângulo de uma maneira que ocupe toda a área do texto. Como mencionei anteriormente, eu  utilizei o tamanho  de 420 pixels de largura.

retangulo 450 pixels

Pronto. Crie agora uma Interpolação clássica entre os quadros 26 e 36. Para Concluir, clique com o botão direito na camada Máscara e escolha a opção “Máscara” nas opções que aparecerão.

máscara

Visualize o resultado final apertando CTRL+ENTER. O filme com o resultado de nosso trabalho irá exibir a nossa máscara pronta!

Arquivo final

Espero que tenham gostado do post! Qualquer dúvida ou dificuldade que venham a ter, entrem em contato na seção de comentários logo abaixo que ajudarei no que for preciso. Em breve retornarei com novos temas, não esqueçam de compartilhar esse tutorial com seus amigos e contribuam com outras sugestões que tentaremos atendê-los o mais breve possível.

Até a próxima!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

Criando uma Maçã no CorelDRAW
Já se imaginou criando uma maçã no computador? Não? Então hoje, você irá aprender nesse tutorial