How To Do Feathered Masks in Adobe Flash

Monday, November 19th, 2007

Categories: Adobe Flash

If you’re looking to do feathered (or smooth, anti-aliased, depending on your terminology) masks in Adobe Flash, and you are familiar with the program, you’ll notice that it’s not easy to do a mask without sharp edges. Using this technique, you can use images with transparencies (PNGs) or draw vectors in Flash to use as masks. I’ll be going over the latter in this example.

In this example, we have three items: our object, our mask (in this case, it was drawn in Flash) and our black background. (I put them side by side in the image)

Smooth Mask Flash

1 - Convert your mask and your object to Movie Clips. In this example, I used mask_mc and object_mc. Your library might look something like this:

Mask Movie Clips

2 - Place mask_mc and object_mc on your canvas and assign Instance Names identical to their Movie Clip Names. Get into the habit of naming your layers the same as your Movie Clip names. Your canvas should look like this:

Flash Canvas Un Masked

Note: If you’re a little newer to Flash, you can set your Instance Name by clicking on the Movie Clip on your canvas and filling in this section:

Instance Name

3 - Fill in the ActionScript. Create a layer called actions and type in the following ActionScript.

this.mask_mc.cacheAsBitmap=true;
this.object_mc.cacheAsBitmap=true;
object_mc.setMask(mask_mc);

4 - Play. If all worked out well, your result should look like this (notice the top and bottom are transparent, so you see the black background):

Anti-Aliased Mask

and your layers should look like this:

Layers of Masked Final Product in Flash

Notes

A few things to note:

These masks can be animated.
Image files (PNGs) can be used as the mask.
Feathered masks are relatively CPU heavy and really tend to bog down machines if they’re animated and/or transparent and/or large. Use this technique sparingly.
If you have any questions, post in the comments section

Hope that helps.