Create real water effects with Flash CS4 & ActionScript 3.0


In this Flash CS4 tutorial you will learn a advanced technique called perlinNoise to create a realistic water effect into any image. We will show you how to apply it in two different situations, one in a river, creating the water effect in whole image, and the other one in a waterfall using a more complex process as it will reproduce the effect in a specific area.



Final Result:

Before Start:

This example will use some advanced action script elements like displacementMapFilter, perlinNoise and bitmapData from Action Script.

The perlinNoise filter is one of the most versatile filters, normally used to give some realism to animation but also one of the more complicated to work with, i will not explain how-to work with him, for that you have the very good documentation following the links:

In my tutorial i will use Flash CS4, but the things are similar on previous CS versions.

Requirements

You should have a installed version of Flash CS 4 (or previous CS 2/3 versions)

Have the 3 images distributed within the images.zip file

Pre-Requesites

Understand some of the basic concepts of working with bitmaps and bitmap data. Read the links written in “Before Start“.

Some imagination to produce your water effects.

Download Source Files

Step 0 – Create a new Flash Project

Open Flash CS4 and create a new Flash (Action Script 3) project.

Step 1 – Creating first example

Import the image “water.jpg” into the stage.

Goto menu File->Import->Import into stage and select our water.jpg image (distributed in images.zip file)
The image is automatically placed into the stage, just center it on your screen, like the bellow example.

Name the actual layer to image. To do this, double click on the Layer 1 name, and change it.

Next, we need to transform our image to a movieclip to receive the filter/water effect, just click on the image on stage, and then right click on it; select Convert to symbol, name it backImg. Without doing anything, go to the panel properties, and write the instance name to backImg1

:

Step 2 – Create a layer for actions

Click on the new layer button (like the following image, on yellow) and name it actions.

You should now have two separated layers:

Step 3 – Lets write some code

This is where the tutorial can become a bit complicated to understand, but i will explain line by line. For now select the layer actions, and click F9 key on keyboard, actions panel will now open, just write this code on it:

var bm:BitmapData=new BitmapData(backImg1.width, backImg1.height);
var disp:DisplacementMapFilter = new DisplacementMapFilter(bm,new Point(0,0),1,2,10,60);
var pt1:Point = new Point(0,0);
var pt2:Point = new Point(0,0);
var perlinOffset:Array = [pt1, pt2];

addEventListener(Event.ENTER_FRAME, onFrame);
function onFrame(evt:Event):void {
  perlinOffset[0].x +=1;
  perlinOffset[1].y +=0.1;
  bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset);
  backImg1.filters=[disp];
}

Simple code, but powerful animation, just run the project :)

Step 4 – Understand the code

The first two lines are the main declaration for the effect operation, e create a new BitmapData with the same dimensions of image “water” movieclip:

var bm:BitmapData=new BitmapData(backImg1.width, backImg1.height);

then, we instantiate the DisplacementMapFilter with our BitmapData (bm), the starting map point (0,0), the starting x and y (1,2) and the scaling factors x, and y. (10,60).

The following lines:

var pt1:Point = new Point(0,0);
var pt2:Point = new Point(0,0);
var perlinOffset:Array = [pt1, pt2];

Are the base points to be used to move the perlinNoise effect, these are defining the perlinOffset

We now add the EventListner to repeat the position of filter and provide us a real time animation, because the application speed is 25 frames per second (default, you can change this on main stage properties) we have to ‘replace’ the perlinNoise and displacement filter with a new one with some minor changes to the perlinNoise offset, that will result in a soft animation of the perlinNoise map.

addEventListener(Event.ENTER_FRAME, onFrame);

Now the handler, and the main effect (his core):

function onFrame(evt:Event):void {
perlinOffset[0].x +=1;
perlinOffset[1].y +=0.1;
bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset)
backImg1.filters=[disp];
}

Here, in every enter frame event we adjust the position (offset) of our perlinNoise, this will produce a smooth and cool move animation.:

perlinOffset[0].x +=1;
perlinOffset[1].y +=0.1;

Play with these values to change direction of the map movement

We now rebuilt the perlinNoise of our bitmapData:

bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset)

On perlinNoise we have some parameters, just play with them but take care with the third parameter (number of octaves) these are the number of perlinNoise “copies”, they are re samples and re sized parts of the perlinNoise effect, useful to improve the realistic effect. Bigger the value, bigger the memory use. Can see full PerlinNoise parameters here.

And finally we re-apply he filter:

backImg1.filters=[disp];

Well… that’s it! Run the project!

Step 5 – Creating a waterfall example

In the following steps we will create a waterfall effect, grab my waterfall image by saving bellow image.

The unique thing that we need to apply in the perlinNoise filter is the “falling water” right? (if we apply to all image, will get a mess up!) Well we need to create a copy only of the water (not very precise, to do that open for example the photoshop and with lasso tool create a second layer only with the water falling, i will not covering it as it is not the aim of this article), just grab my already separated elements:

back.png

and fall2.png

Step 5.1. – Place both images on place

Create two layers (as shown previously) between the image and actions layers. Move our previous water image to the top of stage and put on the new bottom layer the back.png and on the top new layer put the fall2.png, put them at the same position so they became only one image. The waterfall needs to be the top of the other at the correct position, avoid this:

incorrect

correct

Convert them to movie clips, one called back and the other waterfall, name both instances (parameters window) with respective waterfall and back names (Very important), then we just need to repeat the same actions but with the water movie clip, as shown on the following code.

Step 5.2. – Write some more code!

Just add this code to layer actions, on top:

var bm2:BitmapData=new BitmapData(waterfall.width, waterfall.height);
var disp2:DisplacementMapFilter = new DisplacementMapFilter(bm2,new Point(0,0),1,2,10,60);

var pt3:Point = new Point(0,0);
var pt4:Point = new Point(0,0);
var perlinOffsetFall:Array = [pt3, pt3];

and in the function onFrame()

perlinOffsetFall[0].y -=1;
perlinOffsetFall[1].x -=0.1;

bm2.perlinNoise(20,10,1,99,true,false, 7,false,perlinOffsetFall);
waterfall.filters=[disp2];

Well, is done! In this second example, the perlinNoise is applied only to the waterfall image, and is moving down according to y axis, as the code demonstrate:

perlinOffsetFall[0].y -=1;
perlinOffsetFall[1].x -=0.1;

Step 5.3. – Final code and notes!

Now you can see the full code, and notice that you need few lines to create this cool effect.

/** WATER CODE **/
var bm:BitmapData=new BitmapData(backImg1.width, backImg1.height);
var disp:DisplacementMapFilter = new DisplacementMapFilter(bm,new Point(0,0),1,2,10,60);

var pt1:Point = new Point(0,0);
var pt2:Point = new Point(0,0);
var perlinOffset:Array = [pt1, pt2];

/** WATERFALL CODE **/
var bm2:BitmapData=new BitmapData(waterfall.width, waterfall.height);
var disp2:DisplacementMapFilter = new DisplacementMapFilter(bm2,new Point(0,0),1,2,10,60);

var pt3:Point = new Point(0,0);
var pt4:Point = new Point(0,0);
var perlinOffsetFall:Array = [pt3, pt3];

addEventListener(Event.ENTER_FRAME, onFrame);

function onFrame(evt:Event):void {
/*water perlin noise */
perlinOffset[0].x +=1;
perlinOffset[1].y +=0.1;
bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset);
backImg1.filters=[disp]

/*water fall perlin noise, moved by y, creating the fall effect */
perlinOffsetFall[0].y -=1;
perlinOffsetFall[1].x -=0.1;

bm2.perlinNoise(20,10,1,99,true,false, 7,false,perlinOffsetFall);
waterfall.filters=[disp2]

}

Run the project! Nice ah?

Now make your own experiments and show the result to the world! We would love to see it.



Did you enjoy this article?
Share the love
Get free updates and win TTL prizes

Other Posts You Might Like

39 Responses to “Create real water effects with Flash CS4 & ActionScript 3.0”

  1. Well, this effect is very cool. But “eat” a lot CPU.

  2. Yes, is true, you can reduce the amount of cpu usage by reducing the number of octaves in the perlinNoise parameters, but yes, when using more than one effect (like this example) flash will “burn” your cpu and memory usage! :/

  3. This webpage eats almost all the responsiveness of my Intel Q6600 (quadcore) :-/

  4. unlimited says:

    Looks and works great :) (AMD Phenom 9950 black)

  5. Justin Woods says:

    This eats a lot of the cpu usage. Would it be better to create the water effect in AE then import it into flash as a movie or png sequence with an alpha layer?

  6. Hi Justin,

    Yes, we can do it in your way, but… not every one that uses flash know how to work with After Effects and the point was creating it in Action Script 3 and make it real without any other apps. :P

    Cheers!

  7. modnart says:

    Nice! Thank you!
    One question why does the image seem to drop down a few pixels momentarily after load? Is there a parameter setting to prevent this?

  8. Hi modnart,
    The image? the waterfall?
    If so, it is the way it is sliced in photoshop, just adjust a little the starting size and replace the image on stage, that should be better.

  9. modnart says:

    Thanks Mario. I think I am lost in translation! “just adjust a little [to...at the top of...to the height and width of?] the starting size”

  10. modnart says:

    Yes, it is the image, I am not using the waterfall code.

  11. You got two waterfall images right? The second one that i’ve sliced from orginal (the water image) it’s a little larger at top giving those lost pixels in the effect.

    To correct this, just adjust the top size of the “water” image, stretch it a little on top (where the water starts), this should be made in photoshop or similar..

    Import it again into flash and replace existing one.

    This should work.

  12. Fin says:

    Awesome. Thank you!

  13. sara says:

    it is nice project

  14. ahmad says:

    can’t we do this in actionscript 2.0

  15. Vishambar says:

    Hi, I have trid to learn relastic water effect i went through tutorials but this effect is not working there is error on action script first line

  16. Ahmad, This will only work on actionscript 3.

    Vishambar, can you please tell me the error? Are you using the original CS3 projet that i’ve uploaded??

    Cheers.

  17. mm says:

    these tutorials r so cool, never thought about doing water!!!!

  18. Great! I will use this in my new movie.

  19. meenakshi says:

    great work !!!!!!!!!!!.really helpful.

  20. james says:

    what happen to the files to download. i downloaded the images.zip and there is no waterfall.jpg. seems to be unrelated stuff in the zip folder.

  21. Greg Galus says:

    Thanks for the great tutorial. I found it very useful in creating my site at http://www.greggalus.com. Thanks again.

  22. Matt Vogt says:

    This is great works wonderfully thank you. I was just wondering, have you ever tried applying a preloader to this type of animation? For some reason, she won’t run if we export everything at frame 2. I bet it has something to do with the images… Any ideas?

  23. Bart says:

    Thanks, It’s great!

  24. Panos says:

    One question. How can we make it so it scales 100% at the browser window? What I want to achieve is making an image with a calm sea to have a small movement like waves. And this image will be scaled to 100% according to each user’s resolution…

    Thanks for the great help!

  25. Stefan says:

    Thank you very much :) I was about to buy a software that had waterfalls effects, but with your tutorial, I made it look way better..and for free…thank you :)

  26. Stefan says:

    Question. Check please this website: brandgrup.ro

    Flash code is below…What should I change to make it use less CPU? Or could one explain how should I use after effects for that? Thank you

    /** WATERFALL CODE **/
    var bm2:BitmapData=new BitmapData(waterfall.width, waterfall.height);
    var disp2:DisplacementMapFilter = new DisplacementMapFilter(bm2,new Point(0,0),1,2,10,60);

    var pt3:Point = new Point(0,0);
    var pt4:Point = new Point(0,0);
    var perlinOffset:Array = [pt3, pt3];

    addEventListener(Event.ENTER_FRAME, onFrame);

    function onFrame(evt:Event):void {

    /*water fall perlin noise, moved by y, creating the fall effect */
    perlinOffset[0].x +=3;
    perlinOffset[1].y -=0.1;

    bm2.perlinNoise(450,9,2,5,false,false, 7,true,perlinOffset);
    waterfall.filters=[disp2]

    }

  27. Hey this is just great, had a good read on this!

  28. Anatol says:

    Hello. Beautiful effect.
    To reduce CPU usage you may try to reduce flash movie’s frame rate.
    In my situation, originally my movie was 30 frames/sec and CPU usage was 100%. I reduce it to 10 frames/sec and CPU usage had reduced to 45 %.

  29. This is a very intriguing post, I was looking for this knowledge. Just so you know I discovered your blog page when I was doing research for blogs like mine, so please check out my site sometime and leave me a comment to let me know what you think.

  30. Matty14486 says:

    Nothing happens, even when I use your image and source files–i test the move and i get a static image. if i change anything or use a new image a get about a zillion error messages…

  31. Johnamritsar says:

    Wow Wounderfull Effect and Tutorial
    i was thirsty for this Water :)

  32. cheezy102 says:

    Really nice effect. In it’s current form it cripples even fast CPUs though. The best way to use it is to change the eventlistener to a timer. That way you can set it to run as fast or as slow as you like. I would recommend 5 or 10 fps (200 or 100 in timer with main timeline at 30fps).

    var bm:BitmapData=new BitmapData(MovieClipNameHere.width, MovieClipNameHere.height);
    var disp:DisplacementMapFilter = new DisplacementMapFilter(bm,new Point(0,0),1,2,10,60);
    var pt1:Point = new Point(0,0);
    var pt2:Point = new Point(0,0);
    var perlinOffset:Array = [pt1, pt2];
    var myTimer:Timer = new Timer(200);

    myTimer.addEventListener(TimerEvent.TIMER, onFrame);
    function onFrame (e:TimerEvent):void {
    perlinOffset[0].x +=1;
    perlinOffset[1].y +=0.1;
    bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset);
    MovieClipNameHere.filters=[disp];
    }

    myTimer.start();

  33. hosseini says:

    thanks a lot for this tutorial.
    very nice

  34. learningflash says:

    Hi, I LOVE this tutorial is the best of the best and im VERY thankfull.
    I have one question.
    Lets say I have a layer.. starts with a classic motion tweet from alpha cero to 100,this keyframe ends and teh very next one is the one that contains the effect code and works perfect. now this was my intro for the image. now the very next keyframe starts from alpha 100 to cero with a classic motion tween…
    my problem is that the water effect will not stop in my “outro” …

    can anyone tell me how to maintain thsi water effect lets say for 3 seconds and then stop?

  35. Marufmamun says:

    i just wow

  36. Janinekey says:

    Thanx so much but i get this error : TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at Flamdraw3_fla::MainTimeline/frame6() How can i fix this????

  37. Callpradeep says:

    that’s awesome

  38. DavidKaplan says:

    Very cool man thanks!
    How would you go about trying to fill up water simulating like a fish bowl filling?
    Thanks

Leave a Reply

TTL VIP
Become a TTL VIP Member & Get Notified of The Best Changes in Technology, Plus Win Prizes in Our VIP Only Contests...

Tech News Tech Tutorials Smartphone News Tablet News Gaming News Free Software Infographics Contact