Creating Alpha Gradient Masks in Flash

The major use for a transparent mask in Flash is the alpha gradient. In the following examples, I'm going to show you how to create a gradient mask with either the Flash authoring tool or ActionScript.

Flash Authoring Tool
Start by placing two objects on the stage, one an alpha gradient you want to use as a mask and the object you want to be masked. It is necessary to convert both the mask and object being masked to movieclips so you can apply caching properties to them. Something we are not doing is creating a mask layer and a layer to be masked. A masked layer does not allow for bitmap caching, so we're going to have to do that using ActionScript. On the timeline, enter the following code:

 object.mask = mask_mc;

Now, set both the mask and the object to be cached as a bitmap at runtime. If you need to, open up your properties panel by clicking Windows => Properties => Properties. Now, click the "use runtime bitmap caching" box for both your mask and the item being masked.

That's it! Publish your movie and you will see your alpha gradient movieclip masked.

ActionScript
If you just want to use only ActionScript (this way is easier if you are dynamically placing objects onto the stage), you need to set both the alpha gradient mask and the mc being masked cacheAsBitmap property to "true." Using ActionScipt to set the caching is the same as checking "use runtime bitmap caching."

 mask_mc.cacheAsBitmap = true;
object.cacheAsBitmap = true;

And, just like above, apply your mask to your object.

 object.mask = mask_mc;

Why do we need to bother with the "cacheAsBitmap" property anyway?
When you set the "cacheAsBitap" property on a display object to "true," what you are doing is telling the Flash player to cache an internal representation of the vector object as a bitmap. Using bitmaps is much more efficient than using vector. When vector is rendered on the stage, the Flash player will render everything. So, if you have a movieclip with 10,000 vector objects stacked on top of each other, it will render each of those 10,000 objects even if objects are hidden behind other objects. When using bitmaps, you are only rendering what is visible on the stage. So you can see that when working with alpha and gradients, which are already heavy on your CPU, you want to render them as bitmaps.

Overall, bitmaps can increase performance significantly, especially if you are using complex objects, lots of animation, and/or high frame rates. Objects with these aspects require more from your processor because they are redrawn each frame. Higher frame rates mean quicker redrawing. Quicker redrawing of highly complex objects ... wel,l you get the idea. (Then, add that to slower machines, and your animation will slow down and become jerky).

Source files for the above example can be found here.