Mask Layers / Macromedia Flash 8 Bible

Mask Layers

In the real world, a mask is used to selectively obscure items beneath it. In Flash, a Mask layer is used to define the visible area of layers nested beneath it. Multiple layers can be nested as masked layers beneath a single Mask layer. As with Motion guide layers, the content on Mask layers is not visible in the final .swf because it is intended only to modify how content in nested masked layers is rendered.

On the CD-ROM

The various examples we discussed in this section can be found in the mask subfolder of the ch13 folder. You may find it helpful to examine the structure of these files to understand the many ways that Mask layers can be applied.

Almost any symbol or filled shape (excluding strokes) may be used to create a mask. However, Flash ignores bitmaps, gradients, transparency, colors, and line styles in a Mask layer. Masks may be animated or static. The only other limitations are that you cannot apply a mask to content in another Mask layer, and Mask layers cannot be placed within Button symbol timelines.

Caution

Although groups, text boxes, and Movie Clips or Graphic symbols can all be used to define a mask, only one such item will be recognized on a single Mask layer. You can use multiple primitive shapes to define a mask, but they will override all other items existing on the same Mask layer.

Masking with a Filled Shape

Here's how to create the simplest form of mask:

Make sure that the content that will be visible through the mask is in place on its own layer, with visibility turned on. This will become the masked layer.
Create a new layer stacked above the masked layer. This will become the Mask layer.
In the Mask layer, create the "aperture" through which the contents of the masked layer will be viewed. This aperture can be any filled item, text, or placed instance of a symbol that includes a filled item. (Of course, lines can be used as masks if they are first converted to fills with the Modify ð Shapes ð Convert Lines to Fills command.)
Now, position your mask content over the content on the masked layer (see Figure 13-10) so that it covers the area that you will want to be visible through the mask.
Right-click (or Ctrl+click) the layer bar of the Mask layer to invoke the contextual menu (see Figure 13-11), and choose Mask from the menu (or use the Layer Properties dialog box to change the layer behavior from Normal to Mask).
The layer icons change to indicate that the masked layer is now subordinate to the Mask layer and both layers are automatically locked to activate the mask. The contents of the masked layer are now visible only through the filled portion(s) of the Mask layer, as shown in Figure 13-12.
To reposition, or otherwise modify, the Mask layer, temporarily unlock it (see Figure 13-13).
To reactivate masking, lock the Mask layer again (and confirm that the masked layer is also locked). The contextual menu for Mask layers and masked layers includes Show Masking — this handy command locks the Mask layer and all nested masked layers for you.

Figure 13-10: The content on the upper layer defines what is visible in the lower layer(s).

Figure 13-11: Convert the upper layer into a Mask layer by selecting Mask from the contextual menu.

Figure 13-12: When the mask is active, the content on the Mask layer is no longer visible, but it will define the visible area of the content on the masked layer underneath.

Figure 13-13: With the Mask layer unlocked, the contents are visible and editable.

Caution

When you first start working with Mask layers, it is easy to forget to lock both the Mask layer and the masked layer to make the mask effect visible. If you are ever having trouble editing or viewing your masked effect, just remember that when the layers are unlocked, the mask art is visible and editable, and when the layers are locked, the final masked effect is "turned on."

Masking with a Group

Multiple filled shapes can also be grouped and used as a mask, as long as the Mask layer doesn't also contain primitive ungrouped shapes. Grouped shapes on the same layer as ungrouped shapes will be ignored when the Mask is applied. If a mask is composed of multiple items, using a group makes it easier to position the mask, as shown in Figure 13-14.

Figure 13-14: Grouped filled shapes make it easier to position complex masks.

Masking with a Symbol Instance

As you are reminded in nearly every chapter of this book, working with symbols is working smart because doing so helps to reduce file size. Because symbols composed of filled shapes can be used as masks, there's no reason not to use a symbol from your Library to make a mask. (If you've already made a shape on your Mask layer, go ahead and convert it into a symbol so that you can use it again without adding to the final file size.) Reusing symbol instances to define masks is especially logical if you are making multiple masks that all have the same basic shape. For example, if you need a rectangular or oval mask, you will often find a symbol in your Library that was created to define the active area of a button or some other basic element. It is smarter to modify an instance of an existing symbol so that it works as a mask than to add redundant elements that increase your file size.

Note

Although in theory you can use a Button symbol instance as mask artwork, note that a Button symbol instance placed into a Mask layer will no longer function as a button. The result of this workflow is similar to selecting a Button symbol instance and assigning it Graphic symbol behavior in the Property inspector.

To illustrate the way that symbols can be reused as both graphic content and as mask elements, we have used instances of a symbol as static content on a masked layer and then Motion tweened another instance of the same symbol on a Mask layer to create an animated oval reveal. Figure 13-15 shows the symbol instance used on the Mask layer (on the left), the symbol instances used on the art layer (in the center), and the final mask effect visible when both layers are locked (on the right).

Figure 13-15: Instances of one oval symbol combined to create a graphic and a mask effect

On the CD-ROM

Open the symbolMask.fla example from the mask folder inside the ch13 folder on this book's CD-ROM to see the animated effect.

Masking Text

Not only can text be masked, but it can also be used to mask other graphics. To mask text, simply set up your Mask and art layers, as we described in the previous section, with the text to be masked on the lower layer, and the filled item that you'll use for your aperture on the Mask layer, as shown in Figure 13-16.

Figure 13-16: Masking a text block with a tweened shape (shown on top) and the final reveal effect (shown on the bottom)

To use text as a mask, the layers should be set up as described previously. In this situation, the text (which goes on the mask layer) will look as though it was filled by whatever is placed on the lower layer. For this to be effective, a larger point size and fuller, bold letterforms are best, as shown in Figure 13-17.

Figure 13-17: A bitmap pattern (left) placed on the art layer and masked with text (right)

Caution

Although you can type as much text as you like in a single text box to apply as a mask, you can have only one text box per Mask layer. To use multiple text boxes as mask elements, add separate Mask layers for each text box.

Because the edges of mask letterforms may be hard to discern if the image underneath is not a solid color, it can be helpful to add a drop-shadow to make the mask letters more legible. However, a drop-shadow or an outline added to the text on the Mask layer would not be visible, so it is necessary to copy the text onto a normal layer stacked above the Mask layer as follows:

To keep the text copy aligned with the text mask, use Copy (Ctrl+C or z+C) and Paste in Place (Shift+Ctrl+V or Shift+z+V) to place a copy of the text into the normal layer exactly on top of the mask text. After you have copied the text in the Mask layer, lock both the Mask layer and the masked layer to protect them while you are working on the normal layer.
The solid copied text completely obscures the masked image below, but using the new Flash 8 Filters, you can apply a Filter and use the Knockout option to drop out the fill of the text characters so that the masked content on the other layers will be visible.
Select the copied text, then click the Filters tab in the Property inspector and use the drop-down menu to select the Drop Shadow Filter. The settings that you applied, including the Knockout option, are shown in Figure 13-18. You can adjust the intensity and color of the shadow and the position of the copied (Knocked out) text until you like the end result.

Figure 13-18: Apply a Drop Shadow Filter with the Knockout option to the copy of your text to add more visual definition to the letter shapes.

Tip

The Glow Filter will work to define the text too, as long as you apply the Knockout option.

Cross-Reference

We cover the various Flash 8 Filters in more detail in Chapter 12, "Applying Filters and Effects."