Home / Tutorials / Flash / Radial Ripple Masking Effect in Flash

Radial Ripple Masking Effect in Flash

Here is another simple and interesting Masking technique in Flash. You can make Ripples by using this technique. So you will also learn how to create Mask Effect in Flash. As usual I’ve also uploaded Source FLA for your convenience, so must try it.

[Download Source FLA File]

1. First of all take a new file of any size in Flash. Import your image into it, I’m using Stunningmesh’s Logo:

2. Select it and press F8 to convert it into Symbol (Modify >> Convert to Symbol), a window will come, write name as ‘stunningmesh-logo’ and select Graphic from Type list as:

Hit Ok and reduce the opacity (alpha) of this image to 98% from Property panel.

3. Now take a new Symbol but pressing Ctrl+F8 or running the command Insert >> New Symbol. Type name as ‘stunningmesh-animation’ and select Movie Clip from Type list as:

4. Now drag the Graphic Symbol (stunningmesh-logo) from Library to Stage. Reduce its Alpha to 0% from Property Panel. Logo will vanish. Now choose your desire Frame from TimeFrame Panel, I’m going to chose 10, select it and hit F6 Key to insert KeyFrame as:

5. While remaining on Frame 10, select ‘stunningmesh-logo’ on stage and change the Alpha to 98% from Property Panel. Select Frame 1 and right click over it. Now select ‘Create Classic Tween’, if you are using Flash CS4 or later, for older version select ‘Create Motion Tween’. You will get your Frames as:

6. Here is some complicated part. Select Frame 30 and hit F6 key, then select Frame 50 and hit F6 key to insert keyframes. While remaining on Frame 50, select ‘stunningmesh-logo’ and reduce the Alpha to 0% from Property Panel. Now select Frame 30, right click over it and then select ‘Create Classic Tween’, if you are using Flash CS4 or later, for older version select ‘Create Motion Tween’. Again repeat this step for Frame 10.

7. Select Frame 10 and reduce the size of the logo just 5% (open Transform Panel from Window >> Transform or simple press Ctrl+T and type 95% in both horizontal and vertical)

8. Now select Frame 50 and change the size of logo, but this time increase the size 5%, by typing 105% in both horizontal and vertical boxes in Transform Panel.

9. Now create new layer and pick Oval Tool and draw a small circle in the middle of the stage, but having thick outline (almost 8 px):

10. Delete the Fill of this circle, so you will get only Outline. Select it and run the command, Modify >> Shape >> Convert Lines to Fill, you will get this:

11. Right click on the 50th frame of Layer two (on which Circle is placed), select ‘Create Classic Tween’, if you are using Flash CS4 or later, for older version select ‘Create Motion Tween’. Then hit F6 key. Now right click on Layer 2 name and select Mask.

12. Now go back to Scene 1 and take new layer over the ‘stunningmesh-logo’ original Graphic, which we created in Step 2 above. Paste your ‘stunningmesh-animation’ in the center of new layer and hit F5 on Frame 50 of both layers. Press Ctrl+Enter and you will see this animation:

[Download Source FLA File]

About Wijdan Rohail

A professional Web/Graphic Designer, working as Freelancer since 2000. Designing is my passion, blogging is my hobby.

Check Also

Dancing Stars in Flash without ActionScript

Dancing Stars in Flash without ActionScript

In this Flash tutorial you will learn about Movie Clips, working on Guided Layers, use …

6 comments

  1. I dont get it at step 11 and 12.

  2. there is something missing on step 11
    plz check and email me

  3. Great tutorial. I think there is missing some info on step 11 – we need to create bigger cicrle in Frame 50 in order to tween between small and big size.

  4. Well this is very interesting indeed.Would love to read a little more of this. Great post. Thanks for the heads-up…This blog was very informative and knowledgeable

  5. Fantastic Flash effect. Nice job… 🙂

  6. This was very helpful! Thanks for the easy to understand directions!

Leave a Reply

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

%d bloggers like this: