Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources > Circular Ripple Effect   

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

Circular Ripple Effect in Flash

Demonstration

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:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 must be installed in your system to download the .fla file.

Example:
www.primacysearch.com

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

    Instructions to draw the above shown borderless circle

    • Draw a black circle in a layer and delete it's border.
    • Insert a layer above the black circle layer.
    • Draw a smaller white circle in this new layer and delete it's border.
    • Position the white circle such that it is right at the center of the black circle.
    • Now, cut the white circle and paste it (Ctrl+Shift+V) in the black circle layer.
    • Click somewhere outside, so that you deselect either of the circles.
    • Now click on the white circle and delete it

    Your borderless circle is ready!


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


Now building a website is as easy as 1-2-3!

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

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Flash Website Design? Choose from over 6000 templates!

Gorgeous Page Roll Image Transition Effect in Flash

Creating Page Curl Transition

Creating a Rotating 3D Planet in Flash

Creating Realistic 3D Planet

Best Flash Photo Gallery Website Templates

Best Flash Photo Gallery Website Templates

Burning Image Effect in Flash

maskmn_image055

Realistic Rippling Water Animation in Flash

r_water

Awesome 3D Flash Website Templates

Awesome 3D Flash Website Templates

 

Featured Template
Template # 56625
Type: PSD
Price: $11

Flash Photo Galleries