Realistic Flash Water Effect
Category: Adobe Flash Tutorials
Added: 04/07/2007
Views: 356,757
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.
Like My Work?
I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.
Project Sample
Testimonials
"Our organization relies on Pixel Hive Design’s broad-based expertise in web, graphic, and database design. Simple web sites, interactive atlases, custom Google Maps applications, brochures, interpretive panels…Pixel Hive Design has helped us to deliver wide-ranging, high quality products that always exceed clients’ expectations. Max is extremely talented and a great partner."
- Stephen Engle, Director, Center for Community GISView More Testimonials
