16
set

Mascaras arrastáveis e com gradientes

Com apenas dois simples comandos teremos uma máscara arrastável.
1- Crie um novo documento.
2- Insira no palco do Flash a imagem: destino2.jpg que esta na pasta imagens dentro da pasta da lição. Transforme a imagem em um símbolo Movie Clip com o nome de instância de “foto”.
3- Renomeie esta camada para “mascarada”.
4- Em seguida insira uma nova camada renomeando-a para “mascara” e desenhe uma Elipse.
5- Transforme esta forma em um Movie Clip com o ponto de registro no meio
6- Dê o nome de instância para este Movie Clip de “circulo”.
7- Crie outra camada chamada “acoes” e em seu primeiro frame iremos colocar uma ação do Action Scipt 3 que fará a máscara.
Digite: this.foto.mask = circulo;
Com isso já criamos o efeito de máscara.
8- Para fazer o efeito de arrastar a forma (e, portanto a máscara) numa nova linha, ainda, no painel Actions digite:
this.circulo.startDrag (true);
O método startDrag() que faz com que a forma seja arrastável.
Teste seu filme e veja o efeito.

Mascara arrastável com gradiente no Flash CS5

Mascara arrastável com gradiente no Flash CS5

Máscara com gradiente

Veremos um tipo de máscara diferente. Em vez de totalmente sólida e visível, vamos criar uma mascara que vai ter graduações de visibilidade, que vai de totalmente visível até, aos poucos, o invisível.
1- Crie um novo documento
2- Importe para palco a imagem: destino1.jpg que esta na pasta da lição.
3- Torne a imagem um símbolo do tipo Movie Clip.
4- Prolongue (F5) esta camada até o frame 40.
5- Com a imagem selecionada, ajuste seu nome de instância para “imagem”.
6- No painel Properties na opção Display marque a opção Cache as bitmap.
Essa opção evita que o Flash tenha que redesenhar vetores complexos a toda a movimentação. Ele armazena como bitmap o elemento, melhorando significativamente a performance, pois poderá ser redesenhado mais rapidamente.
7- Crie outra camada e renomei-a como “mascara”. Nesta nova camada desenhe um círculo.
8- Com a forma selecionada abra o painel Color (Window > Color).
9- Na área Type escola o preenchimento radial e ajuste esse gradiente para que ele contenha três quadrados com a mesma cor (tanto faz a cor escolhida): um no início, um no meio e um no final.
10- Ajuste a última cor do gradiente (lado direito) para Alpha 0.
Com isso a forma será formada por um gradiente que se inicia na cor sólida, e em seu final será transparente.
11- Converta esta forma em um Movie Clip e dê o nome de instância para ela de “circulo”.
12- Crie um Motion Tween para a layer que esta a bola e aumenta a mesma no quadro final.
13- Crie outra layer chamada “acoes”e em seu primeiro frame coloque a ação que fará a máscara:
this.imagem.mask = circulo;
Teste o arquivo. Veremos que a máscara estará funcionando, entretanto estará totalmente sólida, sem o efeito de gradiente que criamos.
14- Para que este efeito funcione marque no Painel Properties na opção Display o item Cache as Bitmap.

Nenhum Comentário

Nenhum comentário ainda.

LEAVE A COMMENT

Comments RSS Feed   TrackBack URL