Via RSS
Olá pessoal.
Já faz um tempinho que estava atrás de um efeito que criasse ondas no Flash, e finalmente encontrei uma Classe sensacional que simula esse efeito e ainda podemos determinar alguns valores para personalizar da maneira que desejarmos.
A Classe foi escrita por David Lenaerts, e vocês podem fazer o download dela no Blog do David. Encontrei essa Classe graças a um exemplo que Lee Brimelow fez numa tela de toque, e decidi fazer um pequeno exemplo mostrando como criar o mesmo efeito usando o bom e velho mouse.
Depois de terem feito o download da Classe, criaremos um novo arquivo usando ActionScript 3 (esse exemplo não funciona em ActionScript 2), deixem a Classe no mesmo local do arquivo fla, como nessa imagem.
No Flash, criem um MovieClip e insiram uma imagem que sofrerá com o efeito das ondas, instanciem esse MovieClip de mc e no frame desse MovieClip insiram as seguintes ações:
/* Importa a Classe responsável pelo efeito de onda */ import be.nascom.flash.graphics.Rippler; /* Cria uma instancia da Classe Rippler */ /* O primeiro parametro é o alvo a ser usado */ /* O segundo parametro é a força da onda */ /* E o terceiro parametro é o tamanho da onda */ var ondas:Rippler = new Rippler(mc, 30, 2); /* Adicionamos um listener ao MovieClip */ /* Quando clicarmos sobre ele chama a função mcPress */ mc.addEventListener(MouseEvent.MOUSE_DOWN, mcPress); /* Função disparada pelo evento MOUSE_DOWN */ function mcPress(event:MouseEvent):void { /* Adicionamos um listener para o palco */ /* Para verificar quando o usuário soltou o clique */ stage.addEventListener(MouseEvent.MOUSE_UP, stageUp); /* Adicionamos outro listener ao MovieClip */ /* Listener para saber quando o mouse se mover */ mc.addEventListener(MouseEvent.MOUSE_MOVE, mcMove); } /* Função disparada pelo evento MOUSE_UP */ function stageUp(event:MouseEvent):void { /* Removemos os listeners que não vão ser mais usados */ stage.removeEventListener(MouseEvent.MOUSE_UP, stageUp); mc.removeEventListener(MouseEvent.MOUSE_MOVE, mcMove); } /* Função disparada pelo evento MOUSE_MOVE */ function mcMove(e:MouseEvent):void { /* Cria o efeito da onda no MovieClip */ /* O primeiro parametro é a posição X do mouse */ /* O segundo parametro é a posição Y do mouse */ /* O terceiro parametro é o tamanho da onda */ /* E o último parametro é o alpha da onda */ ondas.drawRipple(e.target.mouseX, e.target.mouseY, 20, 1); } |
O meu exemplo ficou assim.
Aproveitem essa fantástica Classe.
[]s
Tags:ActionScript, ActionScript 3, Flash, Flash CS3, Flash CS4, Flash CS5
RSS
Comentários
Olá, gostaria de saber se você tem como enviar o arquivo que vc fez o exemplo, pois estou tentando fazer mas não consigo, está dando vários erros. Estou no aguardo, obrigado.
Fábio
30/06/2010
Consegui fazer funcionar, o problema é aque agora ele demora muito pra mostrar as ondas, clico e demora muito para começar as ondas, a imagem que estou usando tem 25kb, e tamanho de 823 X 384 pixels, pode ser isso?
Fábio
30/06/2010
Consegui, era a posição da imagem, obrigado
Fábio
30/06/2010
Cara pegou legal nossa muito bom gostei muito obrigado
Daniel
27/07/2010
Quando faço o processo não dá erro, mas não consigo fazer funcionar.
Adelson
27/07/2010
Olá Adelson.
Você criou um MovieClip com instancia de mc e colocou a imagem que você quer que o efeito ocorra? Deixou a Classe no mesmo local de seu arquivo fla? Revise esse passos, qualquer coisa entre em contato mandando seus arquivos.
natan[arroba]natanalves.com
[]s
Natan Alves
28/07/2010
Será que você poderia fazer um video-tutorial por favor?!
Não consegui fazer esse efeito..
Obrigado
Alexandre
16/11/2010
Olá Alexandre.
Mesma resposta que dei ao Rubens, não acho que seja necessário pois não tem muito segredo para fazer esse tutorial, é fazer o download da Classe e usar as ações passadas. Se tiver dúvidas ou dificuldades é só dizer quais são que te ajudo sem problemas.
[]s
Natan Alves
18/11/2010
Cara da pra vc colocar um video tutorial?
Rubens Temudo
01/11/2010
Olá Rubens.
Não acho que seja necessário pois não tem muito segredo para fazer esse tutorial, é fazer o download da Classe e usar as ações passadas. Se tiver dúvidas ou dificuldades é só dizer quais são que te ajudo sem problemas.
[]s
Natan Alves
18/11/2010
Então, no flash, aparece que tem um erro de código, e sou meio leigo para programar em action script, será que poderia revisar o código por favor?!
Obrigado.
Alexandre
19/11/2010
Qual erro? Acho mais fácil me mandar seus arquivos para que eu veja o que pode estar errado.
natan[arroba]natanalves.com
[]s
Natan Alves
21/11/2010
Natan, td certo?
Sou fraquinho em flash.
Só funciona se eu ativá-lo através de algum evento? E se eu quisesse que executasse o efeito ao carregar o swf? Chamo pelo AS mesmo ou linko com uma função em javascript?
Obrigado pelas dicas!
Abraço!
Bruno
08/12/2010
Se quiser pode fazer funcionar usando intervalos para gerar o efeito no lugar do uso do evento CLICK da Classe MouseEvent.
Natan Alves
16/12/2010
Natan, impossível usar o componente em AS2? Estou montando um website em AS2 e queria colocar o efeito no LOADER.
Aguardo.
Obrigado.
Guilherme
23/12/2010
Olá Guilherme.
Impossível, a Classe foi feita usando ActionScript 3 e o ActionScript 2 não consegue interpretar o ActionScript 3.
[]s
Natan Alves
23/12/2010
Cara funcionou ok, mas o mouse fico abaixo, exemplo eu passo o mouse na parte de baixo da imagem e a figura tem o efeito na parte de cima.
Fabio
31/01/2011
Olá Fábio.
Estranho esse erro, tem como mandar um link do efeito publicado para que eu possa ver se o mesmo acontece por aqui?
[]s
Natan Alves
31/01/2011
o resultado foi esse:
http://www.fabiosbarreto.com.br/efeito/index.swf
Fabio
01/02/2011
Olá Fábio.
Certifique-se de que seu MovieClip está com o ponto de registro no canto superior esquerdo (o conteúdo desse MovieClip tem que estar na posição 0 nos eixos X e Y). Fazendo isso resolve o problema.
[]s
Natan Alves
05/02/2011
Olá, Natan muito bom essa classe e sua explicação sobre como aplica-la.. estou com um problema queria saber da sua parte se poderia me ajudar ,, estou usando seu exemplo porém preciso fazer um preloader e ja tentei de várias formas e sempre da erro pelo motivo do action do classe , teria alguma ideia de como nessa animação colocar um preloader sem que de problema?
fico grato !!!
Deivid Barreto
10/03/2011
Olá Deivid.
Você quer carregar o swf que contém o efeito das ondas ou você quer inserir um preloader no seu arquivo?
[]s
Natan Alves
13/03/2011
Olá, Natan … Obrigado pela atenção da minha dúvida.
Natan seguir suas instruções no tutorial e conseguir realizar a aplicação do efeito corretamente, muito bom o efeito…
Porém no meu arquivo apliquei dentro do MovieClip ( MC ) uma transição de imagens na qual todas as imagens também ficaria com o efeito água, mas agora estou tentando colocar um “PRELOADER” para mostrar o carregamento do arquivo e utilizei um script em action para realizar o “PRELOADER” mas toda vez que faço o teste da erro.
Exemplo. Quando realizo a aplicação do efeito nas transições de imagem sem o preloader o arquivo funciona certinho,, com efeito…. mas quando aplico no action o script para preloader,, o preloader funciona mas o efeito da água não é aplicado nas imagens, mesmo eu tentando fazer um “PRELOADER” por frames não da certo,,
Queria uma dica de como posso fazer esse preloader na minha transições de imagens e manter o efeito da água na minha transição de imagens.
Fico grato pela atenção !!!
Deivid Barreto
14/03/2011
Olá Deivid.
Me mande seus arquivos para que eu possa ver o que pode estar de errado.
[]s
Natan Alves
14/03/2011
Boa tarde Natan! cara queria que este efeito executasse automático mais não estou conseguindo. teria como vc me ajudar a resolver isso ?
at.
Silvio
Silvio
10/05/2011
Olá Silvio.
Você pode colocar essa linha para gerar o efeito automaticamente:
ondas.drawRipple(Math.random()*stage.stageWidth, Math.random()*stage.stageHeight, 20, 1);Só que com isso o efeito só ocorrerá quando o arquivo for iniciado.
[]s
Natan Alves
27/05/2011
Fala Nathan!
usei seu exemplo mas o efeito só aparece 1x no canto superior esquerdo da tela e mesmo assim, demorando muito para acontecer, e n acontece em relação a posição do mouse. Tem como me dar uma ajuda nisso?
Abs, Bruno
Bruno
25/05/2011
Olá Bruno.
O MovieClip que vai ter o efeito tem que ter seu ponto de registro no canto superior esquerdo (o conteúdo do MovieClip tem que estar acima da posição 0 nos eixos X e Y) para funcionar corretamente.
[]s
Natan Alves
27/05/2011
Gostei do efeito, muito bacana. Só que eu gostaria de saber o código para que esse efeito seja automático, ou seja, sem depender do mouse. obrigado
Rodrigo
25/05/2011
Olá Rodrigo.
É só usar a ação que fica dentro da função disparada pelo MOUSE_MOVE:
ondas.drawRipple(Math.random()*stage.stageWidth, Math.random()*stage.stageHeight, 20, 1);[]s
Natan Alves
27/05/2011
Funcionou Natan, mas a animação ainda depende do clique do mouse.
Eu gostaria que essa animação disparasse de 10 em 10 segundos e que não dependesse de clique ou de qualquer ação do usuário, ou seja, completamente automático. Tem como? Obrigado pela sua atenção.
[]´s
Rodrigo
28/05/2011
Olá Rodrigo.
É só usar a Classe Timer para criar o intervalo desejado pra animar o MovieClip a cada 10 segundos.
ondas.drawRipple(Math.random()*stage.stageWidth, Math.random()*stage.stageHeight, 20, 1);var intervalo:Timer = new Timer(10000);
intervalo.addEventListener(TimerEvent.TIMER, disparou);
intervalo.start();
function disparou(event:TimerEvent):void {
ondas.drawRipple(Math.random()*stage.stageWidth, Math.random()*stage.stageHeight, 20, 1);
}
[]s
Natan Alves
05/06/2011
Ola, amigo, estou tendo um problema, fiz os passos que você citou acima, porém quando gero o arquivo .swf w .html, aparecem esses erros abaixo:
Scene 1, Layer ‘Layer 1’, Frame 1, Line 10 1120: Access of undefined property mc.
Scene 1, Layer ‘Layer 1’, Frame 1, Line 7 1120: Access of undefined property mc.
Scene 1, Layer ‘Layer 1’, Frame 1, Line 24 1120: Access of undefined property mc.
Scene 1, Layer ‘Layer 1’, Frame 1, Line 18 1120: Access of undefined property mc.
Você poderia dar uma dica de como posso resolver?
Rogerio
07/06/2011
Olá Rogerio.
Você instanciou seu MovieClip com o nome de mc?
[]s
Natan Alves
11/06/2011
Caro Mestre Natan…
Para usar esse efeito dependendo somente do movimento do mouse, como eu faria?
Gerar a onda sem depender do clique.
Obrigado pela ajuda.
Filipe
08/06/2011
Olá Filipe.
Você consegue assim:
ondas.drawRipple(Math.random()*stage.stageWidth, Math.random()*stage.stageHeight, 20, 1);var intervalo:Timer = new Timer(10000);
intervalo.addEventListener(TimerEvent.TIMER, disparou);
intervalo.start();
function disparou(event:TimerEvent):void {
ondas.drawRipple(Math.random()*stage.stageWidth, Math.random()*stage.stageHeight, 20, 1);
}
[]s
Natan Alves
11/06/2011
Boa noite.
estou com o seguinte problema na hora de executar.
1172: Definition be.nascom.flash.graphics:Rippler could not be found.
1172: Definition be.nascom.flash.graphics:Rippler could not be found.
1046: Type was not found or was not a compile-time constant: Rippler.
1180: Call to a possibly undefined method Rippler.
Rodrigo
11/06/2011
Cara funcionou certinho, só que eu queria que o efeito acontecede da mesma forma do blog do david, passar o mouse encima e acontecer a animação, sem precisar clicar. tem como?
Rodrigo
14/06/2011
Olá Rodrigo.
Você pode trocar o evento CLICK pelo evento MOUSE_OVER, assim quando passar o mouse sobre o MovieClip já começa o efeito.
[]s
Natan Alves
24/06/2011
Obrigado pela disposição em responder.
Admiro muito muito a forma como você domina essa ferramenta.
Mas não seria exatamente esse efeito que eu gostaria de aplicar. Gostaria de deixar igual ao do “site exemplo” as ondas se movimentam sem a necessidade de clicar com o botão do mouse. Seria como se esse efeito fosse gerado no estado “OVER”, apenas passando o mouse sobre o movieClip. De qualquer forma agradeço a sua atenção.
Filipe
13/06/2011
Bom dia !
Adoro este efeito , mas gostava de saber se é possível que o efeito de água se active automaticamente e não ao clicar-mos com o rato. OU seja assim que pormos o Ctrl+enter o efeito estar constantemente a fazer, se der para fazer isso , o que é que preciso mudar no código.
Obrigada
ad
29/06/2011
Olá.
Dá uma olhada nos comentários anteriores que eu respondo como pode fazer o efeito sem que precise clicar com o mouse.
[]s
Natan Alves
07/08/2011
Muito bom o efeito. Parabéns pelo post.
Uma dúvida, da pra trocar o efeito para quando for passar o mouse? sem ter que clicar?
Pois quero que ao passar o mouse por cima da imagem, aconteça o efeito.
Agradeço desde já.
Sibélius Júnior
25/08/2011
não tinha visto a resposta emcima.. deu certinho! vlwww
Sibélius Júnior
25/08/2011
Caro Natan, o tutorial é show de bola, quero te agradecer desde já, mais ainda tenho uma duvida, aproveitando a duvida do amigo ai acima (Para usar esse efeito dependendo somente do movimento do mouse, como eu faria?
Gerar a onda sem depender do clique.) Gostaria de saber em que linha coloco o seu script que vc apresentou para a solução:
ondas.drawRipple(Math.random()*stage.stageWidth, Math.random()*stage.stageHeight, 20, 1);
var intervalo:Timer = new Timer(10000);
intervalo.addEventListener(TimerEvent.TIMER, disparou);
intervalo.start();
function disparou(event:TimerEvent):void {
ondas.drawRipple(Math.random()*stage.stageWidth, Math.random()*stage.stageHeight, 20, 1);
}
Poderia passar completo pra mim, desde já um forte abraço e sucesso em seu trabalho.
Andre
27/08/2011
Olá, Natan
estou me sentindo “burro” mais não consegui fazer funcionar?
estou com o seguinte problema na hora de executar.
1172: Definition be.nascom.flash.graphics:Rippler could not be found.
1172: Definition be.nascom.flash.graphics:Rippler could not be found.
1046: Type was not found or was not a compile-time constant: Rippler.
1180: Call to a possibly undefined method Rippler.
Anderson Nascimneto
28/09/2011
Olá Anderson.
Você não colocou a pasta be e a Classe Ripple.as no mesmo local do seu arquivo fla. É só fazer a mesma coisa que eu fiz na imagem de exemplo aqui do post.
[]s
Natan Alves
03/10/2011