Animated Masks

The aim of the tutorial is to s how you how to make a simple animated mask in Flash. A mask is an object which hides something. In the example below you can see through the circle, which is animated, and everything else is masked.

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

Step one: Create a New Movie

1. Create a new movie.
2. Go to: Modify > Document
3. Set the: Size. I set my movie size to: 550 x 170 pixels
4. Set the: Background colour . I set mine to: White
5. Click: OK
6. In the Timeline re-name Layer 1 to: Background
7. 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 Selection tool and look at the settings in the Property Inspector (Windows > Properties). It should say: Static Text.
   
   
   

   Text set to Static (Click to enlarge).
   
   Tip: To make the text fit exactly into the area you want resize it with the Free Transform Tool:
   
8. Save the file. I called mine: animated-mask

   Note: 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.

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 by clicking on the Insert Layer Button:
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 > Design Panels > Align
2. Select your circle with the Selection tool:
3. Click on the button: Align to stage
4. Click on the button: Align Vertical Centre
5. Click on the button: Align Left Edge

Your file should look like this.

Step five: Creating the animation

1. Right click (Mac: Ctrl 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 you wish use the Align panel to nudge the circle into place.
   
   
   

   Note: The background has disappeared! (Click to enlarge)

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 Layer label 'Mask' and from the menu select: Mask

   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.

   

   See how the layers are now locked and the Layer Symbols have now changed from: to: (Click to enlarge)

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.

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