Realistic Flash Water Effect

Adobe Flash Tutorials :

Category: Adobe Flash Tutorials
Added: 04/07/2007
Views: 348,321

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:

Lake Image

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

Align Pane

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

Prepare for clock hands

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

Break Apart the Bitmap

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

Selecting 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

Convert to Symbol

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

Rename Instance

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'.

Lock and Hide

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.

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.

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

Web Development : Promotional Daily Deskercise

Promotional
Classroom Fitness

Print & Graphic Design : Cafe Advertisment Theater Advertisement

Cafe Advertisment
Animated Cinema Ad

Web Development : Library Informational Website Phillips Public Library

Library Informational Website
New site for a recently digitized library in Maine.

Testimonials

"My coffee café, Cherries, benefited greatly from Maxwell's dual talents. Not only was he able to do the technical requirements to promote my business, his creative talents gave the business the logo and charm a unified distinctive style. He is a one stop shop, from the logo design, to menu, to commercial he produced a product greater than even our own vision. "

- Hedy Langdon, Farmington, Maine
View More Testimonials

More Tutorials!