Creating Mask Layers in Flash

Flash Course

You can create Mask Layers to show and hide parts of your content in a Flash presentation.
A Mask works like a window blocking out everything but a certain area that you define. A mask controls the visible area in one ore more layers. Any shape, symbol or text object can be used as a mask.
The shape you place in a Mask Layer defines the area that will be visible in the "Masked Layers" below it.
You can also animate a Mask to create great effects in your Flash presentation.

- When creating a Mask Layer, it is important not to mix elements. For example, don't use an editable shape and a group on the same mask layer, keep it simple.

Creating Masks

For creating a masking effect, you first crate a Mask Layer in the Timeline. Then you must have one (or more) linked Layer below it (dedfined as Masked).
Any layer can be converted into a mask layer, by right-clicking on its name, then choose the Mask option.
With this method, the Layer below it will automatically be converted into a "Masked Layer", and both will be locked, as shown in the image below.


Here is another way to create a Mask Layer:
- Click on the name of a Layer to select it, then click Modify -> Timeline -> Layer Properties (or right-click and choose Properties). The Layer Properties window appears (shown in the picture below), click the Mask checkbox, and then click OK.

The layer is converted into Mask Layer, without to be locked. The Layer below remains as it is (unaffected). For this layer to be linked to the Mask Layer above, it must be defined as a Masked Layer.
Click the layer name of the layer directly beneath the mask layer, then click Modify -> Timeline -> Layer Properties (or right-click and choose Properties) to open the Properties window. In this window enable the Masked checkbox, and then click OK.
- A mask layer only affects the linked layers beneath it, and you can include as many Masked Layers you want, by dragging the layer beneath the Mask Layer.

In the next example we animate a Mask Layer to create a masking effect.

1. Open a new Flash document and import an image on the Stage (with File -> Import -> Import to Stage).
2. Add a new Layer in the Timeline (with click Insert -> Timeline -> Layer) and convert it in "Mask" (right-click on the layer name, choose Properties, then in the "Layer Properties" window enable the Mask checkbox, and click OK).
3. In this Mask Layer draw an oval (with the "Oval Tool") in the left side of the picture on the Stage. This oval will be the visible area.
4. Convert the oval into Movie Clip Symbol (from Modify -> Convert to Symbol, choose "Movie Clip" type, and click OK).
5. Right-click on Frame 40 in Layer 1, and choose Insert Keyframe.
   - With this, the Flash presentation will contain 40 Frames which display the picture.
6. Now we'll create the animation for the Movie Clip instance (the oval) in the Mask Layer.
   - We'll make the oval shape to move continuously from left to right, changing also its size.
   Select the Frame 40 in the Mask Layer (Layer 2), right-click on this frame and choose Insert Frame, then click Insert -> Motion Tween.
7. Right-click again on Frame 40 in Layer 2, and choose Insert Keyframe.
8. Select the Frame 20 in Layer 2, move the oval to the right side of the picture, and increase its size (with the "Free Transform tool").
   Click on Frame 40 (in Layer 2) and use the "Free Transform tool" to increase the size of the oval.
9. Right-click on the "Layer 1" name in the Timeline, and choose Properties. Then, in the "Layer Properties" window enable the Masked checkbox, and click OK.
   - The Layer 1 becomes a Masked Layer, linked to the Mask Layer above.
   Press Ctrl+Enter to view the result. Will appear a Flash presentation like this:

- In the presentation below you can watch the steps of this example.

Masking effect

- You can download the FLA file with this example from -> Masking effect.

You can use any filled shape as a mask. Flash ignores gradients and lines, it just deals with the fill area.
You can edit the Motion Tween used for Mask as any normal Motion Tween.
You can use any type of animation in the Mask Layer (frame-by-frame, Classic Tween, or Shape Tween).

An ideea for a Masking effect is to keep fixed the shape used for the visualisation area, and move the image in the Masked Layer.
Too much masking can affect performance in the Flash Player, especially when objects are animated.

- To convert a mask layer back to a normal layer, open the "Layer Properties" window and enable the Normal checkbox.
- To remove a mask layer entirely, select it and then click the Delete Layer icon.
- To remove a linked layer from a mask layer, select it, open the "Layer Properties" window and enable the Normal checkbox.

<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>

#id {
  visibility: hidden;
}

document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}

if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}