Masks

Making a mask

A mask can be used when you want to show only part of the content in a layer, or group of layers. To make a mask, do these things:

1. Add a layer above the content you want to mask. If there are multiple layers with content to be masked, add the new layer above the top one.
2. Convert the new layer to a mask layer by right-clicking on the layer name and choosing Mask. This will cause both the mask layer and the layer under it to be locked. Unlock the mask layer to put content in it. If there are muliple layers to be masked, drag each one up under the mask.
3. Using a fill color that stands out over your content (it won't show in the final movie), draw the shape in the mask layer that you want to act as a window for the layer or layers below the mask. The shape of the mask determines what will show through from underlying layers (the opposite of a physical mask).
4. To see how the final masked content will appear, lock both the mask layer and its underlying content layer(s).

Here's are two views of what the stage looks like with a jpg imported into the pink_flower layer and mask in the layer above that consists of a solid rectangle plus some text. One view (with layers unlocked) shows the photo and the mask above it; the other (with both layers locked) shows what the published swf will look like.

These are the steps to create that:

• Import the photo (flowerpink.jpg) to a layer called photo.
• Add a layer above the layer with the photo and call it mask. Right-click that layer and check Mask.
• Unlock both layers. Choose a bright green (or other color -- it won't show in the published movie) fill. In the mask layer, choose the text tool and type "flowers". Use the properties panel to make sure it's static text and set it to a big font.
• Select the text with the select tool and choose Modify, Break Apart twice -- once to break the text into individual letters and again to turn those letters into native Flash shapes.
• Under the text, draw a rectangle.
• Lock both layers to see the final masked result. Unlock if further edits are needed.

Mask over motion-tweened content

The example above is of a static mask over a static shape, but both the mask and the content in the layer below it can also contain moving parts (tweens, keyframe animation). Here is an example of the photo transitions shown on the more motion tweens page with the same mask as above in a layer above them (all layers of the photo transition movie were dragged under the mask):

Shape-tweened mask over motion-tweened content

And here is a rather garish example in which the photos are motion-tweened as before, and the mask layer has also been tweened (in this case, shape-tweened). Open maskflowers3.fla to see how the shape-tweening is implemented.

Keyframe mask for handwriting

Masks can also be used for handwriting or drawing effects, where an outline or shape on stage is to be progressively revealed. To make the handwriting sample below, I followed the following steps:

• Opened a new movie, 300 x 150, 20 fps, white background
• Used a handwriting font with the text tool to create the hello! in a layer
• Added a layer above it, right-clicked and checked Mask. Unlocked both layers.
• Extended the timeline to about 100 frames.
• Chose the paintbrush tool, round, big enough brush to easily cover the stroke
• In the mask layer, in frame 1, drew over a bit of the start of the handwriting (see below)
• Hit f6 (to add a keyframe in the mask layer)
• Drew over a bit more of the handwriting
• Repeated the last two steps --f6, draw, f6, draw-- til the whole piece of handwriting was covered (changing the paintbrush width whenever necessary

Below is what the timeline looks like after 4 steps of "F6, draw". Bigger strokes can be used in each keyframe if detail is not important. But check along the way to make sure the uncovering looks right; any mistakes made along the way will be carried through in every keyframe to the end of the animation and are hard to fix after the fact: