Creation of realistic Flash water ripples with AS3

This is basically the Flash porting of the Flex experiment made by David Lenaerts in his blog.

I found the script a very interesting way to use the NascomASLib, an open source AS3 library that provides a couple of interesting graphic effects such as pixelate and rippler, the one used in the example. The point is the original source code was written for Flex, and reading through the comments it wasn’t easy to change the embedded image with one used in the library. Some comments even say to use the Flash timeline.

That’s why I provided a quick AS3 solution to achieve this effect with no headache.

This is the script:

The core lies in line 9 which calls the Rippler class that I modified to work as a standalone class (you will find it in the downloadable source code at the end of the post), then at line 13 that constructs a toRipple object, that is the MovieClip Symbol with the background image.

Once the background image has been loaded as a BitmapData, Rippler and drawRipple manage the ripples.

Rippler creates a Rippler instance with these parameters:

* the DisplayObject which the ripples will affect.
* the strength of the ripple displacements.
* the x size of the ripples.
* the y size of the ripples. In reality, the scale defines the size of the ripple displacement map (map.width = source.width/scale). Higher values are therefor also potentially faster.

and drawRipples create the ripples with these parameters:

* x position
* y position
* size
* alpha

In my example, I’m creating a rain effect using a timer, plus the old mouse generated ripples. Here it is:

Download the source code with the standalone Rippler class.

  • boim

    Very nice..!

  • Wow, that looks really realistic! I have to come up with somewhere to use that.

  • Kirtimaan

    really nice one!

  • pablop

    I wonder what would be the best or easiest way to make a ripple that is not viewed from above, but, let’s say at 45 degrees, so that the ripples are more like ellipses, not circles?

  • AWESOME!!!!

  • Pedro

    Woow, great effect! I didn’t think it would be posible!

  • Very nice !

    Is there a way to make the waves stop when they cross each other ?

  • FieryWall

    Very nice!!!

  • looks realy nice – just like an old directX demo, atleast it reminds me of that :D

    I kinda felt as the image(water layer?) jitters (too much), kinda hard to explain and see – but i guess it would happen if there is a difference of 1 pixel somewhere and it toggles between the “correct” and the “shifted”.

    Am i the only one who got this impression?

  • I did something similar with his code for my own experiments a while ago

    http://www.yonaskolb.com/blog/2010/10/11/water-simulation.html

  • scoch

    Thanks! Your blog is excellent! Don’t you have a Twitter account to follow you?

  • janitha

    WOW! just wow!!!

  • Very cool- this will allow me to do a lot more cool looking effects in my games!
    Was looking for a way to do a “shockwave” effect (background becomes disrupted/ heat wave effect), and this seems a good way of doing it.

    Always useful information on your blog!

  • Alexandre Colella

    Very good! Thanks!
    I used it on my last game and works fine!
    I will add a credit to you!
    Thanks!

  • NoName

    look at your CPU usage… too much…

  • Paviter

    Nice work!

    Would it be possible to know when the ripples hit the edge of the movie clip and bounce off?

  • Susan

    Help I am trying to place a movieclip called logo_mc above the ripple but everything I try with addChild gives me errors

  • jitender

    very cool and useful effect. i have not seen before like this.

    I want to wave instead of water drop(rain.
    like water in pond.

  • Alexander Makovsky

    WOW! It’s very amazing effect!
    But “.draw(…)” function is not drawing at background layer :'(

  • Alexander Makovsky

    Thank You very much for cool lesson! *___*
    I find a way to draw liquid effect on backlayers (for rainy window, aquariums etc)!

  • Bobgil

    Ciao Emanuele, bellissimo questo effetto dell’acqua. Ti volevo chiedere se posso metterlo su un sito che sto facendo per una società che vende barche o se e’ protetto da copyright. Essendo nuovo nel campo, non so’ come comportarmi con gli esempi o le spiegazioni che trovo in internet….

  • Emanuele Feronato

    @bobgil: use it as you want

  • Question… Firstly, Great share! Thank you very much.

    However, I would like to put text over the effect…. could you please tell me how to as I cant seem to do it through layers.

    Thanks
    Sunny

  • Pingback: Flash: 3 Water ripple effects « Helpful Snippets()

  • Any idea how to get this working with Flixel??

  • Max

    Hi, I wonder how it is possible to apply similar effect to a video instead to a single image. Max

  • jeroen

    really beautiful! just the effect I was looking for, thank you

  • me

    hi,
    thanks for effect.
    i have problem when i set effect to bitmapData(1920,1080)
    when i click in stage to run effect , bitmap.y a little changed, while the in smaller size bitmap no have problem! how i can get performance? and fix position of bitmap.y!

  • Pingback: water ripple - www.hardwarezone.com.sg()

  • Eric

    Can you tell me where you got that image from?
    I really like that one :)
    Cant seem to find anything close to it in any stock sites :(

    P.s. your code ROCKS!!

  • Luke Mills

    can you tell me how to remove the image of the rocks so it is just the transparent ripple effect that i can use over something? thanks alot!

  • Rizvan

    Very nice work. Thanks a lot for sharing.

  • Dan

    @Luke: to use a different image you replace the image in the toRipple movie clip. Double click on the clip in the library to enter the edit mode, then click on the rocks image and delete it, then drag the new image onto the stage from the library (after you have imported it) and position and scale it how you want it. It took me a while to remember how to do it, haven’t used Flash in a while.

  • Nice one. Was looking for the flex version and landed here. Interesting to know the capabilities of flex/flash.

  • Awesome effect! This is perfect for the game I’m working on! : ) Thanks for sharing.

  • Pingback: WordPress: display French dates Javascript: Problems with using innerHTML to create tables in Internet Explorer Tweet through URL variable as3 Event.DEACTIVATE vs wmode Flash: 3 Water ripple effects Flash AS3: Swap Movieclip to top CSS: How to target IE (()

  • Chris

    Hi

    Trying to use your code as snippet applied to a symbol as in your example but I keep getting the error ‘1037: Packages cannot be nested’

    Would appreciate any help!

    Thanks
    Chris

  • Bhargavi

    Hi,

    Very useful…

    But I need waving effect for the image also. How to do that? Please give me any idea…

  • Pingback: jQuery Smooth Scroll script WordPress: display French dates Javascript: Problems with using innerHTML to create tables in Internet Explorer Tweet through URL variable as3 Event.DEACTIVATE vs wmode Flash: 3 Water ripple effects Flash AS3: Swap Movieclip to()

  • Meme

    Hi,

    does anyone know how to make that effect on movie clip with animation in the background? The code is for the bitmap and the effect somehow relies on bitmap properties but maybe some AS ace would have an idea? ;)

  • Pingback: [Actionscript 3] Sto cercando disperatamente di implementare e far funzionare questo effetto acqua()

  • YESSSSS, exactly what I was looking for, this is going to help me greatly :D

  • good sharing
    i have some problem while put buttons on the ripple picture.
    so please share me if you have any idea about how to put button on ripples and with some clicking effect on it
    please..

  • how to put images on the ripple
    i eagerly waiting for that thing please send on my mail

  • Saariko

    hey
    this is great stuff, but performs miserably on mobile (iPad2, at least)

    any ideas on how to change the Rippler class to use native filters (through native extensions) as opposed to Flash’s cpu-hungry filters?

    maybe with the help of these ANEs:
    https://airextensions.net/shop/extensions/core-image-with-image-filters-by-vitapoly/

    ?

    any input on boosting performance would be much appreciated

    thanx

  • Good day. I’m sorry to bother you, but maybe you can help. In a small project I’m working on I used your as3 water ripples script. I’v got swf with masked water surface (coffee surface, actually) and another one self-simple-scripted swf. The task is to put your scripted swf file (or scripted movie) above al layers in my swf. I have tried several ways, but each time received an error notification: “TypeError: Error #1009” The meaning is ‘Can not access a property or method with reference to the object’ “null” at Ripple(). Unfortunately, my knowledge of programming is close to zero. I seem to understand that when sent to another file in the attached script may have problems, but I do not know how to fix it. If you can help, I will be very happy. I’d like to keep the coffee in the cup came to life …

    All my code:

    stop();
    function pageNav(event:MouseEvent):void{
    gotoAndStop(event.target.name);
    }
    page1.addEventListener(MouseEvent.CLICK,pageNav);
    page2.addEventListener(MouseEvent.CLICK,pageNav);
    page3.addEventListener(MouseEvent.CLICK,pageNav);
    page4.addEventListener(MouseEvent.CLICK,pageNav);
    mailto_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
    function mouseDownHandler(event:MouseEvent):void {
    navigateToURL(new URLRequest(“mailto:agisprints@gmail.com”),”_self”);
    }
    var loader:Loader=new Loader();
    var mcExternal:MovieClip;
    this.addChild(loader);
    loader.load(new URLRequest(“coffee.swf”));
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE,swfIn);
    function swfIn(e:Event):void {
    loader.x=40;
    loader.y=45;
    }

  • How do you do brother ?
    Can You please just tell me where i replace or how i should replace background. i am helpless. every reply will be thankful

  • Yad

    according to my experience with this script ….. it is best to change background in bitmap …….. all other tricks does not work for me :P

  • wow iiiiiiii cannnnnnnnnnnnnn’t say anything itttt’s amazing

  • Mayank Chaurasia

    the effects is wonderful and had managed to change the size and some parameter also successfully. But, the main problem is that when I try to play the file in fullscreen mode in 1920*1010 resolution the file becomes slower. does’t know why ? Can you help me please.

    • Emanuele Feronato

      It’s quite an high resolution, being a Flash movie