Have you seen cool effects professional flash developers can create using masks? If you saw them you probably want to learn couple tricks. Let's begin studying! If you experience some difficulties while reading this tutorial it is recommended to read all the previous tutorials on http://www.metamorphozis.com written by me as some aspects might be discussed earlier.

1. Launch Flash MX 2004

2. Create new Flash file. Click File > New...

3. Select Flash Document in a new window

4. We will need some image to play with. I used the picture from "Shrek" cartoon. Import it to the library and then drag it to stage.

5. Convert this graphic into the movie clip and double click to enter it.

6. Insert some more frames into the "Layer1". This is going to be a basic layer. Masking effect will be displayed under it.

7. Create 2 blank layers above the "Layer 1". Let's name them "Mask" and "Background". It is important that these layers were located as shown on the picture:

8. Now drag the same picture of Shrek as you have in "Layer 1" into "Background" layer. Warning! Second picture must be located exactly as the first one located on the working area. Otherwise the difference in locations will be visible when you create mask.

9. Select the "Mask" layer and with the "Oval Tool" draw a simple circle as shown on the picture.

10. Right click the "Mask" layer in the "Timeline" as shown on the picture and select "Mask" option from the right click menu.

11. Unlock the "Mask" layer. Create some tween animation. Move the circle for the different keyframes in animation. See the pictures a and b:
a)


b)

12. Lock the "Mask" layer. Select "Layer 1". Convert it to graphics. Select the "Advanced" in the "Color" drop-down box and click "Settings" button.

13. In the popup window set the properties as you may see on the picture

14. Press Ctrl+Enter to view the movie. That's it. Now you have a basic masking effect.

Click here to download source fla file.

About the Author: Oleg Lazarenko
Production manager of
Metamorphosis Website Design Studio -
Flash Templates and Web Templates,
Web design Articles and Tutorials.

You may reprint this tutorial for free as long as the content, About the Author sections and all links remain unchanged.