Realistic Flash Water Effect

Category: Adobe Flash Tutorials
Added: 04/07/2007
Views: 365,719
Category: Adobe Flash Tutorials
Added: 04/07/2007
Views: 365,719
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:
Download the source image below:
Open Adobe Flash and Modify the Document Properties.
Modify > Document
Size: 390 x 293 (The image dimensions)
Frame Rate: 30 fps
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.
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 )
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.
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.
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.
Interactive Trail Map Directory
Discovering trails in Maine just got a lot easier!
"I have worked with Max Langdon for almost five years. Max is not only a talented web designer and programmer, but he has an added quality that I find quite rare. He is able to really listen to and understand the client's vision. He asks excellent questions that help you zero in on exactly what you are trying to accomplish. This helps you clarify your goal and allows Max to think through the scope and sequence of the process before beginning to program. This saves him time and saves you money.
Working with Maxwell Langdon and his company, Pixel Hive has been a pleasure. I have always found him to be responsive and helpful. There is no "attitude" when you ask for an explanation or guidance.
I would be happy to speak with anyone who is thinking of working with Max. "