Animated Masks

This lesson shows you how to make a simple animated Mask in Flash. A Mask is an object which hides
something. In Flash Masks are used with layers and they provide a simple way to selectively reveal portions of
the Layer or Layers below. Masking requires making one Layer a Mask Layer and the Layers below it become
only partly visible or masked.

Step One: Setting up the Document

1. Open a New Flash Document: File > New (Ctrl N)

2. If the General Tab is not selected, select it:
3. Select Flash Document:
4. Click: OK

Note: You should now be able to see a new Flash document.

5. Go to: Modify > Document (Ctrl J)

6. Set the size. Mine is: 550 x 170px
7. If you wish select a: Background colour. I set mine to: White

8. Click: OK

Step Two: Creating the Text

1. If the Timeline is closed, Open it: Window > Timeline (Ctrl Alt T)
2. In the Timeline re-name Layer 1 to: Background
 Rename the Layer to Background.

3. Select your Text Tool:

4. Click on the Stage and type: Animated Mask (or whatever you want)

My text.

Note: As an alternative to typing you could do a drawing or even import a photo.

5. Select the Selection Tool:

6. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
7. If your text is not selected: Select the Text
8. In the Property Inspector check that the text is: Static Text

Selecting Static Text.

9. Select a: Font, Colour or Style (ignore size)

My Font settings:

10. Select the Free Transform Tool:

11. Drag the handles so that the text just fits the Stage: Enlarge Text
Step Three: Creating the Circle's Colour

The gray colour of the circle is actually a separate object to the actual circle! This is because the circle is actual
a Mask and a Mask is a transparent shape.

1. Select the Rectangle Tool:

Note: Sometimes the Rectangle Tool hides under the PolyStar Tool:

2. Draw a rectangle slightly bigger than the Stage: Draw a Rectangle

3. Return to the Selection Tool:
4. Click the fill of the rectangle: Highlight Rectangle Fill

The rectangle's fill goes 'Dotty' when selected.

5. Select a Fill Colour:

Selected here is gray: #666666

Important: The colour of the rectangle fill must be different to the Movie's background colour!

Save your file : File > Save (Ctrl S)

Step Four: Creating the Circle Symbol

The circle is animated using a standard Motion Tween. This means that you need to create a symbol to Tween.

1. In the Timeline lock the Background Layer:

2. Create a new Layer by clicking on the Insert Layer Button:
3. Name the Layer: Mask
4. Select the Oval Tool:
5. Drag out a large: Circle

Tip: To constrain the Oval Tool to drawing exact circles hold down the Shift Key whist
dragging.

6. Select the Selection Tool:

7. Select the circles: Stroke (outline)

Circle's Stroke is highlighted.

Note: The color of the circle does not matter as it will become a Mask which is a transparent
shape.

8. Delete the Stroke by pressing: Delete

9. Select the: Circle

The circle's now selected.

Note: If the circle is not the correct size use the Free Transform Tool to change it's size. Don't forget
to return to the Selection Tool:

10. Go to: Modify > Convert to Symbol... (F8)

11. Name the symbol: Circle
12. For Behavior select: Graphic
 13. Click: OK

New Circle Symbol.

Step Five: Animating the Circle

The circle starts it's animation on the left of Stage so the first thing to do is place it correctly:

1. If the Align Panel is closed, open it: Window > Align (Ctrl K)
2. In the Align Panel if the 'To Stage' option is off, turn it on:

Align To Stage is On when the To Stage icon has a white background:

3. With the circle selected click on: Align Vertical Centre

4. Click on the button: Align Left Edge
 The circle is now to the left of the Stage.

5. In the Timeline select: Frame 60

Frame 60 is selected.

6. Go to: Insert > Timeline > Keyframe (F6)

There is now a copy of Frame 1 on Frame 60.

7. Select: Frame 30

8. Go to: Insert > Timeline > Create Motion Tween

9. With Frame 30 selected go to: Insert > Timeline > Keyframe (F6)

10. If the Align Panel is closed, open it: Window > Align (Ctrl K)

Note: the Align to Stage button should still be selected:

11. With the circle selected click on: Align Right Edge

12. Save your file : File > Save (Ctrl S)

Your Movie should look similar to this:

13. If you wish you may want to test your Movie: Control > Test Movie (Ctrl Enter)
14. Close the Test Window:

15. Unlock the Background Layer:

16. In the Background Layer select: Frame 60

 Frame 60 of the background Layer is selected.

17. Go to: Insert > Timeline > Frame (Ctrl F5)

Note: Your background should re-appear.

Step Six: Creating the Mask

1. In the Timeline right click (Mac: Ctrl click) on the Layer label 'Mask' 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 that the status of the lock make s no difference in the final Movie. To
make the Mask appear again (in edit mode) re-lock the Layers.
 See how the Layers are now locked and the Layer Symbols have now changed from: to:

2. If you wish you may want to test your Movie: Control > Test Movie (Ctrl Enter)

3. Close the Test Window:

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

Exercise:

Create a Movie with multiple Masks.