Animated Ripple effect (Simple) - Flash MX 2004

[ahsan16]

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.

[AfTriX]

Its a complex to understand. (( May be my knowledge on Flash I think, I'm new to that ))

[ahsan16]

Moved into a wrong section

[AfTriX]

No matter wherever it is, you get points for the post, You get viewers either.

[xtraze]

Why not start a category for Flash tutorials ?
I know there are many Flash tutorials to be added and Flash is related to programming as well.

[AfTriX]

Ahsan16! you can send a PM to any of the Moderator to asking for a Flash Tutorial Section.

[xtraze]

Not only ahsan16, anyone can ask for it as it is important to learn at least the basics of FLASH. Flash is one step higher than bitmaps, isn't it.

[AfTriX]

Soon these replies will be noticed by one of the moderator. And they will create such topic.

[shibbythestoner]

A flash board would be nice, I'd enjoy learning some more actionscript.

[panta]

wow. Great tutorial. Served my purpose perfectly.

Thank you!