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.

Você precisa ter FlashPlayer 10 instalado

Aproveitem essa fantástica Classe.

[]s

Compartilhe:

  • Twitter
  • Facebook
  • del.icio.us
  • Google Bookmarks
  • Yahoo! Bookmarks
  • Live
  • Technorati
  • Digg
  • email
  • Print
  • RSS
  • MySpace
Tags:, , , , ,

6 comentários para “Efeito ondas na água no Flash”
Trackbacks
  1.  
Comments
  1. Fábio disse:

    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.

  2. Fábio disse:

    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?

  3. Fábio disse:

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

  4. Daniel disse:

    Cara pegou legal nossa muito bom gostei muito obrigado

  5. Adelson disse:

    Quando faço o processo não dá erro, mas não consigo fazer funcionar.

    • Natan Alves disse:

      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

  6.  
Comentar

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">