Using Masks for Special Effects in Flash CS3

Many of the great Flash^R special effects that we see every day look very complicated but they are really created with a simple masking technique. What is a mask? Traditional artists use a masking medium to protect certain areas of a painting from the next layer of paint when it is applied. The areas covered by the masking medium do not have the new layer of paint applied and therefore, the first layer of the painting shows through these areas or openings.

Masking techniques in Flash work much the same way. When you apply a mask to an area of the stage, only the area covered by the mask will show through and the rest of the stage will not be seen. It will take on the document's background color. One example of this technique that is commonly seen is the spotlight effect where the entire stage is blank except for a small circle. As this circle moves over the stage, you can only see what is revealed by the circle. Let's try to create that effect in this tutorial.

Start a new Flash CS3 project.
You will need to start with a background layer in the Timeline. Rename Layer 1 to "Background". We will place an image on this layer so that we have something for the spotlight to illuminate. You might need to resize the stage to fit the dimensions of your image. Import your image to the Library (File, Import to Library) and then drag an instance of the image onto the stage.
Add a new layer to the Timeline and name it "Mask". Draw a circle on the left side of the stage with the Oval tool (Fill set to White, Stroke set to Null).
Right-click on the Mask layer in the Timeline and choose Mask from the menu. As you can see, when you do this, only the part of the stage that is covered by the circle is visible and the rest of the stage is now the white default background color.

Now let's animate the spotlight with a simple Motion Tween. We already have the circle in the beginning position for the animation. Now we need to move the circle to an end position for the Tween. Let's make the animation 20 frames in length.
Click on Frame 20 in the Timeline on the Mask layer and choose Insert Keyframe from the menu. Did the circle disappear? No, but the background layer did because we did not extend that layer to Frame 20. So, right-click on Frame 20 on the Background layer and choose Insert Frame from the menu. Now the background image is visible through the circle again.
Click on Frame 20 on the Mask layer and then use the Selection tool to drag the circle to another position on the stage. Wait! You can't move the circle. Why? When you created the Mask layer in the previous step, Flash automatically locked the Mask layer. We need to unlock the layer. Click on the Lock/Unlock icon to unlock the layer. As you can see, when you unlock the layer the background image becomes visible and the circle is solid white. Click on the circle and drag it to a second location at the right side of the stage. This will be the end position for the Tween animation. Right-click on any frame between 1 and 20 and choose Create Motion Tween from the menu.
Click Control, Test Movie to test your spotlight animation.