Flash Ripple Effect

Demonstration

This tutorial will teach you how to create a simple Ripple effect in Flash MX 2004. The .fla file also included at the end of the tutorial.
Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 or higher must be installed in your system to download the .fla file.

STEPS TO FOLLOW

Create a Graphic Symbol.

• Import an image to your work area upon which you would like to create ripple effect.
• Press F8, to convert this image to a symbol.
• Name this Symbol "girl_gr" and choose graphic behavior. Press OK.
• Name this Layer "bg".
• Select girl_gr and choose Alpha 99% from color list box in your property window.

Create a Movie clip.

• Press Ctrl+F8, to create Ripple movie clip.

• Name this symbol "ripple_mc" and choose Movie clip behavior. Press OK.
• Drag girl_gr to your working area from Library (ctrl+L).

• Select girl_gr and choose Alpha 0% from color list box in your property window.
• Insert Keyframe (F6) into the 5th frame.
• Remaining on the 5th frame, Select girl_gr and choose Alpha 99% from color list box in your property window.
• Now select 1st frame, choose Motion Tween from Tween list box in your property window.
• Insert Keyframe into 15th frame and later to 20th frame.
• Remaining on the 20th frame, Select girl_gr and choose Alpha 0% from color list box in your property window.
• Select 15th frame, choose Motion Tween from Tween list box in your property window.
• Insert a new layer above this layer, call it "Layer 2".
• Select frame 1 of Layer 2 and draw a borderless square or rectangle depending on the type of ripple effect you want.
  In the above demonstration, I have used rectangle with 15 pix as its height.
• Place this vector wherever you want the ripple to begin. Make sure that the vector belongs only to layer 2.
• Insert Keyframe into the 20th frame of Layer 2.
• Place the vector wherever you want the ripple to end or ebb.
  In the above demonstration, I have placed it right at the bottom and reduced the height to 5 pix.
• Select 1st frame, choose Shape Tween from Tween list box in your property window.
• Right click on Layer 2 and select Mask.
• Save (ctrl+S). Make it a habit to save your work after each step you do.

Insert Ripple Movie Clip onto Scene 1

1. Now go back to Scene 1.
2. Insert a new layer above bg layer and call it ripple1.
3. Insert new Keyframe (F6) into the 10th frame of ripple1 layer.
4. With 10th frame of ripple1 layer selected, Drag ripple_mc movie clip onto the working area. Place it appropriate to girl_gr. Make sure that this movie clip is placed exactly where you had placed your square or rectangular vector in ripple_mc Movie clip.
5. Insert frame (F5) into the 30th frame of ripple1 layer. This is just to make sure that the ripple _mc runs only for 20 frame.
6. Insert another new layer above ripple1 layer and call it ripple2
7. Insert Keyframe into the 20th frame of ripple2 layer.
8. With 20th frame of ripple2 layer selected, Drag ripple_mc movie clip onto the working area. Place it appropriate to girl_gr just the way you did in step 4.
9. Insert frame (F5) into the 40th frame of ripple1 layer. This is just to make sure that the ripple _mc runs only for 20 frame.
10. Insert frame (F5) into the 40th frame of bg layer.

Here you go!! Your movie is ready. Press Ctrl+Enter to view your movie. Wasn't it simple.

Okay now few things to Note - In the above demonstration I have created a subtle ripple effect. If you want the ripples to be more prominent, you can add few more layers of ripple_mc movie clip and reduce the Keyframe differences between layers. Like in the tutorial above, ripples appear every 10 frames. You can reduce this period and make it appear every 5 frames, which would make the ripple effect more prominent.

Download the .fla file

For Circular Ripple effect tutorial, Click here.

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!