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)”

  1. Hey David!

    Freaking awsome man! Thank you so much. I got it working and I’m not even into flash that much… well not till now i guess. he he he.

    PS. Let us know if you’ve managed anything on the performance side..
    Trying to run this thing now at 1024 x 768 pix.. call me mad..???

    Cheers,
    D

  2. Hi… first of all kudos for this awesome effect!

    I have a n00b question: How can the source code be imported into Flex Builder?
    I tried via General>Existing project and placing the source files within where appropriate and did note work. Also creating a new flex project did not work as I end up with an empty mxml. Thanks for any info you can provide.

    Best!

  3. Pingback: Cronvid Blog » Спецэффекты. Часть 1

  4. Hi David,

    First of all, thank you for such an awesome water ripple effect. It’s the best I’ve seen yet. I’m attempting to use it on a site I’m working on and have a question. I’m wondering if it’s possible to make bigger slower ripples, perhaps with the same viscosity as a lava lamp? I’d like to make the ripples look thicker as if the fluid is similar to oil. It would be great if you or someone else that is familiar with the Rippler class could post some code on how to do it. If I figure it out on my own I’ll be sure to post the code so that others who are interested are able to use it. Thanks again for this amazing piece of work!

    O

  5. freakqnc: You need to create a new flex project and drop the ripple’s source (including package directories) into your project’s source folder. From there on, it works similar to the provided source (just create the Rippler instance and pass it the component you want rippled).

    O: This ripple effect is something very basic and doesn’t allow anything like that. Maybe try this one: https://www.derschmale.com/2009/04/23/return-of-the-ripples-shallow-water-simulation-with-pixel-bender/ . Instead of a cheap trick, it’s based on actual fluid dynamics which gives you more control over the viscosity (but be careful, it runs on bitmapdata, which means very limited precision and an unstable simulation!)

  6. Hi David,

    Thanks for your reply! I’ll give the other one a try and see what I can come up with. When the project is finished I’ll send a link so you can see how it was used. Thanks again!

    O

  8. Someone mentioned having an issue with the slowing of the ripple effect as it’s called more and more times. I spent some time optimizing the use of bitmapdata objects and such and got it to the point that it doesn’t go beyond it’s peak initial memory usage (which is the cause for the slowing). You can view the code with changes here:

    http://pastie.org/private/z5kyzmchwfks61dtv1dpg

    Thanks for this btw will post a link when the project is finished.

  9. Pingback: [AS3.0]Water ripples at web_studynote

  10. Wow…. i’m having a hard time understanding basic implementation… could someone provide a working .fla so that I may pick it apart and learn?

  12. This Blog stared before AUG 2008 BTW *goes to show you how absolutely awsome and talented the originator of this script is*

    After learning about and comparing AS3 OOP vs. AS1-2 procedural programing I’ve used the above AS to make this thing work.
    Only problem is… when the effect traces the mouse movment its origin is miles away from the actual mouse pointer… can someone explain.

    Below is the AS I’ve used on frame 1 on my stage.

    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);
    }

  13. Ahhh… now I see says the blind man….. this works better. Thanks so much Mr. Schmale.

    import be.nascom.flash.graphics.Rippler;

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

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

    addEventListener(MouseEvent.MOUSE_MOVE, rippleFun);

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

  14. Hi

    I am new to actionscript with out mxml code how to run above action script file.. where to attachin mxml file i want this code very urgent…

    thanksin advance

  15. Pingback: 11th cordell blog » 【ActionScript3.0】 もっとリアルな波紋を作る

  16. Pingback: The Flash Blog » Multi-Touch Water Simulation Example

  17. Pingback: Efeito ondas na água no Flash | Blog Natan Alves

  18. Pingback: Water ripples, flash, actionscript 3, hiệu ứng nước

  19. Hi David,

    Thanks for the awesome ripple effect. I’m having a problem with it though, anytime a child of the source display object moves into negative coordinates, the ripple effect becomes offset. I have a bunch of particles that float across the screen, and once a particle goes offscreen it reappears on the other side. Every frame you can see the ripple effect changing location as the position of the particles changes. Is there some way I can correct this?

  20. Dave: As a quick & dirty fix, I would suggest placing everything in a wrapper Sprite that is offset so nothing inside it gets beyond its bounds. Containers that change their boundaries wasn’t really something I had in mind when I wrote the effect :-)

  21. Pingback: Motion Tracking Ripples | simon-townsend.com

  22. Hi, I’ve spent hours trying to make it work using the method you advice to jess but it did not work since in the compiler tells me this : 5001: the name of package ‘be.nascom.flas.graphics’ does not reflect the location of this file, Please change the package definition’s name inside the file, or move the file. C:\documents and settings\hatred\desktop\experiments2\be\nascom\flash\graphics\ … I assume and know every of the files are found in the correct folder but it stills doesn’t want to work tho.. can anyone help please? by the way am quite new to actionscript 3.. This is my first day learning actionscript 3…

  23. Oliver: It looks like an error slipped into the class code on your end. In Rippler.as, check the line containing “package …” and make sure the value after it is “be.nascom.flash.graphics”. It seems somehow the “h” in “flash” disappeared, as the error message is telling you.

  24. Hi david thanks for the reply it’s me who did an error while writting on the post lol eventually i did make it well in the flash, but it stills doesn’t work. Now on i’ve Well let me explain thouroughly what i’ve been up to to a “nothing happening result lol” if you’re able to help me i’ll be very glad to :) Well here we go:

    Step 1 : Create my folder to put everything i’ll use to make the movie.
    folder name (doesnt really matter anyways lol) : awe
    Step 2 : copy everything from experiments2.zip into awe folder.
    Step 3 : Create my flash file into awe folder [create new as3 .fla]
    Step 4: in the flash > on first blank keyframe , right click;actions and insert the following code there “import Ripple;” as from now i assume Ripple.as is being imported into the flash and that Ripple.as is importing Rippler.as (found in folder ..\be\nascom\flash\graphics)
    Step 5: I import my bitmap, convert into symbol and give it instance name “_target” .

    Now on when i compiled the flash.. nothing happens lol.. I must have missed something for sure :) can you please help me as from this :$

  25. I made it work!!!! OMG Am sooooo happy thanks a lot for this DAVID! am soo happy

  30. Hey David, fantastic effect, took me a while to find someone completed and was nice enough to provide he code. I’ve gone through the whole blog and got it working great and included the TimerEvent items to reduce CPU usage (if there other CPU reduction tweaks, i’m all ears).

    Thanks heaps, I’ll be putting a credit in for the site i’m commissioned.

    Regards,
    Scott

  31. Hey David, great work! I’ve finally was able to get everything to work. Provided this line of code below:

    import be.nascom.flash.graphics.Rippler;

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

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

    addEventListener(MouseEvent.MOUSE_MOVE, rippleFun);

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

    The only problem is… I’m experiencing an error when you go into the negative offsets (the bottom and right hand sides) you see two lines. Ontop of that, the file is much slower than the one on your demo website. Any ideas on what might be causing the negative offset and how to fix it? Thanks

  32. This looks great!
    I downloaded the source, and I gathered that the driving force behind this are the DisplacementMapFilter and Convolution filter classes, but I’m having trouble understanding little else (in fact, I’m still working on experimenting with those filters to see how they work). I’d like to be able to wrap my head around the entire thing so I can apply it in other ways.
    For example, what the basic algorithm for the effect is (what am I actually looking at?), the math and physics behind it, what the buffers are, and why the buffers’ scales are reciprocals of the source – as the scale gets bigger, why would whatever the buffers are get smaller?
    Do you have the algorithm explained somewhere?
    Thanks

  36. Hi there I’m new to flash,
    I have your source files butI don’t know where to start from I using flex so how would i get this ripple effect to work.
    I want to make an swf file out of this can you please help I would really appreciate it ,thanks.

  37. Hi David,
    I’m trying to make this ripple effect to work how would I do that?
    I got the source files and added them to Flex.
    Now how would I get this to work in flash.
    I want to export this into flash if that’s possible.
    Can you please help me? Thanks

  38. Thanks for the source files.
    I got this effect working soon I will give you a link of all my flash work.
    Bye

  39. this might be a really noob question but i can’t seem to download the nascom library altogether. All i could do is get into the very bottom of the level and download one as file at a time. I can’t seem to figure out where could I download the entire thing on one go.

  40. Cyn: The code is in an svn repository. The idea is to use something like TortoiseSVN to be able to get the entire source (and keep it up to date or switch back to older versions). If you’re using Eclipse (Flash Builder, FDT) you can also use Subclipse which is more integrated with the environment.
    There’s svn tutorials all over the net, such as this one: http://www.shokhirev.com/nikolai/programs/SVN/svn.html

    Btw, just in case, since I left Nascom, I’m not involved with their svn library anymore :-)

  41. On your post on the 1st April 2009 you mentioned about the ripple always regenerating from the top left corner. I am getting the same result (using it on a timeline in flash cs4), it produces a ripple every time i move the mouse just not at the point of the mouse. Is there any way to overcome this or is it a bug? Effect is still awesome tho, well done. ta

  42. David, first thanks for the source files.
    second sorry for my bad english but i hope that you will understand me.
    I know to do simple things in flash but i don“t know allmost nothing about AS coding…everything i know when meet whit as3 is to remove originaly code and than self random cler and type some value in hope that will work as i want to:))lol. So…ii need to make some picture slider whit some wave transiotion effect…i found your efect and i like it soo much. But i have problem whit code.I was put AS3 and BE packing in same folder and somehow make it work…I midle time i saw that many people have same problem as i have.That is how to make that ripple efect foolow mouse pointer.I really don`t know how to write code for that.So can you put – upload your origianaly .FLA file somewhere please ?So i can just switch picture ?Thank you very much

  43. Pingback: flash 水面 波紋 ゆらぎ 効果 ripple | ru_426

  45. PACKAGES CANNOT BE NESTED !!!!!!!!!!!! @#@$#%$#$ AAAAAA

    PLEASE DAVID IN THE NAME OF GOD CAN YOU UPLOAD ORIGINALY SOURCE FILES WHIT .FLA INCLUDE !PLEASE ???

  46. Dude… Seriously? This is the actual code. There is no FLA, it’s a project to be compiled in Flash Builder or any other such IDE. If you searched for FLA on this page, you’d have found andrew’s post where he converted the project to an FLA.

  48. Hi David,

    I’m also looking to create some sort of transition effect incorporating the ripples. I noticed Rogers success above, did he ever forward an example to you?

  49. Hi David,
    First off I would like to say that this is the most beautiful ripple effect I have seen to date in Flash. However, it is unfortunate that I cannot seem to have it work for me because it seems to give me the error that the packages cannot be nested. I have no understanding what that means, so I would appreciate it if you could help me out with my dilemma. Also, can this effect work alongside other water ripple effects, and how to I pinpoint it to only one object, such as a symbol. I know I may be asking for a lot, but I would really like some help on this issue.

    Thank you for your time and patience,
    –Max

  50. hi david, this is a great effect.
    i used it on a project i was working on.
    i had to animate the water on a swimming pool.
    the ripples looked cool against the water background.

    thank you very much for this.

Leave a Reply

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