How to Create a Mask in Flash 8

Masks determine how much of an underlying image is visible

Using masks in Flash 8 allows you to create eye-catching designs and animations. Masks are easy to implement in the Flash 8 authoring environment, so you can achieve impressive effects without having to learn complicated skills and techniques. Animated Flash files are particularly enhanced by the use of masks, and they allow you to make the most of the layers in your Flash content.

Difficulty:

Easy

Instructions

1. Open the Flash 8 authoring environment and create a new Flash document. Save your file in an appropriate location and give it a suitable name. Choose whatever dimensions you like for the document by selecting Modify then Document or clicking Size on the Properties panel if you have it open.

2. Draw a shape to mask. In the panel running along the top section of Flash 8 you'll see the Timeline and the Layers for your document. To draw a shape on Layer 1, select a drawing tool, for example the brush tool, by clicking on it on the Tools panel. Choose colors for your shape by clicking on the stroke and fill color sections, either on the Tools panel or on the Properties panel. Click and drag on the white rectangular stage area in the center of your screen to create your shape.

3. Create your mask layer by clicking on the "insert layer" button on the Timeline panel (a white square with a + sign on it), or by choosing Insert then Timeline then Layer from the menu toolbar. The new layer should appear above the existing layer, and will automatically be named "Layer 2". You can change the layer names if you like by double-clicking where the name appears and typing your preferred name. Right-click on the new top layer and select Mask from the drop down menu, or select Modify then Timeline then Layer Properties and choose the Mask radio button. You will see that both layers now have mask symbols on them, the top one for the mask and the bottom one for the masked area, and that they are both now locked (the little padlock indicates this).

4. Unlock the mask (top) layer by clicking on its padlock. Create your mask shape using the drawing tools. Select a tool such as the circle, then click and drag on the stage area to draw the mask shape. Make the mask shape smaller than the shape you already drew underneath it, so that you can see the mask effect straight away. Lock the mask layer by clicking on the padlock again, or the padlock on the top layer of the Timeline, which locks all layers. You'll see that only the part of the masked (bottom) shape that appears under the mask is now visible.

5. Add animation to your movie by extending the length of time that it will run. Click on frame number 10 on each layer of the Timeline and press F6 or choose Insert then Timeline then Keyframe from the menu. Hide the top mask layer by clicking on it under the eye icon so that a red cross appears. With the Playhead (the red square with a vertical line pointing downwards) on frame 10 where you created a Keyframe, unlock the bottom layer of your file with the original shape on it. Select and move the shape to a position outside the white stage area. Click on the first frame of this layer and insert a shape tween by choosing Shape from the Tween drop down list on the Properties panel. The layer frames should turn green and have an arrow on them. Test your movie by pressing Control+Enter or selecting Control then Test Movie. You should see your shape moving out of view and remaining visible only through the mask.

Tips & Warnings

• Experiment with alpha transparency masks by using MovieClip symbols as your mask and masked objects, and setting them to cache as bitmaps using ActionScript code.

• Add interactivity to your mask objects by making them capable of being dragged using ActionScript.

References

• Adobe: Macromedia Flash: Creating masks

Resources

• Kirupa: Creating Masks
• Flash Kit