Criar e controlar uma máscara por programação (um movieclip cujo conteúdo determina a área que será mostrada em outro movieclip) em Flash MX é uma operação direta (ao contrário do Flash 5). No Flash MX, você cria um movieclip máscara dinamicamente ou não, dando-lhe um nome de instância, digamos, "mask_mc". Coloque-o onde você quer em relação ao clipe que ele irá mascarar (digamos, "masked_mc") e dê este comando:

masked_mc.setMask(mask_mc);

No nosso exemplo acima, a máscara é um movieclip, mask_mc, que contém um retângulo preenchido que se estende de 0 até um ponto fora do palco à direita e afastada o suficiente abaixo para exibir somente a quantidade de texto a ser mostrado a cada vez. O texto está num movieclip, poem_mc, em uma camada abaixo da camada que contém mask_mc. Em uma camada sob o poema está mais um movieclip, bgd_mc, cujo único propósito é fornecer um fundo ao texto para fazê-lo mais legível contra o oceano bitmap que reside na camada mais profunda do filme.

Para Mover a Máscara

Para mover a máscara, simplesmente trocamos a propriedade _x ou _y de mask_mc. Neste exemplo, queremos mover o fundo mc (a cor azul que é exibida por trás do texto) sempre que a máscara é movida, e queremos movê-los ambos verticalmente. Para fazer com que ambos, mask_mc e bgd_mc, rastreiem o mouse exatamente, podemos utilizar este código (no quadro 1 do filme):

this.onEnterFrame = function() {    mask_mc._y = bgd_mc._y = _root._ymouse; }

Isto fornece o rastreamento exato: mouse para cima, máscara para cima; mouse para baixo, máscara para baixo. Mas é muito mais prazeroso proporcionar um tipo de deslizamento, onde a máscara deslize suavemente para a posição depois que o mouse é movido. Para fazer isto, utilizamos uma das equações de abrandamento de Robert Penner, que permitem a aplicação de diferentes equações a algumas variáveis ou propriedades com o passar do tempo. Para um montante especificado de mudança e duração globais, a rotina abrandadora retorna um valor para um incremento de tempo particular naquela duração. Neste caso, será a posição y da máscara que desejamos variar ao longo do tempo, assim ela se move rapidamente a princípio e vai reduzindo até zero assim que atinja seu destino - uma quadrática Ease Out. Aqui vai o código que aplica esta abrandadora para ambas mask_mc._y e bgd_mc._y:

this.onMouseMove = function() {    var y = mask_mc._y;    var dy = _root._ymouse - y;    var t = 0;    var NFRAMES = 20;    this.onEnterFrame = function() {       if (t++ < NFRAMES) {          mask_mc._y = bgd_mc._y = Math.easeOutQuad (t, y, dy, NFRAMES);       } else {          delete this.onEnterFrame;       }    } }

Quando o mouse é movimentado, detectamos o quão distante ele está da posição atual da máscara e então, fornecemos a posição y atual da máscara e o montante de mudança para a rotina easeOutQuad; usamos o resultado retornado para determinar a nova posição y da máscara. Isto é feito por 20 quadros na nossa amostra, incrementando o valor de t passado a easeOutQuad em todos os quadros. Nossa relação de 12 fps (quadros por segundo) e a duração de 20 quadros trabalham juntas belamente para produzir o suave efeito deslizante nesta amostra, mas você pode escolher qualquer combinação de fps (quadros por segundo), duração e tipo de equação de abrandamento que deseje para um número de diferentes efeitos.

Baixe aqui o exemplo desse tutorial

Tradução: Sergio Ramalho