Twitter Facebook RSS Logo Logo

Realistic Rippling 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 )


 

1.jpg

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.

2.jpg

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.

4.jpg

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.

5.jpg

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.

6.jpg

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.

7.jpg

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

8.jpg

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.

9.jpg

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

10.jpg

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

11.jpg

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

12.jpg

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

13.jpg

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

15.jpg

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

16.jpg

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.

17.jpg

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

18.jpg

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

20.jpg

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

19.jpg

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

21.jpg

Now come to the main time timeline.

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

23.jpg

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

23.jpg

Now Right click on the mask layer and select mask.

24.jpg

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!