Adobe
Sign in My orders My Adobe

by Adobe

Adobe Flash Professional

Content

Modified

8 August 2011

Page tools

ActionScript animation Flash Professional graphic effects

Prerequisite knowledge

This guide assumes you are familiar with the Flash Professional workspace and have a basic knowledge of working with FLA files and ActionScript.

User level

Intermediate

Required products

Sample files

A mask is a graphic that is used to crop the visual display of another graphic. You can use masks in Adobe Flash Professional CS5 to create animated special effects such as spotlights or transitions, or to crop the viewable area of an image.

Masks contain at least two parts: the graphic you want to mask and the graphic used to mask it. The graphic applied as a mask acts as a definition for an outline through which other content can be seen—similar to the way a window masks the view from outside. Similar to a window, a mask graphic appears invisible at runtime.

You can apply masks in two ways: using the Layers panel in Flash Professional or using a display object's mask property in ActionScript. If you use the Layers panel, you can use a single mask layer to affect multiple linked layers below it. If you use ActionScript, each display object requires its own mask.

Working with the Layers panel

Creating masks with the Layers panel is easy. Create two or more layers containing overlapping graphics and then activate the top layer as a mask using its Layer Properties. Layer Properties are available by right-clicking the layer or by choosing Modify > Timeline > Layer Properties (see Figure 1).

Figure 1. Layer Properties dialog box launched from the Modify menu.
Figure 1. Layer Properties dialog box launched from the Modify menu.

When a mask layer is activated, the icon next to the layer name changes to indicate that the mask is active and the layer below it indents to show that it's linked to the mask layer. The graphics on the mask layer become invisible and the graphics on the linked layer are visible only through the area defined by the mask layer's graphics.

The mask effect can be seen at author-time as long as both layers remain locked. Unlocking either layer turns off the effect, allowing you to edit the graphics. Additional layers can be linked to the mask layer while working in the Layers panel (see Figure 2).

Figure 2. Layers panel with two layers linked to a mask layer.
Figure 2. Layers panel with two layers linked to a mask layer.

For more information on using Layers panel to create a mask, see the Using mask layers section of the Flash Professional online help as well as the masks section of the Flash glossary.

Animated masks

You can animate graphics on mask layers as well as masks in ActionScript. In this case, the mask can move over the graphic being masked to reveal parts of that graphic. This is a common approach for creating graphic effects such as spotlights, transitions, and text effects.

The following sample shows how to use a Classic text field to create a text effect over the top of a rectangle containing a gradient fill. Text fields in Flash Professional cannot have gradient fills directly applied to them, so using this technique allows you to create the illusion of that effect. In addition, you can animate the mask graphic and the rectangle graphic to create the effect of text zooming into place while the gradient colors animate within the text shape.

To create a mask effect using a Classic text field:

  1. Create a new ActionScript 3 FLA file and save it as mask.fla.
  2. Rename Layer 1 to gradient.
  3. Draw a rectangle the size of the Stage area using the Rectangle tool. Assign a gradient fill to the rectangle using the Color panel. You can use any colors you like.
  4. Since you'll animate the rectangle, now is a good time to convert it to a symbol. Select the shape and convert it to a movie clip symbol (F8) named Gradient.
  5. Create a new layer above the gradient layer and name it mask.
  6. Select the Text tool and create a text field on the mask layer. Type the word GRADIENT in the field.
  7. With the text field selected, enter the following attributes in the Properties panel:
    • Text engine: Classic Text
    • Family: Arial
    • Style: Bold
    • Size: 110 pt
    • Letter spacing: –8.0
    • Anti-alias: Anti-alias for animation

Note: Be sure to select the Classic Text engine option. TLF Text cannot be used as a mask.

  1. Center the text field on the screen using the Align panel.
  2. Activate the mask by right-clicking the mask layer and selecting the Mask option. Notice that the layer icons change, the layers are locked, and the text appears to be filled with the gradient color (see Figure 3).
Figure 3. Gradient rectangle masked with a Classic text field.
Figure 3. Gradient rectangle masked with a Classic text field.
  1. Add movement to the effect by creating a tween on both the text field and the gradient rectangle. The resulting effect will show the text zoom into place and then fade away. Extend the Timeline to Frame 75 by selecting Frame 75 across both layers and pressing F5.
  2. Unlock the mask layer and gradient layer so that they are editable.
  3. Right-click the text field and choose the Create Motion Tween option.
  4. Move the current frame indicator to Frame 25 and then scale the text to a small size using the Free Transform tool. Use the Align panel to position the small text in the center of the screen.
  5. Since this animation shows the text zooming out instead of zooming in, you'll need to reverse the property keyframes. Right-click Frame 1 of the mask layer and choose the Reverse Keyframes option. Notice that the text zooms in from small to large now.
  6. To create the effect of the gradient fading out, click Frame 35 in the gradient layer and add a keyframe (F6).
  7. While Frame 35 is selected, right-click the gradient rectangle and choose Create Motion Tween.
  8. Move the current frame indicator to Frame 60, select the rectangle, and use the Color Effect menu in the Properties panel to turn the alpha setting to 0. The Timeline should look like Figure 4 at this point.
Figure 4. Timeline as it appears while editing the mask effect.
Figure 4. Timeline as it appears while editing the mask effect.
  1. Run the Test Movie (Control > Test Movie) command to see the animation play at runtime.
  2. Save the file.

You can animate the text field and the rectangle shape in any way that you like. Experiment with refining the animation using the Motion Editor and Properties panel.

Masks using ActionScript

Masks are easy to create in ActionScript. You can use a predefined image or the Drawing API to create a mask graphic that can be assigned to the mask property of any display object.

To create and apply a mask dynamically using ActionScript:

  1. Create a new ActionScript 3 FLA file and save it as spotlight.fla.
  2. Rename Layer 1 to actions.
  3. Select Frame 1 of the actions layer and open the Actions panel.
  4. Copy and paste the following code in the Script window of the Actions panel:
import flash.display.Sprite; import flash.display.Loader; import flash.events.Event; import flash.events.MouseEvent; import flash.net.URLRequest; // Create the mask graphic var maskCircle:Sprite = new Sprite(); maskCircle.graphics.beginFill(0x000000); maskCircle.graphics.drawEllipse(-50, -50, 100, 100); maskCircle.graphics.endFill(); maskCircle.visible = false; addChild(maskCircle); // Load image var pictLdr:Loader = new Loader(); var pictURL:String = "http://www.helpexamples.com/flash/images/image1.jpg"; var pictURLReq:URLRequest = new URLRequest(pictURL); pictLdr.load(pictURLReq); pictLdr.mask = maskCircle; // Applies the mask pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded); addChild(pictLdr); // Size the image to fill the Stage function imgLoaded(event:Event):void { pictLdr.width = stage.stageWidth; pictLdr.height = stage.stageHeight; } // Setup the mask to follow the cursor function mouseMove(event:MouseEvent):void { maskCircle.x = stage.mouseX; maskCircle.y = stage.mouseY; } stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
  1. Take a moment to review the code. Notice that the script creates a circle to use as a mask. The mask is applied to a Loader object, which is used to load an external image and cover the screen. A listener is added to the Stage to update the position of the mask whenever the user moves the cursor.
  2. Run the Test Movie (Control > Test Movie) command to see the effect at runtime. Move your cursor around the Stage to see the spotlight effect.
  3. Save the file.

You can use any shape you like for the mask, including an animated movie clip. Apply the mask to any named movie clip instance, whether it loads external content or the content exists in the Library.

Where to go from here

This section of the Graphic Effects Learning Guide provides an overview of using masks to create special effects. Spend some time experimenting with animated masks to create effects like spotlights, panning, and cropping.

See the following online resources for more information:

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

More Like This

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company

Choose your region

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy Policy and Cookies (Updated)

Reviewed by TRUSTe: site privacy statement