Problem You want to create an animated mask. Solution Use any of Flash's animation tools to animate the content in the mask layer, except a motion-guided tween. For motion-guided tween masks, make a movie clip within which the motion-guided tween resides, and use an instance of that movie clip on the mask layer. Discussion Nearly all of Flash's animation features can be applied to masks, including both motion and shape tweens, frame-by-frame animation, and ActionScript-based animation. One common animated mask effect is that of a spotlight. It is an easy effect to create and animate: Create the graphic of the background as it should appear with the spotlight off it. In a new layer, copy and paste the background in place (Edit  Paste in Place). This layer will contain the version of the background when shone in the spotlight. Create a layer above the existing two layers, and draw a circle in it. Set the top layer, with the circle in it, to a mask layer, and drag the second layer so that it comes under the influence of the new mask layer. If desired, lock all three layers to preview the effect. Where the circle appears, the background should be brighter. When you are finished, unlock the layers. Convert the circle mask to a movie clip symbol, and assign it an instance name of mSpotlightMask. Add a new layer to the timeline, select the first keyframe, and open the Actions panel. Add the following code to the Actions panel. mSpotlightMask.startDrag(true);
Flash is capable of more sophisticated animation than motion tweens, and you can take advantage of its advanced animation features when animating masks. For example, you can create a movie clip that contains a spinning shape, such as a square, and then motion-tween that movie clip instance on the main timeline as a mask. The result would be a nested animation mask, which would reveal the masked contents using complex motion. Attempting to apply motion guides to masks can present an issue that you'll need to work around. Motion-guided tweens require a special layer, which contains the motion path. Motion guide layers and mask layers cannot be used in conjunction with one another on the same timeline. You can work around this limitation by placing the motion-guide-tween inside a movie clip, and then placing an instance of that movie clip on the mask layer. The following steps outline a basic process for combining motion-guided tweens and masks: Create a layer, and place the artwork you want to mask within a keyframe on the layer. Make sure to give the layer a name that indicates what is contained on it. For example, if you place an instance of a bitmap of the Parthenon, you might label the layer Parthenon. Create a new layer above the layer from step 1. Give the layer a label that indicates that it will mask another layer as well as the contents it will be masking. For example, if the layer will be masking a layer with an image of the Parthenon, consider using a label of Parthenon Mask. Within the layer for the mask, draw the shape of the basic mask. Select the entire mask artwork and convert it to a movie clip symbol by pressing F8. Make sure that you select Movie Clip as the behavior and give it an appropriate symbol name. After you've clicked OK in the Convert to Symbol dialog box, the new symbol will be added to the library, the selected artwork on the stage will be converted to an instance of the symbol, and you will be returned to the timeline within which you had just been working. Double-click on the mask artwork symbol instance on that stage to open it in editing mode. Within the symbol's timeline, add a new layer named Motion Guide, and use any of the drawing tools that create lines to draw the motion guide path. Select the mask artwork and convert it to a movie clip symbol. Remember, because you're creating a motion guide, the artwork must be a symbol instance. When you've converted the artwork to a symbol you should have a movie clip nested within a movie clip. Complete the motion-guided tween appropriately. See Recipe 4.2 for more details. Return to the original timeline that contains the content you want to mask as well as the instance of the mask movie clip. In steps 1 and 2, you created two layers for the mask and masked content, with the layer with the mask being placed above the layer with the masked content. So you should be able to set the properties of the upper layer so that it's a mask layer, and the lower layer should automatically set its properties to be masked. For more information, see Recipe 6.8.
Flash allows you to do many things in various ways. For example, you can create a new symbol and draw the artwork within it rather than drawing the artwork and converting it to a symbol. Therefore, the preceding steps are intended as a guideline to assist you. When you're comfortable making motion-guided masks by following the steps, you can then adopt whatever workflow makes sense for you. See Also Recipe 3.17, Recipe 4.1, Recipe 4.12, Recipe 6.8 |
