Neste tutorial você vai entender o que vem a ser máscara e o efeito do exemplo acima.

Imagine uma folha de cartolina onde você recorta uma forma qualquer... a máscara é como essa folha de cartolina vazada e pelo "buraco" se pode "enxergar". No flash você desenha um círculo numa camada e, ao transformar esta camada em máscara, a camada inteira ficará "opaca" e apenas no círculo se visualizará o conteúdo da camada de baixo. É isso.

Você pode aplicar esta layer mascarada a uma ou mais camadas, e a máscara pode ter qualquer formato: círculo, quadrado, polígono, uma estrela, uma ameba, um monte de confetes, enfim, a forma que a sua cabeça imaginar, desde que seja um único objeto ou foma livre.

figura a ser mascarada


desenho da máscara


resultado final: o que
foi desenhado na máscara
se torna transparente

Agora que você entendeu o que é máscara, vamos fazer passo a passo o exemplo do início da página, que usa uma máscara com Motion Tween para fazer aparecer o texto gradativamente.

Crie um novo arquivo e vá no menu Modify - Movie... Mude o número de Frame Rate para 20 fps, pois este efeito, que lembra uma máquina de escrever, fica melhor com a velocidade do filme um pouco maior. Modifique também o tamanho do movie para 500 pixels de largura e 150 de altura.

Na timeline insira um keyframe com a tecla F7.
Clique na ferramenta Texto e escreva "PONTO FLASH".
Selecione o bloco de texto e posicione-o no centro do stage. Modifique a seu gosto o tipo de fonte, tamanho, cor e negrito na caixa de opções Character (aqui ela é Futura MdBt, tamanho 26 em negrito).

Vá até a frame ou quadro 26 e tecle F6, para criar uma cópia de seu campo de texto.
Clique na ferramenta Texto novamente e modifique a cópia do texto: "seu ponto de flash na Internet". Vá até o frame 71 e tecle F6.

Pronto - você terminou os 2 blocos de texto. Nomeie a camada como texto (esta é a camada que será mascarada).

Crie mais uma camada acima e nomeie de máscara. No momento, sua timeline deve estar como abaixo.

Trave a camada texto (acostume-se a sempre travar as camadas onde você não está trabalhando).

Posicione o ponteiro do mouse sobre o primeiro frame da camada máscara. Clique na ferramenta Retângulo (a cor não importa muito pois ela não será vista na tela).
Desenhe um retângulo de mais ou menos 150 por 45 pixels. Com o retângulo selecionado, vá até o menu Insert - New Symbol... e, na caixa que se abre, nomeie como "cortina" e escolha a opção Graphic.

Posicione o novo símbolo que você criou de modo a cobrir o início do primeiro bloco de texto, como na figura ao lado.

Posicione o ponteiro no frame 15 e tecle F6. Isto criará mais uma instância do símbolo "cortina" no frame 15.

Agora vamos alterar os tamanhos das instâncias do símbolo cortina no stage e, para isso, vamos usar o painel Info (abra-o clicando no primeiro ícone que fica no canto direito da janela do Flash).

Posicione o ponteiro do mouse no primeiro frame da camada máscara, clique no símbolo "cortina" no stage e, na caixa Info, digite 4 na opção W (largura) e tecle Enter.
Posicione o ponteiro no frame 15, clique no símbolo no stage e modifique a opção W da caixa Info para 200 ou um tamanho que cobra todo o primeiro bloco de texto.

Coloque o ponteiro do mouse no frame 27 e tecle F6 para criar mais uma instância de "cortina". Clique sobre o símbolo no stage e posicione-o de modo a cobrir o início do segundo bloco de texto (melhor fazer isso usando a opção X do painel Info, que proporciona sempre maior controle sobre o posicionamento de qualquer objeto no palco).
Selecione o frame 55 e tecle F6 para mais uma instância de cortina - são as duas instâncias que usaremos no segundo Motion Tween.

Agora vamos alterar os tamanhos. Posicione o ponteiro do mouse no frame 27, clique no símbolo "cortina" no stage e, na caixa Info, digite 4 na opção W (largura) e tecle Enter.
Posicione o ponteiro no frame 55, clique no símbolo e modifique a opção W da caixa Info para 440 ou um tamanho que cubra todo o segundo bloco de texto.

No frame 16 e no frame 56 tecle F7. Isto vai inserir um frame em branco, e limpar a timeline do conteúdo que não queremos.

Para fazer o Motion Tween ou Interpolação de Movimento, clique com o botão direito em qualquer frame da primeira sequência de frames (entre 1 e 15) e escolha Create Motion Tween.

Repita o procedimento na segunda sequência de frames (entre 27 e 55).

Como você sabe se está tudo OK? O Motion Tween vai criar frames azuis com uma seta entre as duas instâncias do símbolo.
Você também pode testar o filme e ver se os retângulos crescem e cobrem perfeitamente os blocos de texto.

Agora, vamos finalizar transformando esta camada em uma máscara.
Um ponto importante a lembrar é que a camada que contém a máscara age sempre sobre a camada imediatamente inferior. Se você quiser mascarar mais de uma camada com a mesma máscara, deverá inserir esta camada sobre a camada mascarada.

Clique com o botão direito na camada "máscara" e escolha Mask. Está feita a sua máscara.

Neste exemplo é a máscara que se move, mas você também pode fazer uma máscara estática mascarando uma camada com Tween Motion. Ou uma máscara que acompanha o mouse. São inúmeros os efeitos que usam máscara e você poderá encontrar exemplos mais complexos nos tutoriais do nível intermediário.

Baixe aqui o arquivo FLA desse tutorial.