Masking Animations Flash

When animating with Flash, a mask can be used either to hide or to reveal elements, with the added complication of movement. As with static masks, an animated mask effect is created by integrating a Mask layer with one or more Masked layers. The Mask and the masked content can be moved at varied rates or in different directions the possibilities are endless.

Some obvious possibilities for masked animations include: spotlights, moonbeams, text that is progressively revealed, a view through a periscope (or binoculars), simulated x-ray vision, navigational devices, and many more. Aside from your imagination, the only limitations upon animated masks are that motion paths cannot be used to animate a mask, and that layers within buttons cannot be masked.

Animated mask text
Here’s how to create one of the simplest forms of animated mask:

  1. To begin with, we need to make the content that will be visible on its own layer beneath the mask and the mask content. For this example, we mask some text so that it appears to be spot lit. The text we use is MMF5. Create this text on frame 1 and make it big and bold! See below.
  2. This example of animated mask text is among the simplest uses for animated masks.

    Animated mask text

  3. Name this layer MMF5 reveal. Then give it about 55 frames, by clicking frame 55 and then hitting the F5 key, to insert a frame.
  4. Add another layer above MMF5 reveal, and name it MMF5 mask. Make sure that visibility is turned on. Then return to the first layer that you created, MMF5 reveal, and click in the middle of the frame span in order to select all 55 frames.
  5. Next, press the Alt/Option key and drag this span of frames up over the MMF5 mask (which is the second layer that you created) to copy the span of frames.
  6. ow you’re ready to make your masked content, which will be the spotlight. As with static masks, this is called the Masked layer. But first, turn off the visibility for the MMF5 Mask layer.
  7. Add a new layer between the two previous layers, and name it Spot. Then, with frame 1 selected, use Insert➪New Symbol to create a symbol. For this exercise, any behavior and name is fine.
  8. Next, use the Oval Tool to draw a red circle. Click the Scene 1 button to return to the Main Timeline. Open the Library (Window➪Library) and drag an instance of your symbol onto the Stage. This red circle should be as tall as the text, so adjust its size, if necessary. Position it off to the left, so that it is next to the first M, almost touching, as show below.
  9. Position the red circle to the left, so that it’s next to the first M, almost touching the M.

    Position the red circle to the left, so that it’s next to the first M, almost touching the M.

  10. Next, select frame 55 of the Spot layer and press F6 to add a keyframe there.
  11. Then select the Arrow Tool to reposition the red circle so that it is on the opposite side of the 5, almost touching the 5. If you use the arrow keys to move the item or press Shift to constrain the movement, you will be assured that the circle will animate in a smooth, straight line.
  12. Now click anywhere in the middle of the Spot frame span, and then proceed to the Frame Panel and choose Motion from the Tweening drop-down.
  13. Now, return to MMF5 Mask layer, and then right-click/Control+click the layer name and choose Mask (as the layer type) from the ensuing contextual menu. The icons of both this layer and the Spot layer beneath it should update to indicate that they are the Mask and Masked layers, respectively. Both layers should automatically lock.
  14. Save your work, and then use Control➪Test Movie to preview your work. It should appear as though the Black MMF5 text is being lit by a red spot that moves from left to right.

Now you’ve probably succeeded with this example, but you might still be wondering how this animated mask text works. Well, here’s an explanation. The first layer that you created, MMF5 reveal, which is at the bottom of the layer stack, is a simple static text layer it just sits there showing text. The layer just above MMF5 reveal, which is named Spot, is a simple Motion Tween the red circle moves from the left of the Stage to the right. Nothing fancy about this, either.

The uppermost layer, MMF5 mask, is the Mask layer, and it’s responsible for the effect that you see. As a mask, this layer defines which portions of the Masked layer which is Spot will be seen. As Spot moves across the text beneath it, the text forms above Spot define where Spot will be seen: only within the shapes of letterforms. So, as Spot moves from left to right, it appears to be illuminating dimensional letterforms, and the “light” falls off the edges where there are no letters.

Masked moon phases
Here’s another way in which the phases of the moon might be animated with Flash: by using an animated mask. This is a little more complex because it involves the use of an inverse shape to obtain the desired effect. Consequently, it’s a lot less intuitive than the previous example. We strongly urge you to study the sample file on the CD-ROM until you understand why this works.

Figure below shows the setup for a masked animation of the phases of the moon. The background is black. Shown here are the Masked layer (A), the mask (B), the mask over the Masked layer but with the layers unlocked and masking consequently disabled (C), and finally, the composite effect with the mask enabled and at frame 30 (D).

Here’s the explanation. As shown below, the Mask layer begins in perfect alignment with the masked shape of the full moon which is the white circle shown in (A). Because the Mask layer is the inverse of the moon, it covers none of that shape and, consequently, the moon is not revealed. As the mask is moved to the right, a sliver of the mask covers the moon and causes it to be revealed. This continues until the moon is fully masked and, thus, fully revealed. Then the mask is reversed and the moon continues through the other half of its cycle.

The setup for a masked animation of the phases of the moon

The setup for a masked animation of the phases of the moon

Masked line progression
This is a relatively simple effect that’s simply repeated to create the effect of a line that appears progressively. Creating such an effect requires either a good bit of clarity before you set to work, or a willingness to tinker and tweak until all of the hiccups are smoothed out. When you decipher this file, and its variations, located in the masking animations folder of the ch11 folder on the CD-ROM, take care to notice how the entire effect was built with multiple instances derived from two symbols.

The animation shown below begins with a blank white screen. Starting at the upper-right corner, the first mask moves onscreen from right to left and progressively reveals the hatched line. The effect continues around the screen, until the complete line has been revealed.

This effect is accomplished by creating a stack of four pairs of mask and outline. The first pair is revealed above the others this mask is Mask 1, together with Outline 1. The only part of Outline 1 that will be revealed is this upper portion.

Next, beginning at frame 25, the left-side portion of Outline 2 is progressively revealed as Mask 2 slides down from the upper offscreen area. Following this, at frame 50, Mask 3 progressively reveals the bottom portion of Outline 3. Finally, the right side of Outline 4 is revealed. Each of these reveals is accomplished with a simple linear Motion Tween.

Progressively revealing a hatched line

Progressively revealing a hatched line

Final notes about animated masks
If you find that these masked animations are a little hard to grasp, don’t panic. For most people, the logic of animated masks is slightly inverted. That’s because

  • The mask goes above the item that is revealed by it.
  • Flash uses an opaque window to reveal items below.
  • Items that are not covered by the opaque window will not be visible when the mask is enabled by locking the Mask layer together with the Masked layer.
  • Sometimes mild confusion over the elementary aspects of animation, compounded with the nature of masks, can lead to trouble. If this happens to you, just be patient separate the animation from the masking. Then, when you’ve got them both working separately, combine them.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics