Realistic Water Animation in Flash!

In this tutorial you will learn how to create a realistic water rippling effect on a static image using masking in Flash.

Tutorial Details

Program: CS4

Difficulty: All

Estimated Completion Time: 30 hr

Tutorial Assets

The following assets were used during the production of this tutorial.

Source File ( .fla )

In this tutorial, you will learn how to create a Realistic water animation in flash using a water image. Here we are taking new flash document with action script 2.0.

Step 1: Setting Up Document Properties
Now Select Modify from the menu bar and select Document or You directly can press ctrl + J to open the document properties. See the reference image below.

Now change the stage dimensions as 700 x 552 and the FPS is 24, as shown in the Figure below. To start with the tutorials download the source.zip file that will provide you with the necessary files to be used in the tutorial.

Step 2: Importing image
First import the downloaded used images from the source. To do that, Go to the File menu > Select Import > Select Import to Library.

Step 3: Positioning the image on to the stage
Before starting we already have layer 1, now name the layer as scene img. Open the library panel by Pressing Ctrl+L. Then drag the beautiful-island image from the library.

Align the image to the center of the stage using the align panel. Keep in mind that to align any item to the center of the stage, Press the “To stage” button.

Step 4: Detaching island part of the image
Now Copy the images, to do that press ctrl + C and insert a new layer as scene img2 then press Ctrl + Shift + V.

Now Insert a new layer again above the scene img2 layer, and name it as island area shape.

Now draw a shape using pen tool or line tool around the island and sky area. See the black outline in the given reference image below.

Now Right click on the island area shape layer and select mask.

You will find the masked images something like the given image below.

Step 5: Creating animation symbol
Now insert a new layer, and name it as water animation.

Again paste the copied image or drag and center align the image from the library. Convert the image to movieclip symbol, To do that, select the image > Right click > Convert to Symbol. See the reference image below

Now press ctrl + T to open the transform panel or go to the window menu and select transform. Increse the width and height to 102%.

Step 6: Creating masking for water area
Now insert a new layer and name it as mask stripes.

Create no. of stripes using rectangle tool as given in the reference image below. Keep in mind the space between each rectangle or strip must be same as well as size of the strip should be same too.

Step 7: Animating the stripes
Now go to the frame 100 and insert a key frame by pressing f6.

And move the strips to the bottom as shown in Figure below. Keep in mind; do not move stripes to outside the beach area. And the strip position on frame 1 and 100 should be match. By doing this we can decrease the jerk from the animation

Now select any frame between frame 1 and 100 of mask stripes layer. Then Right click > select Create shape tween.

Now Right click on the mask stripes layer and select mask.

Now come to the main time timeline.

Step 7: Finalizing the animation
Now insert a new layer and name it as mask.

Create a rectangle as shown below. By doing this we can hide the extra part of the water animation layer.

Now Right click on the mask layer and select mask.

Next, choose CTRL + ENTER to publish the flash file to get the realistic water effect.

We hope you have learned something new and interesting in Flash. Do leave your comments and feedback in the comment form found below. We’d love to hear from you!