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 ;) ).
Related posts
Another Take on Skin Rendering
Multi-pass Rendering and Cascaded Shadow Mapping
Pingback: Efeito ondas na água no Flash | Natan Alves - Flash Developer
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!
Thank you for sharing this useful info here.
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.
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.
Pingback: How to Create a Game Like Aurora in Flash | Antti Lepistö
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)
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?
is only on click the ripple effect by Andrews?
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.
The wave does not start when I click the white places of the image
The rippler works great and is easy to work with. Thanks!
some can reupload the .fla as it seems to be disappeared from adobe share page.
cheerz
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);
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);
}
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
Tim
Pingback: Rob Donkin » Blog Archive » Synapsis 2
@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?
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
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)
[Library(source=”../library/abc.png)]
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
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?
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?
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?
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.
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?
Hi David,
Great stuff!
Using AIR will this work properly on iPad / iPhone?
Best Regards,
Ori Shmerling
hi
it is nice work but i try this with size 1080X1980, so it is come like inverted action there is no action happen on the upper of the flash but when i move the mouse down the effect come up you can see in the uploading file please help me
https://www.mediafire.com/?buc8f62vt7pt0p3