Efeito Arrasta E Soltar Com Máscara
Efeito arrasta e soltar com máscara
Escrito por AdrianoRJ em
Flash. Data: 28/11/2007
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Ver tópico original no fórum.
Acho que aqui todo mundo já conhece o "efeito máscara", aquele em mostra uma determinada imagem que está por baixo de outra.
Nesse tutorial eu vou ensinar como criar uma mascara onde você pode controlar o efeito, ou seja, usar o mouse para escolher em qual parte vai ser mostrada a imagem que está por baixo.
Vamos começar.
Primeiro(e obvio) crie um documento com o seu Flash, agora nomeie a camada existente como "Fundo"(é bom sempre nomear as camadas para não se perder).

Agora você vai precisar importar uma imagem para a biblioteca, par isso vá em File>Import to Library e selecione a imagem que você achar melhor, depois arraste-a para o palco e a coloque do tamanho do documento.

Agora, transforme a imagem que você pegou em um Movie Clip, indo até Insert> Convert to Symbol> Movie Clip, ou simplesmente aperte F8.

Depois vá em Properties, preencha o campo Instance Name com o nome de Fundo1.

Insira uma nova camada e dê a ela o nme de "Máscara". Mo primeiro frame dessa camada, desenhe um círculo com a ferramenta Oval. Depois transforme esse círculo em um Movie Clip(da mesma forma que você fez com a imagem), nomeie o Movie Clip como "Mascara". Depois, na janela de Properties, preencha o campo Instance Name com o nome de Mascara1.

Selecione o primeiro frame da camada Fundo,e vá na janela Actions, e escreva o seguinte comando:
CODE
Fundo1.setMask(Mascara1)
Esse comando faz com que a instância do Movie Clip Mascara1 seja usada como máscara para a instância do Movie Clip Fundo1. Agora selecione o Movie Clip Mascara1 que é o circulo que foi desenhado, vá na janela Actions e escreva o seguinte comando(tenha certeza de que esteja digitando na janela do Movie Clip Mascara1)
CODE
on (press){
startDrag("");
}
on (release){
stopDrag();
}
O que faz esse código??
CODE
on(press){
O flahs entende da seguinte forma:
Enquanto o usuário mantiver o botão do mouse pressionado sobre o Movie Clip
CODE
startDrag("");
}
O Movie Clip vai segui o Ponteiro do Mouse.
CODE
on(release){
Quando o usuário soltar o botão do Mouse,
CODE
stopDrag();
}
o Movie Clip vai para de seguir o ponteiro, ou seja, vai ficar parado onde o usuário soltar o mouse....
Agora faz um teste, aperte Ctrl+Enter e veja no que vai dar...
Qualquer duvida posta ai, se eu errei em alguma coisa, por favor me corrijam....
Abraços
Você gostou? Comente no fórum!
Comentários:
megaa disse:
Legal o tuto!
Tem uma outra forma de fazer também que eu considero a mais viavel, no primeiro frame vc pode fazer simplesmente assim:
Mascara1.onPress = function(){
this.startDrag()
};
Mascara1.onRelease = function(){
stopDrag()
};
Porque acho mais viavel?
Sempre gosto de deixar a action toda no mesmo lugar, assim não tenho que ficar procurando onde tem action no meus arquivos, e ficando louco por não achar onde coloquei!
Mas lógico, assim como fez não deixa de estar certo, cada um faz como acha melhor forma de trabalho!
Abraços
AdrianoRJ disse:
Mas se você já nomeia os objetos com a fução que ele vai operar, acho que não tem problema, até por que o trabalho já fica todo dividido e você sempre sabendo onde está cada coisa e o que faz, como foi o caso do Movie Clip Mascara. Ele está em uma camada chamada "Mácara" com o nome de "Mascara" para executar a funça de Máscar, ou seja, você já sabe o que vai ser feito, e se caso de algo de errado, você só vai mudar os comando em poucos lugares e não codigo inteiro. Mas ai como você falo, isso varia do modo de cada um mesmo...
Esse modo que você falo eu nunca tinha visto, por incrivel que pareça eu ainda estou aprendendo o AC, mas eu já estudei programação, quando eu tiver tempo eu vou fazer da forma como você falo...
Mesmo assim obrigado
abraços
megaa disse:
O problema de fazer a Action um em cada lugar é quando se trabalha com uma aplicação em Flash muito grande, ai é ruim, isso na minha opinião, cada um faz como acha melhor, lógico!
Abraços
dragun disse:
bem melhor para organizar a montanha de códigos...hehehhe
falow...
bom tuto..
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).