Banner usando "Mask"




Estaremos mostrando como criar um banner animado usando uma grande ferramenta do Flash, a "Mask" (Máscara).Mostraremos todos os passos para você aprender a usa-la.Vamos lá.

>Prévia

-Baixar Fotos

01. Antes de tudo, baixe as fotos que vamos usar para criar o nosso banner.


02. Crie um novo documento.Aperte Ctrl+J para mostrar as propriedades do documento (Document Properties), redimencione o arquivo para 450 pixels por 150 pixels.Agora coloque o “Frame rete” com o valor de 28 fps e aperte ok.Confira com a figura.



03. Agora siga o caminho, File > Import > Import to Libraly. Você vai escolher as imagens que acabou de baixar para fazer esse tutorial.Selecione as cinco imagens (image1,image2,image3,image4,image5).



04. Ainda com a janela aberta vá em “Align” (Ctrl+K) e faça isto:

1.Certifique-se que o “Align” / “Distribute to Stage” estão ativados.
2. Clique no botão “Align horizontal center button”.
3. Clique no botão “Align vertical center”.



Agora as imagens estão alinhadas com a imagem de fundo.

05. Ainda com a janela aberta aperte “F8” (Convert to Symbol) para coverter esta imagem em um “Movie Clip”.



06. Dê um duplo clique na “layer 1” e coloque ela com o nome de “image1”. Depois disto,clique no “Frame” 135 e aperte “F5”.

07. Crie uma nova camada em cima da camada “image1” e coloque ela com o nome “image2”. Depois disto, selecione a camada “image2”, clique no “Frame” 60 e aperte “F6”. Repita os passos 03,04 e 05 para a “image2”. Após esses passos você ja vai ter alinhado (Align) e convertido para “Movie Clip”, basta clicar agora no “Frame” 125 e no 135 e apertar “F6”

08. Ainda no “Frame” 135, selecione a ferramenta “Selection Toll” (V) e clique sobre a imagem para selecionar. Depois vá no painel “Properties” abaixo do palco. No lado direito você verá a opção “Color” selecione “Alpha” e coloque 0%. Confira na imagem.



09. Clique com o botão direito do mouse em qualquer parte da área cinzenta entre o “Frame” 125 e 135 sobre o cronograma e escolha “Create Motion Tween”



10. Crie uma camada em cima da camada 2 e dê o nome a ela de “Mask”.

11. Agora vá em cima do “Frame” 60 da camada “Mask e aperte “F6” usando a ferramenta “Flash Tools”, desenhe uma figura igual e na mesma posição da figura abaixo.



12. Clique então no “Frame” 75 e pressione F6. Enquanto você ainda estiver no frame 75, mov a a forma que você criou para a posição mostrada na figura abaixo.



13.Aperte o botão direito do mouse em qualquer parte da área cinzenta entre o “Frame” 65 e 75 sobre o cronograma e escolha “Create Motion Twee” no menu.



14. Selecione a camada “Mask”e vamos agora converter ela em máscara realmente. Clique com o botão direito do mouse em cima da camada “Mask” e selecione MASK.



Chegamos ao fim, foi feito com as duas primeiras imagens. repetir esse processo também para todas as outras imagens.

-Baixar Aquivo (.fla)

Site de origem:http://www.flashvault.net

Um grande abraço.

5 comentários:

Principal disse...

Boa noite Tiago!!! COmo vai?
Estive seguindo seu tutorial, mas nao sei onde estou errando, pois quando a mascara esta passando, soh aparece partes da outra figura, e q figra que prevalece continua sendo da img2, sera q vc poderia me ajudar a entender onde estou falhando??
Aguardo retorno!!!
meu email: vi.arievilo@gmail.com

Tiago Cedrim disse...

Olá amigo. Você seguio o passo que você tem que aplicar a forma como uma "Mask"?

se sim,detalhe mais o seu problema que irei ter um grande em ajuda-lo.
continue entrando sempre no blog.
abraço.

Lukas - BW disse...

Muito bom seu blog,sou o cara do respostas.

Tenho 14 anos,qual sua idade?

Ken disse...

quando eu coloca o mask fica perfeito no flash mas quando transformo em swf a mascara some e o efeito fica em cima de tudo...
se alguem sober me ajudar eu agradeço

Ken disse...

quando eu coloca o mask fica perfeito no flash mas quando transformo em swf a mascara some e o efeito fica em cima de tudo...
se alguem sober me ajudar eu agradeço