Water ripples revisited (AS3-only version)

/ August 3, 2008

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.

Related posts

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

  2. Hello, thanks for this amazing effect, work very great.
    But i have a question: i trie to use it with video camera.
    It work too, but over the time, the flash/cpu get more an more busy, and flash display the video camera very jerky.

    What is the way to free cpu charge ?

    thanks

  3. Colir: If it gets slower over time and not from the start, I’d suggest checking if you’re not creating new instances of the Rippler object.
    Otherwise, a quick browse through the above comments might solve your issue :)

  5. Ha David, I am a proper noob to Flash, Is there any way that you can give a full description on how to your awsom effect onto Flash CS3, Ive read through the comments and other posts, now totally lost. Or is there a tutorial for this script.
    I am actually trying to add this effect to watery background image.

    Thanks, demo looks awsom.
    Toon

  6. Ha David,
    After playing around with the script, I finally came up with this. I it works…hehe. Just went through all the other post and came up with this.

    import be.nascom.flash.graphics.Rippler;

    var _rippler = new Rippler(pic, 60, 6);

    _rippler.drawRipple(pic.mouseX, pic.mouseY, 20, 1);

    addEventListener(MouseEvent.MOUSE_MOVE, rippleFun);

    function rippleFun(e:Event):void {
    _rippler.drawRipple(pic.mouseX, pic.mouseY, 20, 1);
    }

    Hope it helps you guys still struggling with the coding….

    l8rs
    Toon

  7. hi David, i’m just a newbie in AS3. just wondering what should i do to make the water ripple effect follow my mouse movement just like in your demo? if you dont mind teaching me…many thanks n God Bless!Ü

  8. Toonstryder: Glad you got it working!

    Jeff: Check the source of the demo. If you’re working in Flex/Flash Builder or in Flash CS4, the part for mouse movement is exactly the same.

  9. thanks for the reply.Ü i’m using flash CS4, its really very helpful, really thank you very much! i really appreciate your tutorials n demo.Ü

  10. Hi David

    Im using your water rippler.
    Want to know if i can combine it with a colorTween on the same movieClip.
    Im new to AS3.
    Righ now the colorTween resets when the waterRippler is activated.

    Thankyou.

    import be.nascom.flash.graphics.Rippler;
    var myRippler = new Rippler(drops, 60, 6);
    myRippler.drawRipple(x, y, 20, 1);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
    function handleMouseMove(event : MouseEvent) : void
    {
    myRippler.drawRipple(drops.mouseX, drops.mouseY, 20, 1);
    }

  11. It depends on what the tween is doing exactly. If it’s addressing the colorTransform object, there shouldn’t be an issue. But if it’s using a ColorTransformFilter, it won’t work. The Rippler actually overrides any filters assigned to your DisplayObject and I’ve been too lazy to fix that :-) What you could do is place the target MovieClip in a seperate container and assign the Rippler to that. Something like this:

    var container : Sprite = new Sprite();
    container.addChild(theActualMovieClipOnWhichYouAreTweening);
    addChild(container);
    var rippler = new Rippler(container, 60, 6); // copy your settings of course

  12. Just though i would let you know that i am so impressed with this effect and have been having lots of fun with just using it as a plugin. Now i am going to go through your code i find out what goings going on. I had no idea that you could push AS3 that far. I am going to find a way to put it into a sound spectrometer it would look amazing.

    check out

    http://www.psycleproductions.com/water_creatures.swf.zip

    its a bit basic.

    thanks for a great plugin

  14. Hey David, nice code. Im making a pool with the top view, and this effect fits perfectly. But on the pool I got a ball, and Im thinking if its possible to make the ball move when the rippler touch on it. Its possible?

  15. Hey Roland,
    Yeah you could somewhat imitate that, I’m sure. If you can expose the BitmapData inside the Rippler that acts as the displacement map, sample it in the vicinity of the ball (might be easier to blur the map into a copy), and that can be the direction your ball moves in.

    Cool to see someone adding something extra to it! :D

  16. Pingback: wie kann ich so nen schicken banner nachbauen? - Flashforum

  17. Wow, great stuff David! I’m not that an experienced coder, and I’ve been trying to work out a way to try to add colour to the ripples, but so far no luck. Is it possible to do?

  18. Dave: Depends on how exactly you want to add colour. You could hack the class to expose the displacement map, and overlay a Bitmap with ColorTransform or ColorMatrixFilter using that map.

  20. Oh, that can be done pretty easily in fact. Just take the Rippler class apart and use only the parts that are updating the small bitmapdata buffers (not the final displacement map). Put that in a Bitmap and do a color transform :)

  21. Thanks a lot, I really appreciate the information, really sorry to bother you again, I really am trying my best to not be spoonfed the information, but I’m struggling to get my head around it all, would you be able to provide some more information/code?

  22. If you make the Rippler extend Bitmap, you can do it more easily. Remove all references to _source as well as any use of _filter and _defData. You only need _buffer1 and _buffer2. In the enter frame loop, instead of assigning the filter to the source, you say bitmapData = _buffer2; (bitmapData comes from Bitmap). Then you can just do _rippler.transform.colorTransform = new ColorTransform(anyColorYouLike);
    I might be missing a step or two, but this should get you on your way :)

  23. Thanks for all the information, I’ll give it a go, hopefully I can get the hang of it, I guess I’ve jumped in at the deep end when it comes to starting to use bitmapData!

  24. I’m really sorry to take up so much time, but I haven’t been able to get it working, would there be anyway that I could get some source code, I would truly be grateful if you, or anyone else for that matter, could help me further!

  25. Dave: I’m currently swamped with work and to-do’s, so I can’t free up some time to do a version like that. But if you deconstruct the Rippler class bit by bit, you should be able to manage :) Start out by exposing the _buffer2 bitmap, then remove the filter, etc…

  26. It’s great effect!
    but this effect make slow all the website :-(
    without mouseX and mouseY too :-(
    how can i make?

  27. @Gianluca: Using the mouse position doesn’t affect the speed. What you can do is to change the scale of the effect and to stop the effect whenever it’s not being used.

  29. PLC: Hey, usually I’m fine with the following: you don’t need to credit it inside the project itself. In case you write about it in a blog post or so, a mention would be nice, tho :)

  31. Great effect! My only problem is that the ripple takes place NW of my mouse pointer by about 5 inches, is there an offset property that I need to tweek? Thanks in advance!

  32. Lin: Might be a scaling issue, it uses a DisplacementMapFilter, which doesn’t scale along and uses the stage scale as a reference. So make sure no scale is set in anything that contains the rippled effect.

  33. Hi David,

    Excellent effect! I’ve been playing with it and trying to integrate it into a game. I’m having good success with that. I am curious though if there is a way to turn off the water reflection. Via masking, I am using this effect on a puddle. As something rolls through that puddle the ripple leaves the masked area (which is fine) but then reflects back into the area after it hits the edges.

    Thanks if you can help!

  34. Hi Jobe!
    I’m not sure if this would work, but it might :) You could add some boundary conditions on the active buffer by filling the 1px boundary edges with black. I’m a bit too occupied to test it myself atm, but if you need any further help, feel free to contact me: https://www.derschmale.com/contact/

  35. Hi David

    Great effect !! Im trying to used it in an intro for a website fullscreen,
    it looks great ,the only thing is the CPU usage, I use the effect only
    1 time on mouse click. any suggestions about reducing the CPU usage?

  36. There’s quite a few optimization tricks posted in previous comments. Most important ones are changing the scale of the effect, and stopping the effect based on a timer after your click.

  37. Hey, David.

    Thanks for making this effect, your’s is the only I could find on the web. I tweaked it so it applies the ripple to a movieclip the size of my stage (550px x 400px). I used a timer to create a ripple every 800ms at a random place on the stage:

    var rippler : Rippler = new Rippler(myMovieClip, 60, 6);

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

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

    }

    The movieclip contains a lot of motion tweening, but no other filters or effects. Running at the normal screen size of 550 x 400, it works great with no apparent slow down, but when I zoom in, the whole things becomes incredibly slow. Also, when increasing the stage resolution to 1024×768 does not help and also causes things to become very slow. I’ve tried to modify the parameter passed to the constructor and drawRipple function, but this doesn’t help. Anything hints on how I can improve this? I’ve checked the comments above, but I can’t seem to fix it.

    Thanks for your time :)

  38. me again.

    I fiddled with the size of the ripple and increasing the timer’s trigger time, but that doesn’t help. In fact, there is no speed reduction whether the interval is 100ms or 2000ms. I got it to work okay on 800×600 with the following parameters. I only want a very subtle ripple effect.

    var rippler : Rippler = new Rippler(sma, 10, 10);

    var timer:Timer = new Timer(100);
    timer.addEventListener(TimerEvent.TIMER, timerTrigger);
    timer.start();

    function timerTrigger(e:TimerEvent):void{
    var x_:Number = randomNumber(1,800);
    var y_:Number = randomNumber(1,600);
    rippler.drawRipple(x_, y_, 50, 12);
    }

    But anything above 800×600 becomes too slow. Even your handleMouseMove function slows down at 1024×768.

  39. Riri: It might be the content of the MovieClip you’re applying the ripples to. Maybe try with just a DisplacementFilter and assign it to the MovieClip’s filter list every frame to see how that performs. It would be no surprise that it’d be slow at 1024×768 with animated content, tho :)
    Perhaps cacheAsBitmap could help a bit in times where it’s not animating.

  40. I tried, but it’s still too slow. even when nothing is animated and just one symbol with no animation is on the stage…

  42. Riri: Have you tried applying a general DisplacementMapFilter on every frame instead of the ripple effect? If changing the scale parameter doesn’t improve performance, it sounds like the filter itself is causing the slowdown. And on such sizes, it would make sense.

    PLC: Thanks! Glad it could be of some use :)

  43. I am working on a Flash application of your script (which is super cool, btw) and I’m having a problem using it on more than one button. I can’t seem to put the button array into the variable, it keeps throwing errors. Then when I try to make it more than one function it says it’s an invalid bitmap…

    var myRippler = new Rippler ( button_array, 2, 15);

    1067: Implicit coercion of a value of type Array to an unrelated type flash.display:DisplayObject.

    for example, lets say I have 3 buttons. Home | Work | School. They are MovieClips tite home_button, work_button and school_button. When I create the variable, I”m lost at what to put in there. I can call one button out, and that works great. I even tried moving the var inside the function:

    function home_ripple(e:MouseEvent):void {
    var myRippler = new Rippler ( home_button, 2, 15);
    myRippler.drawRipple(x, y, 45, 300);
    }

    that works fine…

    I guess I’m lost at how to do the next buttons, work and school. If I add this as the mouse over to the work button:

    function work_ripple(e:MouseEvent):void {
    var myRippler2 = new Rippler ( work_button, 2, 15);
    myRippler2.drawRipple(x, y, 45, 300);

    }

    i get:

    ArgumentError: Error #2015: Invalid BitmapData.
    at flash.display::BitmapData()
    at be.nascom.flash.graphics::Rippler()
    at 13_fla::MainTimeline/fact_ripple()

    I’m still learning AS3, So any insight you have would be greatly appreciated :) thanks again for a great application!

  44. Judi: You can’t supply an Array of buttons, since a DisplayObject is expected. Instead, you could add the buttons to a MovieClip or Sprite container and set that as the target instead of the array.
    Also, don’t create a new Rippler on every mouse event, just create it once in the beginning and only call drawRipple on the mouse event.

  45. Hi David, I am very thankful to you.i was searching for this animation for months. I didn’t get a good tutorial. very very thanks once again. I have used this animation in an image Gallery. After the alpha transition , i am using this effect for the movieclip. It works. But after the ripple transition on one or two image, the transition is getting slowed.Why this is happening like this.Is it because i am not stopping the ripple transition after each ripple transition.Hope you will reply as soon as posible.
    Thanks and Regards,
    Sreelash

  46. Hey David thx for the code this is so great been looking for this for a while, and Andrew thx for the FLA, I got it working also with a few updates, once I can get the updates done I will share the src.

    David if you can shoot me a email, I am planning to use this on a project im working, but need your input on something thx

  47. Hi!

    Sorry, but I just a little speak english :)
    I am a starting programmer because of this I would like to demand somebody, that one .fla let legyenszíves send it in a file the ready water effect the janesz4@freemail.hu onto a title. Ahead I say thank you for the help very much!

  48. Hello David,

    This ripple effect is the best i have seen yet! Beautifull!
    I realy want to try this out on my deepsea exploring game but i am pretty new as most out here.
    I did try a lot as you been telling all the others but still i realy do not understand how to make this rippler working on my fla.
    Could you please help a poor newb like me getting this to work?
    I an working in flash cs4

    Best regards,

    Stef

  49. Pingback: David Lenaerts’s blog : FranckyInfo's WeBlog

Leave a Reply

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