Recipe 6.8. Masking Page Elements

Problem

You want to block or reveal one or more elements using another element.

Solution

Create a mask.

Discussion

You can use masks to hide and reveal contents of one or more layers using the contents of another layer. Every working mask has two parts: the mask element(s), whose outline reveals the contents of the masked element(s), and the masked element(s), which is hidden except where it lies directly beneath the mask. Reflecting this distinction, Flash enables you to create special mask and masked layers, which hold mask and masked elements, respectively. A mask layer is a special kind of layer, like a motion guide layer, whose stage contents are not shown in the SWF, but rather are used to reveal whatever is placed beneath them in masked layers. Where the stage is empty in a mask layer, all content in the masked layer is hidden.

To create a mask, follow these steps:

1. Create the content that you want to use as the mask. You can use any kind of visible content in any combination, including vector art, text (using embedded fonts), symbol instances, and imported bitmaps.

2. Choose Modify Timeline Layer Properties, and select the Mask from Type radio group.

3. In the layer stack to the left of the timeline, drag the layer that you want masked so that it is directly beneath the layer that you want to mask it.

When you release, the masked layer will be indented beneath the mask layer, and both layers will have special blue mask icons beside them.

Giving layers meaningful layer names, a best practice to begin with, is especially helpful when dealing with complex layer clusters, such as mask- or motion-guided tween layer clusters.

You can preview masks in the authoring environment by locking all layers that are a part of the mask group, including the mask and masked layers. You can lock layers one at a time by clicking the Lock Layer modifier for each layer. Alternatively, you can right-click (Windows) or Control-click (Macintosh) any layer in a mask group and select Show Masking, which toggles all the layers in the mask group to the locked position. To edit any part of a mask, unlock the affected layer.

In addition to the basic features just outlined, Flash masks have a few features and limitations:

• You can mask multiple layers. That is, one mask layer can have multiple masked layers associated with it. Relative to each other, multiple masked layers behave like they would if they weren't masked: content on higher layers obscures contents on lower layers.

• You cannot nest a mask layer within another mask layer. That is, you cannot mask a mask.

• Contents in mask layers fully reveal contents in masked layers. That is, a shape with 50% opacity in a mask layer still reveals the masked layer 100%.

• Mask layer clusters are not permanent. You can revert any mask or masked layer back to a normal layer or add new layers to the group at any time. A layer's status can be changed in the Layer Properties dialog box.

One popular effect is the text mask, in which text appears to be filled with a bitmap photo or some other type of advanced fill. This effect is easily achieved by placing text in its own layer, converting the layer to a mask layer, and placing a bitmap, gradient, or other image in a masked layer.

You can remove a layer from a mask group by dragging it out of the influence of the mask layer, or by selecting it and choosing Modify Layer and choosing Normal as the layer type.

See Also

Recipe 6.3