I recently had a request for a tutorial on how to apply masks using ActionScript 3.0. If you've ever tried doing this with AS 3, then you've probably discovered that it doesn't work the same as it did in AS 2.

So, for those of you who have never used masks, or for those who have never used ActionScript to create masks, let's start with the basics.

First of all, what is a mask? Simply stated, a mask is a shape that is used to reveal portions of another asset on the stage. When a shape is applied as a mask to a Movie Clip, for example, the only portion of that Movie Clip that remains visible is the portion of the Movie Clip that is touching the mask.

If you want to apply a mask to an object without using ActionScript, the shape that will serve as the mask needs to be situated in a layer directly above the layer that contains the object being masked, and then the layer with the mask on it is simply converted to a mask layer by right-clicking on it and clicking on "Mask."

However, in ActionScript, it works a little differently. In ActionScript, it doesn't really matter what layers your objects are in. Even if your mask shape is in the same layer as the object to be masked, the aforementioned mask can still be applied.

For this tutorial, we're going to create a spotlight mask effect. We're basically going to create a circle that follows the mouse cursor around on the stage, and this circle is going to be applied as a mask to an image that we're going to store as a Movie Clip Symbol.

1. Import the Image. Cmd+R (or Ctrl+R for the PC) will import an object to the stage. Choose any image you'd like. The picture I'll be using is an image of my late English Bulldog, Bane.

2. Convert the Image to a Movie Clip Symbol and give it an Instance Name. For this tutorial, I'll give the Movie Clip an instance name of "bane_mc".

bane_mc

3. Create your mask shape. As I mentioned before, this shape can be in the same layer as your image, but it will be easier to see and manage if you put it in a new layer above the image layer. For this tutorial, I'm going to create a simple circle with edges that fade to transparent. I'll do this by applying a radial gradient that fades from solid green in the center to transparent green on the edges. Here's what my gradient settings look like:

gradient settings

Notice that the right handle of the gradient (which represents the outer color of the radial gradient) is actually set to the same color as the left (inner) handle, but the "Alpha" is simply dragged down to 0%, making it transparent around the edges. Also notice that the left handle has been dragged over so that it's close to the right handle. This will result in a solid center with only the very edges fading out to transparency.

It's important to point out at this point, in case you don't already know, that the ONLY way to create a gradient mask with different levels of transparency is to apply the mask using ActionScript. If you try to apply the mask using layers, it will simply show up as a solid circle.

Note: Keep in mind that the color of your mask does not matter. It will never actually be seen anyways!

Here's the shape I drew for the mask:

mask shape

4. Convert the oval to a Movie Clip Symbol and give it an instance name. When you convert it, make sure you put the registration point in the center of the shape, as shown here (simply click in the center square to make this change):

convert to symbol dialog

The reason we want the registration point centered is because we're going to tie this movie clip to the location of the mouse cursor, and we want to tie the CENTER of the movie clip to the cursor, NOT the top left corner of the movie clip.

For this example, I'm going to give our mask movie clip an instance name of "mask_mc."

5. Tie the "mask_mc" movie to the location of the cursor. This is not something we're just going to do once. We need to make sure that the mask movie clip is ALWAYS tied to the location of the cursor, so we're going to create an ENTER_FRAME event in ActionScript that will constantly be checking the location of the cursor and moving the mask movie clip to that location. So we need to create a new layer, name the new layer "Actions" or "A" or whatever you want, and then select frame 1 of the actions layer and hit Option+F9 (or just F9 on PC) to open up the Actions Panel for that frame. Here's the code that will tie the circle to the cursor:

code

Line 1 creates the ENTER_FRAME event that we discussed a moment ago. Since my Flash file is set to the default of 12 frames per second, this ENTER_FRAME event will trigger the "moveMask" function to run 12 times per second. So, 12 times per second, we're relocating the mask_mc movie clip to wherever the cursor is at that moment in time.

If you test your movie now, you should see a bright green circle following your mouse around on the stage.

6. Apply the circle as a mask to the image Movie Clip. In ActionScript 2.0, you would have done this using the following line of code:

mask_mc.mask(bane_mc);

(Remember, "bane_mc" is the instance name of the Movie Clip that contains our image.)

However, things are done a little bit differently in ActionScript 3.0. There is no longer a method of the Movie Clip class called "mask()". Rather, "mask" is now a property, and you can set this property equal to another Movie Clip. In order for this to work properly, we need to apply this property to the object that is being masked, and we'll set the property equal to the instance name of the Movie Clip that will serve as the mask. In other words, you simply need to add the following code to your Actions:

bane_mc.mask = mask_mc;

I added this code to the very top of my Actions, on line 1.

If you test your movie now, you'll find the effect we've been going for . . . except that something is missing. What about the fuzzy edges we put around the circle? What about the transparency?

Well, Flash will only recognize this transparency if we tell it to cache the mask and image Movie Clips as bitmaps. And how do we do this? Simple:

code

After adding lines 2 and 3 to our Actions, we come away with our final result:

Here is the FLA file for your reference: as_mask.zip

Click here for more comprehensive Flash video training