How to Use Mask Layers in Adobe Flash CS6 - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

The concept of masking in Adobe Flash CS6 involves using a shape (or shapes) to hide or reveal portions of a piece of artwork — much like viewing the outside through a small window in your house. The window’s size limits what you can see when you’re inside.

Flash features a special type of layer, known as a mask, and its contents are used to selectively reveal (or hide) artwork or animation on another layer.

Mask layers aren’t supported when your publish target is HTML. For new files, the Mask option will be disabled for Layers on the timeline. For existing documents using layer masks, they will be discarded at publish/preview.

You can convert any layer into a mask by using the Layer contextual menu, launched by right-clicking (Windows) or Control-clicking (Mac) the layer’s name area. Artwork on a mask layer isn’t visible; the content of a mask layer always represents the visible area of the layer underneath.

Before you get started, create a new document and select the Type tool. Choose a fill color and then use the Property inspector to set the typeface to Arial Black (or similar) and the font size to 40. Then follow these steps:

  1. On a new layer, select the Text tool and type a few words on the layer.

  2. Switch to the Selection tool and select the text. Choose Modify→Convert to Symbol or press the F8 keyboard shortcut to convert the text to a new graphic symbol.

  3. In the Convert to Symbol dialog box, select Graphic from the Type drop-down list and enter a name for the symbol in the Name text box.

  4. Place the text off the stage to the left so that it’s sitting in the pasteboard area.

    You animate the text to bring it across the stage, entering from one side and exiting on the other.

  5. To create a new tween span, right-click (Windows) or Control-click (Mac) the first keyframe on the layer that contains your text and choose Create Motion Tween from the contextual menu that appears.

    An instance of the text is created there as well.

  6. Move the pointer over the last frame of the new tween span until you see the double arrows. Click and drag to extend the tween span to Frame 40.

  7. On Frame 40, select the text and drag it all the way to the right side of the stage.

    A keyframe is created at Frame 40, and it creates a tween that moves the text from left to right across the stage.

  8. Insert a new layer above the tween layer and name it Mask; create a shape to use as your mask on this layer. Make sure that the shape is at least as tall as the text symbol you created.

    For example, the Polystar tool is used to create a star in the center of the stage. The Star option for the Polystar tool is available in the Property inspector, under Options.

  9. Right-click (Windows) or Control-click (Mac) the new layer name and choose Mask from the contextual menu that appears.

    The new layer is converted to a mask layer, and the tween layer appears indented underneath. Both layers are locked automatically.

  10. Press Enter or Return to play your movie.

    The text animates, appearing through the shape (a star, in this example), much like you’re viewing the animation through a window.


For the masking layer to take effect, both the mask layer and the layer being masked must be locked. To edit the contents of either layer, unlock the layers by clicking and removing the padlock icons on each layer.

Mask layers can contain just about anything a standard layer can, including tweens. Try creating a motion tween on your mask layer and see what happens!