DevSecOps

11 jun, 2007

Máscaras

Publicidade

Olá amigos! Neste artigo conversaremos sobre o efeito máscara, usado no Adobe Flash. As máscaras no Flash têm um tratamento simples, útil e prático de aplicar.

Quando usamos a palavra Máscara, em geral, a primeira associação que fazemos é com o objeto de disfarce. No Adobe Flash, a máscara tem um efeito contrário a esse, pois, em vez de esconder, ela tem a função de exibir o objeto escolhido, que passa a ser considerado como máscara.

Há duas maneiras de utilizar as máscaras:

Primeira maneira

Na linha de tempo, definimos a primeira layer como a máscara (estrela) e na segunda layer inserimos a imagem (paisagem) que será mascarada. Ambos os objetos são gráficos da biblioteca.

Na layer máscara, ao clicar com o segundo botão do mouse, podemos transformar em uma camada “máscara” selecionando a opção “Mask”, como na imagem abaixo:

Com a opção “Mask” selecionada, as layers mudam os ícones e são travadas automaticamente pelo recurso do cadeado.

Cada um dos elementos recebeu um ícone distinto para diferenciar a “máscara” e o “mascarado” na linha de tempo.

A imagem (paisagem), que é a layer mascarada, ficou oculta, sendo exibida somente na área ocupada pela máscara (estrela), como na imagem abaixo:

Na linha de tempo, prolongamos os frames das layers “máscara” e “img_mascarado” até o frame 34.

Para a “máscara”, criamos um quadro-chave no frame 34, no qual a estrela é ampliada até que ocupe toda a área visível da paisagem:

Na layer “máscara” selecionamos o primeiro quadro e, no painel de propriedades, ativamos o efeito Tween Motion (interpolação de movimento) para criar efeito de animação e definimos uma rotação no sentido horário.

Adicionamos uma layer que tem uma ação de “stop” acima da layer “máscara”, para que, quando chegar o último quadro da animação, não se retorne ao primeiro quadro em um loop infinito.

Então, a animação fica assim:

Agora incluimos uma layer que chamamos de “texto_mascarado”, que foi inserida acima da layer “img_mascarado”. Percebe-se que o ícone da nova layer ficou igual à layer “img_mascarado”!

O texto inserido é do tipo estático e, como padrão, é um texto vetorizado (Anti-alias for animation) para que a fonte fique igual em qualquer computador, mesmo que essa fonte não exista no computador do usuário. Se escolhermos “Use device fonts”, a fonte não será exibida em qualquer computador, apenas naquele em que a fonte estiver instalada, além de não aparecer na máscara. Veja abaixo:

Se selecionarmos uma das opções de propriedades de texto Dynamic Text ou Input Text, o botão Embed… ficará ativado. Clicando nesse botão, aparecerá uma lista de caracteres que poderemos embutir. Os mais usados e necessários para nossa língua portuguesa são os que estão aparecendo abaixo. O texto estático vetoriza o que está escrito e o dinâmico ou de entrada deve ser especificado:

Segunda maneira

A máscara aparece através da programação.

Na primeira layer, inserimos a imagem (paisagem), transformamos em um Movie Clip e damos o nome de mc_paisagem. Na segunda layer, inserimos um desenho (estrela), transformamos em Movie Clip e damos o nome mc_mascara.

Entramos no Movie Clip da máscara e criamos uma animação.

Voltamos para a cena e criamos uma layer que chamamos de ações, colocamos um script e definimos a animação como máscara:

mc_paisagem.setMask(mc_mascara);

Com isso, a animação ficará assim:

A máscara em programação exibirá o texto, sem a necessidade de embutir a fonte (transformar em vetor).

Clique aqui para baixar os arquivos deste artigo.