Twitter Facebook RSS Logo

Realistic Rippling Water Animation in Flash

34 Comments

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!

Posted on January 24, 2012 in Tutorials, tagged , , by EntheosWeb
Tweet, Share or Comment on this page if you found this tutorial or resource useful!
Subscribe to the RSS feed or to email updates, to get even more great content!

34 thoughts on “Realistic Rippling Water Animation in Flash

  1. who can help me step ………”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”………,,,,,,,,,,i can’t do it

    • Move the stripes down at the 100th frame (till few stripes are outside the picture), don’t let the top stripe over the island to touch the water.
      Good luck :)

  2. I am a little confused about the same step as Nicky. Any way to make the screen shot a little bigger so I can get a better understanding what is happing on that step?

    Thanks

  3. Can’t download the source file …just get direct to page can’t be open ….tell me anyone …
    how can i get that file?

  4. that’s cool animation….:)may i have a request….can you do for me the rotating globe with vertical lines in flash……tnx..:))

  5. Hi!

    What I get at the end is that the water effect behaves as if it ignored the ‘island area shape’ layer’. The animation is great, however I can’t limit it only to water area. I’m using Flash 8, if it matters. Oh, and btw, I picked motion tween instead of a shape one, because with the shape tween it didn’t work at all.

  6. u are not showing where should i put the layer
    when i make the keyframe f6 the background image disapear
    again later u are not showing where is the stripe layer goone
    in the image that shows mask layer it not exist
    please help
    thanx

  7. Hey i have macromedia flash8 and i did every steps very carefully but the end result not come out . my animation was still plzzzzzzzzzz help me

  8. Do you not have a native English speaker writing this? These directions were horrible.

    “nd 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”

    This step made no sense and I think it’s why my end result is messing up.

  9. Could you please reupload the Source File ( .fla )?

    It appears it has been removed and considering this was only posted in January, I think that is a tad soon for a tutorial.

    Many thanks,

    Caith

  10. About step 7, where need to move strips to the bottom. You must select all strips and move down by arrow key. And don’t let the top stripe over the island to touch the water.

Leave a Reply

Your email address will not be published. Required fields are marked *

Featured Templates

Subscribe to New Posts

Enter your email address:

Delivered by FeedBurner