Realistic Flash Water Effect

var addthis_pub = 'PixelHive';

Category: Adobe Flash Tutorials
Added: 04/07/2007
Views: 350,054

Realistic Flash Water Effect

We will create a realistic water reflection in Adobe Flash using Actionscript. After completing this tutorial, you will be able to apply the effect to your own photos and web graphics. I will also highlight the key variables to tweak the effect. This tutorial will create the dynamic water effect below:

Required Resources

Download the source image below:

Step 1 : Document Setup

Open Adobe Flash and Modify the Document Properties.
Modify > Document
Size: 390 x 293 (The image dimensions)
Frame Rate: 30 fps

Step 2 : Import Image and prepare for the effect.

Import the supplied lake_img2.jpg onto the Stage.
File > Import > Import to Stage...

With the image selected use the Align Pane to position it on Stage. Make sure the "To Stage" button is down, then click the two align options below:
Window > Align

In the Timeline Pane, rename 'layer 1' to 'Water'.
Create 1 new layer by clicking Insert Layer, .
Rename the new layer 'Land & Sky', see below:

Right click the image on stage and select "Break Apart".

Grab the Lasso Tool, , and select everything you do not want to apply the water effect to. (Traditionally this is the land and sky...)

Copy the selection, select the 'Land & Sky' Layer and paste it into place. ( Edit > Paste in Place ).

Now go back to the 'Water' Layer and convert the original image on Stage into a MovieClip.
Modify > Convert to Symbol
Name: water_mc

With the water_mc MovieClip selected, give it the instance name 'water_mc' in its properties panel. (below the stage)

Now your finished with the 'physical' work. Now it's time for Actionscript to take over.

Step 3 : Bring the water to life with Actionscript!

Create a new layer above the 'Land & Sky' layer, name it 'Actionscript'.

Select Frame 1 on the Timeline and open the ActionScript Window.
Window > Actions

Enter the following code: ( Explained after )

// -----------------------------------------------

// Water Reflection Effect

// -----------------------------------------------

import flash.display.*;

import flash.geom.*;

import flash.filters.*;

myBitmap = new BitmapData(390,293,false,0);

pt = new Point(0,0);

mpoint = new Point(0,0);

myDispl = new DisplacementMapFilter(myBitmap, mpoint,1,2,10,50);

water_mc.myList = new Array();

water_mc.myList.push(myDispl);

water_mc.filters = water_mc.myList;

i = 1;

this.onEnterFrame = function()

{

        filterList = water_mc.filters;

        offset = new Array();

        offset[1] = new Object();

        offset[1].x = i;

        offset[1].y = i/8;

        myBitmap.perlinNoise(45,5,3,50,true,false, 7,true,offset);

        filterList.mapBitmap = myBitmap;

        water_mc.filters = filterList;

        i++;

}

Line 1 - 4: Imports required Actionscript Classes.
Line 7: Creates an Object with an array of Bitmap pixels the size of our imported image.

Line 11: Uses the DisplacementMapFilter class to allow us to displace the image pixels. ( warp the picture )
Parameters of Interest:
The first parameter is our Bitmap Object from line 7.
The last 2 parameters are multiplers for the x and y displacement. Leave them for now, but play with them later.

Line 13 - 15: Adding our DisplacementMapFiler to our water_mc's available filters.
Line 17: Defining a function to run once per frame. (30 per second)
Line 19 - 23: Prepare to apply perlinNoise with a different offset point each frame.

Line 24 - 26: This is where all the magic happens. Applying perlinNoise to our Bitmap data.
Parameters of Interest:
parameter 1: affects frequency in the x direction.
parameter 2: affects frequency in the y direction.
parameter 3: number of octaves. Larger number = greater detail and requires more processing power.
Last parameter (offset): Defined earlier - This alters the x and y offset points for the octaves. (dramatic changes...)

Save and Test your file. You should see the water effect.

Flash Water Reflection : Concluding Statements

Now that you have the water reflection effect code working, start playing with some of the parameters of interest I outlined. Make small and gradual changes, test, and make more changes for customized effects. There are many more filters that can be controlled by Actionscript, use the Flash help to explore them.

var addthis_pub = 'PixelHive';

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Realistic Flash Water Effect" tutorial. View more of my tutorials here.

Realistic Flash Water Effect

Realistic Flash Water Effect

Required Resources

Step 1 : Document Setup

Step 2 : Import Image and prepare for the effect.

Step 3 : Bring the water to life with Actionscript!

Flash Water Reflection : Concluding Statements

Like My Work?

Project Sample

Testimonials

More Tutorials!