Water ripples revisited (AS3-only version)

I’ve been thinking of changing my previous Pixel Bender water filter to an AS3-only version for some time (since FP10 is still in beta), but never got around to it. Until trusty old Nascom told me we might perhaps use it in a project. So here it is, added to the NascomASLib and ready for you to use :) I added some functionality so the appearance of the ripples can be altered. Overall, I’m quite happy with the performance, especially since it runs smoother with bigger ripples (and usually looks better too ;) ).

So enjoy the demo, and check the source here.

226 thoughts on “Water ripples revisited (AS3-only version)

  1. Pingback: Efeito ondas na água no Flash | Natan Alves - Flash Developer

  2. Is’s been said before, but this is one awesome class. Really good work!

    However, it seems that the clone() call in handleEnterFrame crunches a lot of memory. I implemented t3hh00d suggestion with copypixels() instead of clone(), and that helped.

    I am using your effect to visualize and prototype touchless interaction (similar to Kinect).

    Thank you!

  3. This is a fantastic water ripple effect!

    However, I can’t get it to work after I publish my SWF alongside the HTML file, with the HTML “dimenions” set to Percent. For some reason, once the mode is changed to Percent, it shifts the image based on the ripple’s strength.

    To me, it looks like a bug with the DisplacementMapFilter, but I can’t figure out how to correct it.

  4. Edit: Okay, looks like it’s a bug reported with Flash Player 10.2. You can ignore my comment.

    This is an absolutely fantastic water effect, though! Definitely love it.

  5. Pingback: How to Create a Game Like Aurora in Flash | Antti Lepistö

  6. Hey guys. For all of you who took Andrews file (fla) and you tried to make the ripple working on mouse move dont forget to make a new movie clip named “pic” and set the registration point on the top left.
    (delete/rename the old movieClip)

  7. Hi guys, i can’t do it!! :( i use flash cs5 but i don’t know how to do this effect.i can’t!! :( someone can post some fla?

  8. i’ve done it..but not with following mouse effect.only on click.so, it’s good, so good..but really i would to do this effect on mouse move.like the ripple effect in this page.

  9. some can reupload the .fla as it seems to be disappeared from adobe share page.


  10. my bad, the link DOES work… i just have a crappy connection

    Could tell me what the problem is however with the randomNumber?
    Keep getting the message: “Call to a possibly undefined method randomNumber”

    import be.nascom.flash.graphics.Rippler;
    var rippler : Rippler = new Rippler(pic, 60, 2);

    var timer:Timer = new Timer(800, 10);
    timer.addEventListener(TimerEvent.TIMER, timerTrigger);

    function timerTrigger(e:TimerEvent):void{
    var x_:Number = randomNumber(1,550);
    var y_:Number = randomNumber(1,400);
    rippler.drawRipple(x_, y_, 20, 1);

  11. Hi

    Ive been modding this and have it working on a huge multi-touch ad-table. We have had 6 people all making waves simultaneously and it looks fantastic.

    The only problem i have is that im still getting the white line on the bottom and right of the display. Its not too noticable with light images but with dark ones its really pronounced. I have downloaded the flash zip code and also tried pasting in the code from the rippler.as source view but nothing fixes it.

    Would you mind telling me the specific code you added to fix it so i can put it in manually?

    …many thanks, its some wonderful code


  12. Pingback: Rob Donkin » Blog Archive » Synapsis 2

  13. @tim
    I think you can fix that problem one of two ways. Make your movie clip go off the stage 10 pixels(or however big the problem area is) in every direction or add a mask on top of it. You could also add a border to frame so the problem areas are underneath it.

    I do have a question though I have been working with the FLA version and cant seem to get a perlin noise filter to work with the ripples… Do you have any ideas about that?

  14. Please can you post a link to a working .fla file.. I have enough experience to make it how I like it from an fla but not from the raw code. I have tried to get Andrew’s fla working but I’m having very little success. I cant seem to get the files to point correctly. I’m working in Adobe CS4 and would very much like some help.

    Thank you

  15. HELP!

    package {
    import be.nascom.flash.graphics.Rippler;

    import flash.display.Bitmap;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.MouseEvent;

    [SWF(backgroundColor=”0x000000″, frameRate=”30″, width=”600″, height=”419″)]
    public class Ripple extends Sprite
    // Embed an image (Flex Builder only, use library in Flash Authoring)
    private var _sourceImage : Class;

    I tried putting that in there and it didn’t work. I’m using Flash CS 3 what do I need to do? help

  16. can You tell me, how to change the picture?
    Will it works with transparent picture? Have you ever try? Sorry, if i told smth wrong – i don`t know englisj\h well. Can U write me on my e-mail with answers?

  17. Hello:

    My name is Chung, a Flash developer, firstly I want to thank for
    sharing the AS3 ripple effect, it’s very useful.

    Here are a problem that I found whenever using this effect: I need a
    swf running in full screen mode, and add a command:

    *fscommand(“allowscale”, “true”); *

    The swf file will run in full screen mode, but the ripple disappeared
    and the position of bitmap data was shifted.

    I had tried many method to fix the problem, but still can’t resolve
    it, could you tell me how to fix the problem?

  18. Not sure will the author will even reply me but I really needed this effect on the Microsoft Surface Table. It works but become slower and slower. Any one has a Starling/Hardware accelerated version?

  19. I tried this example but instead tried to use a 1080p background image. The app runs incredible slow as long as the mouse is moving. Once I stop moving the mouse the ripples complete their animation at a nice frame rate. I’m really new to flash so I’m having a hard time understanding why this would be happening.

  20. Hi guys, i can’t do it!! i use flash cs5 but i don’t know how to do this effect.i can’t!! someone can post some fla?

  21. Hi David,

    Great stuff!

    Using AIR will this work properly on iPad / iPhone?

    Best Regards,

    Ori Shmerling

Leave a Reply

Your email address will not be published. Required fields are marked *