2 Domain Hosting

This tutorial will explain how to create a simple circular Ripple effect in Flash MX 2004. The .fla file also included at the end of the tutorial.
Please note: You need to have Flash Player 7.0 installed to view the Flash animation.

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.

• Still 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.

• Now go to frame 5 and reduce the size of girl_gr, maybe by 5pix width and height.

• Go to frame 20 and increase the size of girl_gr, maybe by 5pix width and height.

• Insert a new layer above this layer, call it "Layer 2".

• Draw a borderless circle. Which would look something like the one shown below
   

• Place this circle right at the center of girl_gr but make sure that this circle resides in Layer 2.

• Insert Keyframe (F6) into the 20th frame of Layer 2.

• Remaining in 20th frame Increase the size of the circle. Note, the increased diameter decides where you want the ripple to end or ebb.

• Now go back to 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. Drag ripple_mc movie clip onto the working area. Place it right at the center, just the way you placed the circle in ripple_mc Movie clip.

4. Insert frame (F5) into the 20th frame of ripple1 layer. This is just to make sure that the ripple _mc runs only for 20 frame.

5. Insert frame (F5) into the 30th frame of bg layer.

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

Tips: Inserting 1 ripple_mc Movie clip is sufficient if your picture is approximately the size of the picture as shown in the demonstartion. If your picture is really big, you might have to insert more than 1 layer of ripple_mc movie clip. See to that the difference between the appearance of each movie clip is 5 frames. Actually the differnce basically depends on the type of effect you want. So you can adjust it the way you want.

Download the .fla file

For straight Ripple Effect, Click here.