Use Mask Layers in Flash CS5 - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Masking in Adobe Flash Creative Suite 5 involves using a shape (or shapes) to hide or reveal portions of a piece of Flash CS5 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.

If you’ve worked with layer and selection masks in other Adobe applications such as Photoshop and Illustrator, the concept of masks should already be familiar to you. The technique for creating masks in Flash is a bit different, but the core concepts of masking are the same.

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.

Animated text is a great candidate for masking. The following steps walk you through creating a tween to which you add a mask layer for added effect. 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.

    For this example, we typed FLASH ROCKS in capital letters.

  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, choose 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 layer that contains your text and choose Create Motion Tween from the con-textual 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, we used the Polystar tool 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!