Using this thoroughly explained, detailed flash lesson, I will explain to you how to create advanced under water photo animation using the action script code and some special flash tips and tricks. You can use this animation for any flash banner, header or some presentation. Using this lesson, you will also learn how to import any photo into a flash stage, how to apply action script code on it, how to convert it into a movie clip symbol, how to create instance name and much more.

Example:



Step 1

First, find any photo which you like to use for this lesson.

Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as the dimensions of photo. Select any color as background color. Set your Flash movie's frame rate to 48 and click ok.

Step 3

Call the current layer photo. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import any photo into a flash stage.

Step 5

While the photo is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 6

While the new made movie clip is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 7

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip "photo_mc". See the picture below!



Step 8

Select now the first frame of layer photo and go to the Action Script Panel (F9). Then, enter this code inside the actions panel:

import flash.filters.DisplacementMapFilter;
import flash.display.BitmapData;
import flash.geom.Point;
this.createEmptyMovieClip("waterHold", this.getNextHighestDepth());
waterHold._visible = false;
var numOfRipples:Number = 65;
var speed:Number = 18;
for (var i:Number = 0; i<numOfRipples; i++) {
 var ripple:MovieClip = waterHold.attachMovie("wave", "wave"+waterHold.getNextHighestDepth(), waterHold.getNextHighestDepth(), {_x:random(Stage.width), _y:random(Stage.height)});
 ripple.gotoAndPlay(random(65));
}
onEnterFrame = function () {
 var bm:BitmapData = new BitmapData(waterHold._width+65, waterHold._height+65, true, 0x50000000);
 bm.draw(waterHold);
 photo_mc.filters = [new DisplacementMapFilter(bm, new Point(0, 0), -1, 1, 1, speed)];
};

Step 9

Hit now Ctrl+F8 key to create a new Movie Clip Symbol. Call the movie clip water. See the picture below!



Step 10

Select now the Oval Tool (O) and draw a circle shape about 10x10px.

Step 11

While the circle shape is still selected, go to the Color Mixer Panel (Shift+F9) and make the adjustments as follow:



Step 12

Click now on frame 70 and hit F6 key. While you're still on frame 70, select the Free Transform Tool (Q) and enlarge the circle to 100x100px. After that, go again to the Color Mixer Panel (F9) and make the adjustments as follow:



Step 13

While you're still on frame 70, go again to the Action Script Panel (F9) and enter this code inside the actions panel:

this._x = random(Stage.width);
this._y = random(Stage.height);
gotoAndPlay(random(10));

Step 14

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Shape Tween from the menu that appear.



Step 15

Go now to the Flash Library, choose right click on wateer_mc and choose Linkage. Then, for Identifier type wave. See the picture below!



We're done now!

Test your movie and enjoy!

Download source file (.fla)