Efeitos interessantes usando Máscaras,

Todos nós sabemos da maravilha que é a máscara no Flash, hoje vamos explorar um pouco a idéia de se usar esse recurso usando movieclips como máscaras.

Para fazer esse tutorial é fácil, precisaremos apenas de 3 imagens com o mesmo tamanho.

Preparando o trabalho:

Começando nosso trabalho, vamos criar um novo arquivo no Flash, com o mesmo tamanho em altura e largura que tiverem as imagens, depois vamos importar as imagens para a Biblioteca (Library), clicando em File / Import / Import to Library.

Começando:

Com as imagens inseridas na Biblioteca, iremos agora criar um movieclip que será nosso primeiro efeito, cliquem em Insert / New Symbol / e na janela vamos dar o nome de animação 1, marcar a opção “movie clip” e clicar em “OK”, então entraremos na timeline do movieclip.

Apertando a tecla F11, abriremos a Biblioteca (Library), e dela vamos clicar e arrastar a primeira imagem para o movieclip e colocar a imagem nas posições 0 em x e 0 em y:

Vamos dar o nome pra esse layer de Imagem 1, e poderemos trancar ele e criar um novo layer com o nome “Mascara”, nele vamos desenhar um retangulo sem bordas que alcance a largura toda da imagem, depois de criado o retangulo, aperte as teclas Shift + F9 para abrir a janela color mixer, escolhe a opção Solid em Fill Color (cor de preenchimento), e deixe a transparencia em 50%:

Vamos selecionar esse retangulo e apertar a tecla F8, vamos salvar ele como movieclip, com o nome de “mascara 1 ” sem aspas.

Agora que nosso retangulo é um movieclip, vamos dar um duplo clique nele para entrar na sua timeline, a barra de navegação deverá estar assim:

Mais uma vez vamos selecionar esse quadrado dentro do movieclip, vamos apertar a tecla F8, e salvar ele como movieclip, com o nome “barra 1″ sem aspas, ele ficaré conforme a imagem abaixo:

Agora vamos criar várias cópias desse retangulo até que ele cubra toda a imagem, muito cuidado para não ficar nenhum espaço entre eles:

Certo:

Errado:

Notem que na figura acima os movieclips dos retangulos não cobriram direito a imagem pois há alguns espaços entre eles, então deixem bem encostados para não dar problemas com a máscara.

Após ter multiplicado os retangulos e cobrir a imagem com eles, vamos selecionar todos eles a apertas as teclas Ctrl + Shift + D, é o mesmo que clicar com o botão direito do mouse sobre eles e clicar em “Distribute to Layers” , fazendo isso o Flash vai distribuir cada retangulo num layer diferente, então agora vamos fazer uma animação simples com esses retangulos, vamos clicar no mais alto e achar o layer correspondente a ele, que deverá ser o primeiro debaixo para cima:

Então a ordem será essa, vamos deixar esse primeiro layer onde está e os decima vamos deixar 2 frames de distância entre um e outro:

Depois de feito isso, vamos apertar a tecla F5 embaixo do ultimo frame criado, vamos repetir essa operação em todos os layer, por ultimo, no layer vazio que sobrará encima, vamos dar o nome dele de “ações” e criar um frame vazio (F7) encima do último frame, e colocar a ação:

stop();

Vejam o resultado de como ficará esse movieclip:

Se apertar a tecla Enter, perceberão que os retangulos começarão a cobrir a imagem decima para baixo, agora vamos voltar para o movieclip animação 1, e vamos criar mais um layer acima do layer nomeado como “mascara”, depois disso clique com o botão direito do mouse no primeiro frame no layer máscara e clique em Copy Frames, logo em seguida clique com o botão direito do mouse sobre o novo layer criado e clique em paste frames, então terá dois layers duplicados no movieclip:

Vamos renomear o Layer criado acima para “Luz” e com o do meio vamos clicar com o botão direito do mouse sobre ele e clicar em Mask:

Agora vamos voltar pra timeline principal, e vamos arrastar o movieclip da biblioteca pro palco, vamos deixa-lo nas posições 0 em x e y:

Vou tirar apenas a ação stop(); no meu arquivo, para mostrar o resultado até agora, mas não tire no seu arquivo, se você testar ele deve ficar assim, só não ficará continuo como o desse exemplo:

Então ele carrega a máscara nessa ordem que é a do movieclip e fica com o branco por cima por causa daquele layer “Luz”, agora vamos finalizar esse efeito, vamos abrir a Biblioteca, clicar sobre o nome do movieclip “Barra 1″ que é aquele retangulo e vamos clicar em Edit, então veremos o triangulo no palco, vamos clicar no frame 5 desse movieclip, e vamos apertar a tecla F6 para fazer uma cópia do frame 1 para o frame 6, agora cliquem no frame 1, e nas propriedades coloque a opção Shape no Tween, assim sua timeline deverá ficar verde como no exemplo:

No primeiro frame vamos selecionar o retangulo e apertar a tecla “Q”, depois mantenha a tecla “Alt” pressionada e vamos deixar o retangulo mais fino, só que alinhado ao centro:

E no ultimo frame vamos abrir a paleta de cores denovo (Color Mixer) e vamos escolher a cor sólida branca, só que ao invés de 50% agora vamos deixar com 0%, totalmente transparente:

Se o retangulo sumir, não se desespere, ele está ali, só que agora está transparente, agora crie um novo layer, e no frame 5 aperte a tecla F7 para criar um frame em branco, e nele coloque a ação:

stop();

Voltem a timeline principal e testem a animação denovo, ela deverá estar assim, só que sem loops é claro:

Agora que viram que deu certo a primeira imagem, podem remover o movieclip da timeline principal, porque depois vamos inserir os 3 de uma vez só, depois de remover, vamos clicar em Insert / New Symbol e vamos criar um novo movieclip com o nome de Animação 2.

Com a Biblioteca aberta, arraste a segunda imagem para o movieclip que está vazio, colocando-a na posição 0 em x e y como fizemos com a imagem anterior, feito isso tranque esse layer da imagem e crie um novo layer com o nome “Macara”.Nesse layer desenhe um quadrado branco com 50% de transparencia, como no movieclip anterior, e tambem coloque-o na posição 0 em x e y:

Selecione esse quadrado, e apertando a tecla F8, vamos transforma-lo em um movieclip com o nome Mascara 2, agora clique duas vezes sobre o quadrado para entrar na timeline do movieclip Mascara 2, e nele vamos selecionar o quadrado denovo e vamos apertar novamente a tecla F8 e salvar ele como movieclip com o nome quadrado 1, e como o retangulo vamos multiplicar ele na imagem toda até cobrir a imagem:

Com todos os movieclips selecionados no palco, vamos clicar em Modify / Timeline / Distribute to Layers (Ctrl + Shift + D) assim ficará cada movieclip num layer diferente.

Vamos “embaralhar” os layers, alterando eles bastante de posições, para que a sequencia dos quadrados que forem aparecer fiquem trocadas, ou se quiserem podem seguir uma ordem, para embaralhar é ó clicar e arrastar os layers para cima ou para baixo, depois de embaralhar bastante, vamos fazer como no primeiro movieclip, começando debaixo para cima, vamos fazer aquela escadinha, dando espaço de dois frames entre um frame que contem um quadrado e o outro:

Aperte a tecla F5 em todos os frames abaixo do ultimo que foi criado.No layer acima que sobrou, vamos dar o nome de “Ações” para esse layer e no último frame onde acaba o ultimo quadrado vamos apertar a tecla F7 para criar um novo frame em branco e nele vamos colocar a ação

stop();

De um duplo clique em qualquer um dos quadrados para entrar na timeline do movieclip Quadrado, vamos selecionar o quadrado e apertar a tecla F8 mas uma vez, dessa vez vamos salvar ele como grafico, com o nome de “Quadrado”, em seguida, clique no frame 6 e aperte a tecla F6 para fazer uma cópia do frame 1 no frame 6, cliquem no frame 1 e na barra de propriedades, mude o Tween para Motion, em seguida selecionem o objeto e vamos clicar em Modify / Transform / Rotate 90° CCW (Ctrl + Shift + 10), aparentemente ele não fez nada, mas se testar a timeline verá que ele andou 90 graus sentido ante horário, agora com a ferramenta Free Transform Tool, vamos comprimir esse quadrado, mantenha a tecla Shift pressionada para ele diminuir em direção ao centro do quadrado:

No último frame, clique no quadrado, e na barra de propriedades no campo color, selecione o alpha e deixe ele em 0% (totalmente transparente).Crie um novo layer com o nome de ações, crie um novo frame no frame 6, e coloque a ação:

stop();

Volte para a timeline do movieclip Mascara 2, e depois para o movieclip Animação 2, chegaremos a essa timeline:

Crie mais um layer acima do layer Mascara, com o nome de “Luz”, copie o primeiro frame do layer mascara e colar no primeiro frame do layer Luz, uma maneira fácil de fazer isso é dar um clique no frame depois manter pressionado a tecla Alt e clicar e arrastar o frame do layer Mascara, pro frame do layer Luz, automaticamente o layer Luz mudará seu nome para Mascara, mas é só renomear denovo que não tem problema.

Cliquem com o botão direito do mouse sobre o layer Mascara e cliquem em Mask, assim o movieclip será mascara da imagem que está por baixo, quem quiser testar o efeito é só voltar para a timeline, arrastar o movieclip para o palco e testar, o resultdo deverá ser esse:

Quem fez o teste, delete o movieclip da timeline para ele ficar apenas na Biblioteca, agora vamos criar o terceiro e ultimo movieclip.

Clique em Insert / New Symbol / e vamos criar um Movieclip com o nome “Animação 3″ e clicar em Ok, assim ja estaremos na timeline desse movieclip.Abra a Bilblioteca e puxe a ultiam imagem para o palco desse movieclip, deixando a imagem na posição 0 (zero) em x e y:

Tranque esse layer e crie mais um com o nome “Mascara”, nele vamos desenhar um retangulo com a mesma altura da imagem do lado direito, vamos fazer ele na cor branca com 60% de transparencia, como fizemos nos anteriores (que estavam com 50% de transparencia):

Selecione esse retangulo e salve ele como um movieclip com o nome de Mascara 3, de um duplo clique pra entrar na timeline desse movieclip, selecione novamente o retangulo e salve ele como movieclip com o nome barra 3, agora vamos fazer cópias dele no palco e cobrir a imagem com eles:

Depois de selecionar todos os movieclips no palco, clique com o botão direito do mouse sobre eles e clique em “Distribute to layers”, como nos outros movieclips ele irá distribuir os movieclips cada um em um frame, agora vamos fazer diferente e fazer uma escada com espaço de dois frames até a metade dos retangulos, depois a mesma voltando, então até a metade ela vai, e da metade pra lá ela volta:

Depois disso deixe todos os frames estáticos até o ultimo usando no movieclip, e no primeiro frame lá encima vamos criar um frame em branco no ultimo frame e colocar a ação:

stop();

Feito tudo isso de um duplo clique em qquer movieclip do palco para editar o retangulo, certifique-se que você está na timeline Scene 1 >> Animação 3 >> Mascara 3 >> Barra 3, clique no frame 6 e aperte a tecla F6 pra fazer uma cópia do frame 1 no frame 6:

Clique no primeiro frame e mude o tween para Shape, selecione o retangulo no palco e nas propriedades deixe o H com o valor de 5 pixel, agora selecione o retangulo no frame 6, abra a paleta do Color Mixer, e coloque a transparencia do preenchimento para 0, deixando o objeto todo apagado:

Crie mais um layer com o nome Ações e no ultimo frame coloque a ação:

stop();

Agora volte para a timeline do Movieclip Mascara 3, nele criamos aquelas duas escadinhas de frames, então vamos inverter os movieclips que estarão desse ponto pra cima:

Então da metade dos layers pra cima, vamos clicar no frame, depois clicar no objeto que tem nele que está no palco, e vamos clicar em Modify >> Transform >> Flip Vertical, então esses movieclips ficarão de ponta cabeça, como nesse exemplo:

Repita a operação até o ultimo frame decima, assim ficarão metade normal e metade de ponta cabeça:

Volte para a timeline do movieclip Animação 3, faça um novo layer acima do layer Mascara e copie o primeiro frame do layer Mascara para o primeiro frame do layer acima, depois disso de o nome ao layer decima de “Luz” e clique com o botão direito do mouse encima do layer “Mascara” e no menu que se abrirá, clique em Mask, e assim estão prontos nossos 3 movieclips, vamos agora voltar a timeline principal do swf que ainda está vazia.

Vamos criar 5 Layers, o primeiro debaixo pra cima se chamará Imagem de fundo, nele iremos criar um frame em branco no segundo frame, para isso é só clicar no segundo frame e apertar a tecla F7, feito isso vamos abrir a Biblioteca apertando a tecla F11, e vamos puxar a imagem usada no ultimo movieclip para o palco, e colocar ela na posição 0 em x e y, mas preste atenção pois será só a imagem e não o movieclip que criamos:

Em seguida selecione a imagem e transforme ela em um movieclip com o nome img_fundo, e de o nome de instancia para esse movieclip de “img_fundo” sem aspas:

Clique no terceiro frame desse Layer e aperte a tecla F5 para deixar ele estático até o frame 3, depois disso vamos pro segundo Layer onde daremos a ele o nome de “Animação 1″, vamos criar um frame em branco no segundo frame desse layer e vamos arrastar uma cópia do movieclip Animação 1 da biblioteca para o palco, deixando na posição 0 em x e y, ele deverá ficar exatamente encima da imagem que ficou por baixo, caso não fique, pode ser a mascara no movieclip que não está na posião 0, se a posição 0 em x e y não se encaixar prfeitamente, coloque a olho mesmo até ajustar, depois disso clique no terceiro frame e tambem aperte a tecla F5 para deixar os dois estáticos.

Depois disso vamos para o terceiro Layer, o nome dele será “Animação 2″, vamos fazer um novo frame no terceiro frame desse layer, e vamos fazer o mesmo procedimento, arrastar o movieclip “Animação 2″ e coloca-lo no palco na posição 0 em x e y, depois de ajustara sua posiçã se por acaso for preciso, vamos clicar no frame 4 e apertar a tecla F5 para manter a animação estática nos frames 3 e 4.

Vamos para o quarto Layer, com o nome de “Animação 3″, vamos criar um frame em branco no frame 4, e arrastar o movieclip “Animação 3″ da biblioteca para o palco, depois de ajustar ele nas posições tambem vamos deixar o frame 5 estático, apertando a tecla F5:

No ultimo Layer, vamos dar o nome de Ações, e vamos colocar essa ação no primeiro frame:

_root.numero = 1;

Em seguida crie um novo frame no frame 2, que vai receber a seguinte ação:

stop();
_root.img_fundo._visible = false;
if (_root.numero == 2) {
_root.img_fundo._visible = true;
}
comeco = setInterval(avancar, 3000);
function avancar(){
if (_currentFrame == 4) {
clearInterval(comeco);
_root.numero = 2
gotoAndStop(2);}
else {
nextFrame();
}
}

Detalhando o código:

Acima criamos uma função que fará com que a cada 3 segundos a timeline ande 1 Frame, mostrando assim uma animação a cada 3 segundos.
A ação _root.img_fundo._visible = false; torna aquele movieclip imagem de fundo transparente na primeira passagem, e a partir da segunda passagem (loop) ele aparecerá por baixo da primeira animação pra parecer que é continuação do final da animação.
Então criamos a ação:
if (_root.numero == 2) {
_root.img_fundo._visible = true;
}
Ela que dizer que se o numero do _root que criamos no frame receber o valor 2, então a imagem de fundo que criamos ficará visível, isso acontecerá a partir da segunda vez que se repetir o efeito.
comeco = setInterval(avancar, 3000);
function avancar(){
if (_currentFrame == 4) {
clearInterval(comeco);
_root.numero = 2
gotoAndStop(2);}
else {
nextFrame();
}
}
Acima se declarou o intervalo da função avançar para 3000, então se cada 1000 corresponde a 1 segundo, isso fará com que a cada 3 segundos a função seja executada.
Então ela faz uma condição dizendo que se o frame atual for o frame 4, ela vai quebrar esse intervalo, e o valor do numero de _root vai passar a ser 2, assim fazendo aparecer o movieclip na segunda passagem, e o clearInterval que faz parar o Intervalo, serve apenas, para quando recomeçar a função pra ela não dobrar, senão ela começa a pular 2 frames por vez, depois 3, até ficar maluca a função, então é só um “anti-bug”.
E por fim, se for verdadeiro de o frame atual ser o 4, ele vai mandar pro frame 2, onde recomaça a função.
No else vemos que até chegar no frame 4 ele só vai caminahndo para o próximo frame com a ação nextFrame até chegar no frame 4.

No final dessa jornada, seu trabalho resultará nisso:

Qualquer duvida é só perguntar no forum, espero que aproveitem bem este tutorial e abusem da criatividade de se trabalhar com máscaras e movieclips.

Até a Próxima !!!

Gustavo Henrique Carneirinho