Applying Masks Using AS3

By Riyadh Al Balushi (Blue_Chi) | Flash CS4 | ActionScript 3.0 | Beginner

A mask is an object that limits the visibility of an object to the shape of the mask applied to it. This tutorial will teach you the basics on how to apply masks dynamically using ActionScript 3 along with a number of tricks related to masking.

This is a beginner tutorial that does not require any advanced skills. However, applying some of the advanced tricks mentioned below will require knowledge of event handling and using the Tween Class.

This is an AS3 tutorial. To learn about Masking in ActionScript 2.0 please review our tutorial on that topic.

 

Applying a mask allows the creation of a number of visual tricks similar to the one shown in the movie below.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

What is a Mask?

A mask is an object that limits the visibility of another object to the shape of the mask.

AS3 Mask Example

A mask could be applied in Flash without the involvement of ActionScript by using Timeline layers. This tutorial will not cover this topic (it is relatively easy, just right-click a layer to do it) and will only explain how to apply a mask using ActionScript.

Basic ActionScript Masking

In ActionScript 3.0, any object that can be added to the Display List can be masked. This includes obvious onjrvyd such as MovieClips and Sprites, but also other simpler objects like TextFields.

In order to apply a mask to an object you simply use the mask property in the format shown below where my_object is a reference to the object to be masked, and my_mask is a reference to the mask itself.

my_object.mask = my_mask;

To disable a mask of an object you simply set the value of mask to null:

my_object.mask = null;

Disabling a mask will not delete the mask object, but will show it as it originally was - a separate object visible on its own.

Practical Example

We will create an example in which we will mask a picture using a shape we draw in Flash.

Start up Flash and create a new AS3 File. Go through File>Import>Import to Stage and import any image you have to this movie.

AS3 Masking - Import Image

Once you have your image imported you will have to convert it to a Symbol in order to be able to manipulate it via ActionScript. To do this select the image and the press F8 to convert it to a MovieClip Symbol. The name of the symbol does not matter. Once you do that you will have to set the instance name of the MovieClip to my_mc using the Properties Inspector. An instance name used to refer to the an object using ActionScript.

AS3 Masking - Instance Name

The object to be masked is now ready, we will move on to the actual mask. We can draw the mask on the same layer as our image, but that could be hard to do because Flash always puts Symbols above basic shapes, so it will be easier for us to use a new layer and put our mask there if we want to see what we are doing. So start off by creating a new layer by clicking on the New Layer button on the Timeline.

AS3 Mask - Add New Layer

In your new layer, use the Rectangle Tool tool to draw a box over your image. Select the whole body of the box and then press F8 to convert it to a MovieClip Symbol. The name of the symbol does not matter.

AS3 Masking - Create Mask Symbol

Finally, set the instance name of your mask to mask_mc using the Properties Inspector.

AS3 Masking - Instance Name

That should do it. We can now use ActionScript to make the image with the mask. Simply right-click one of your frames on the timelines and select Actions. That should open up the Actions Panel, in this panel simply type the following:

my_mc.mask = mask_mc;

That should do it. Test your movie now (Ctrl+Enter) to see your image masked.

Animating a Mask

Animating a dynamic mask is a pretty easy thing to do because the mask is a MovieClip which you can manipulate like any other object.

For example, we can use the Tween Class to move the mask from the left to the right of the screen this way:

import fl.transitions.Tween;
import fl.transitions.easing.*;


my_mc.mask = mask_mc;
var my_tween:Tween = new Tween(mask_mc,"x",Strong.easeOut,0,400,3, true);
This is the standard usage of the Tween Class. You can learn more about AS3 Tween Class by reviewing our tutorial on this topic.

You can test your movie to see your mask moving from the left to the right. You can apply any tween or animation effect on the mask the same way you would do that on any object and it shall work the same way.

Dragging a Mask

Creating a draggable mask is not a straight forward process, but still not very complicated. To drag any object you would usually have to register a MOUSE_DOWN and MOUSE_UP events with the object you wish to drag and then use the startDrag() and stopDrag() methods to do the trick. The issue with masks is that you cannot really register a Mouse Event for it, due to the fact that the mask is "consumed" when applied to an object.

Instead, what you have to do is register the Mouse Event with the object being masked, and use that event listener to start dragging the object:

my_mc.mask = mask_mc;

my_mc.buttonMode=true;
my_mc.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
my_mc.addEventListener(MouseEvent.MOUSE_UP, onUp);

function onDown(e:MouseEvent):void{
mask_mc.startDrag();
}

function onUp(e:MouseEvent):void{
mask_mc.stopDrag();
}
You can learn more about AS3 Event Handling and Buttons by reviewing our tutorial on this topic.

Testing this code should create an effect similar to the one shown below:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

This concludes our tutorial. I hope that you learnt something new. Feel free to post any questions or comments you have at the Republic of Code Forum.

- End of Tutorial