Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Animated Masks

006 Beginners
Flash Compatibility: MX     For Flash 8: click here     For Flash MX04: click here

Written by: Phil Schulz

Length: 800

The aim of the tutorial is to show you how to make a simple animated mask in Flash.

Cross Ref: There is another tutorial explaining how to create a mask which is attached to the movement of the mouse. See: Beginner - Masks Attached to the Mouse

My Example: Download the Flash file  Beg 006a

Step one: Create a New Movie

1. Create a new movie and Modify > Document size and colour.
   I set my movie size to: 550 x 170 Pixels and background to : White.
2. In the Timeline re-name Layer 1 to: Background
3. Create an image or text to go on the first Layer. You could also import a photo. My Background Layer looks like this:
   
   
   
   The dark gray background is drawn onto the stage then the text typed over the top. If I did not paint a background you would not see the shape of the gray circle but only the letters.
   
   Note: The text must be set to Static text. If you are not sure if your text is static select the text with your Arrow tool and look at the settings in the Property Inspector (Windows > Properties). It should say
   
   
   Text set to Static.
   
   
4. Save the file. I called mine: animated-mask
   For file names do not use spaces or any punctuation. You may use letters, numbers, underscore _ and hyphen - only! You can use capitals if you want, but they are a pain, so I never do.

Step two: Create a symbol to animate

1. Go to Insert > New Symbol
2. Name the symbol: circle
3. For Behavior select: Graphic
4. Click ok.
5. Draw a circle (or whatever). The colour of the circle makes no difference.
6. Return to the main stage by clicking on the tab on the top left of the stage.

Step three: Create the mask layer

1. Create a new Layer above your background layer.
2. Name the layer 'mask'.
3. Open your Library: Window > Library.
4. Drag the circle symbol into the new mask layer.

Step four: Create the animation

1. Align the circle to the left of the stage by opening your align panel: Window > Align.
2. Click on the align to stage button.
3. Click on the align vertical centre button.
4. Click on the align left edge button.
   
   
   Your file should look like this.

Step five: Creating the animation

1. Right click (Mac: Command click) on frame 60 of the mask layer and select Insert Keyframe.
2. Right click on frame 30 of the mask layer and select Create Motion Tween.
3. Drag the circle from the left side of the stage to the right. This will automatically place a keyframe in frame 30.
4. If need be use the Align panel to nudge the circle into place.
   
   
   Note that the background has disappeared!

Step six: Adding frames to the background

1. Right click on frame 60 of the background layer and select Insert Frame. Your background should re-appear.

Step seven: Creating the Mask

1. Right click on the frame label 'Mask' and select mask from the menu.
   
   Note that when you create a mask the layers become automatically locked. The lock icon appears next to the layer labels. If you wish to edit the layers you will need to unlock the layers by clicking on the lock icon . The mask will appear to be gone, in actual fact if you test the movie you will find it makes no difference. To make the mask appear again (at least on stage) re-lock the layers.

Step eight: Test your Movie

Either: Go to Control > Test Movie.
Or: Drag the red play head to see the animation move.
Or: Press 'Enter' on the keyboard to see the animation play on stage.

My Example: Download the Flash file  Beg 006b

Movie with multiple masks

Have fun with your masks. They are really easy to do! At least I hope they are now you have done this tutorial!