Natan Alves - Flash Developer
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.

Disposição dos arquivos

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.

This movie requires Flash Player 9

Aproveitem essa fantástica Classe.

[]s

Tags:, , , , ,

Compartilhe:

Comentários

  1. 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

  2. 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

  3. Consegui, era a posição da imagem, obrigado

    Fábio
    30/06/2010

  4. Cara pegou legal nossa muito bom gostei muito obrigado

    Daniel
    27/07/2010

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

      • 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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

  19. 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

  20. 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

  21. 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

  22. 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