Animations and Interaction

Like motion guides, the masking process requires two linked layers. The top layer is the mask, and any indented layers directly below the Mask layer are the masked layers. In Flash, the mask reveals a "mask hole" to the masked layers. Using a single object on the mask layer, the shape of the object shows a portion of the masked layer in the form of the mask shape. For example, if the object on the mask layer is in the shape of a star, all that is viewed on the layer below is the star-shaped portion of the masked layer.

To create a mask layer, right-click the layer above the layer you plan to mask to open a context menu. Select the Mask option in the context menu, and the selected layer and the layer below are transformed into a mask layer and masked layer, respectively. Place a single object on the mask layer and then lock both layers. With locked layers, the mask effect is invoked.

The best way to see how masks work is with an example. The following document is developed over several subsections so that all nuances of masking can be examined. Here are the steps to follow:

1. Open a new document and create two layers with the top one named Mask and the bottom one named Background.

2. In the Background layer, draw a scene to mask. In the example, the scene is composed of a river, a tree, and the surrounding earth.

3. Place the mouse pointer on the Mask layer and right-click to open the context menu (Control-click on the Mac). Select Mask, as shown in Figure 4.22.

4. Once the mask layer is complete, the appearance of both the mask and masked layers changes, as shown in Figure 4.23.

5. Lock the Background layer, and in the Mask layer draw a circle and convert it to a Graphic symbol. Place the object directly over some discernable object on the Stage, such as the top of the tree, as shown in Figure 4.24.

6. Lock both layers, and everything disappears except for the area on the Background layer covered by the mask, as shown in Figure 4.25. In the SWF file, this is the kind of effect you can expect.

7. Finally, you can animate the mask so that it moves around the Stage revealing different parts of the masked layer. The Graphic instance is animated by using a motion tween. Figure 4.26 shows the mask over the background halfway through a motion tween.

Figure 4.22 - Creating a mask layer.

Figure 4.23 - The mask and masked layers.

Figure 4.24 - The object on the Mask layer with layers unlocked.

Figure 4.25 - View of mask effect.

Figure 4.26 - Animated mask.

If you test the movie, the results are not very interesting. All you see is the different parts of the background as the mask moves across the Stage. More interesting effects are possible using a revealed text message or some other background or mask shape. However, even with the current document, we can make it more interesting, as explored in the next subsection.