n last month’s article, I gave you an overview of some of Flash 8’s most exciting features. This month, I’ll show you how easy it is to achieve a long-desired effect?gradient masks.

Prior versions of Flash supported only 1-bit masks, meaning that only hard-edge masks were possible. In masks, pixels were considered either completely transparent or not transparent at all, with no gradations of opacity. Even if you used an alpha gradient in a mask, all non-transparent pixels would reveal the underlying content. In Flash 8, a new feature called “runtime bitmap caching” has changed all that.

Caching a MovieClip as a bitmap at runtime provides significant performance enhancements for complex MovieClips. It is less of a strain for your CPU to push pixels around the screen than to repeatedly recalculate the vector math and relevant properties (rotation, scale, alpha, etc.) that may be at work in your MovieClips.

Figure 1. Hard vs. Alpha Gradient Masks: On the left, you can see a mask created in Flash MX 2004, where only 1-bit masks are supported. On the right, an alpha gradient in Flash 8 has given the same mask a soft edge.

In addition, caching a MovieClip as a bitmap has other fun benefits. It allows a new level of compositing not possible in prior versions of Flash. In future articles, I will introduce you to runtime bitmap filters (drop shadow, glow, etc.), blend modes (akin to Photoshop blend modes or Director ink effects), and the new BitmapData class. The latter provides a variety of image manipulation methods, such as the ability to copy pixels from one image to another.

If you haven’t yet tried the new Flash 8 player, the old Flash mask seen in the left half of Figure 1, can become the feathered beauty you see in the right half of Figure 1. Hello soft wipes, and a host of other long-awaited effects! You’ll need the new Flash 8 player to view the animations that accompany this article.

A Simple Example
This month, I’m going to show you how these simple lines of script…

   maskee.cacheAsBitmap = true;   maskMC.cacheAsBitmap = true;

…can change the older Flash 1-bit solid mask shown on the left to the newer alpha gradient mask shown on the right.

Note that if you haven’t downloaded and installed the Flash 8 player, both Flash movies shown above will appear identical.

Using Scriptable Masks
To accomplish the alpha gradient feat, you must use scriptable masks. Gradients are still not supported in dedicated Mask layers. Scriptable masks, however, are easy to use and give you a lot more power than timeline masks. Scriptable masks have been possible since Flash MX, and this part of the process hasn’t changed. They let you assign another MovieClip (which I’ll refer to as “maskMC”) to serve as the mask that will affect your original MovieClip (which I’ll refer to as “maskee”).

For example, if you make a MovieClip out of a triangle and give it an instance name of “maskMC”, you can use that to mask another MovieClip called “maskee” with one simple line of ActionScript:

   maskee.setMask("maskMC");

Figure 2. Scriptable Mask Layers: The first layer of the file contains the first content. The second layer contains the content to be revealed, which is inside a MovieClip. The third layer contains a MovieClip that tweens an alpha gradient (descriptive representation in figure).

This will function similarly to a mask layer. It will show the “maskee” content only through the non-transparent pixels in the “maskMC” MovieClip. The advantage of using this method over a dedicated Mask layer is that you can easily manipulate the MovieClip and/or its contents and still reap the benefit of the mask. For example, you can put tweens into the “maskMC” MovieClip, just like you can in a dedicated Mask layer, but you can also dynamically manipulate the “maskMC” content using attachMovie, duplicateMovieClip, loadMovie, and similar approaches.

Figure 2 shows the composition of the sample files included with this article. Each case uses an alpha mask to transition from one photo to another. In Figure 2, the bottom layer contains the first image, and the second layer contains the second image, in the MovieClip called “maskee.” The third layer contains a gradient tween inside the MovieClip called “maskMC”.

Remember, so far, nothing has changed that requires Flash 8. Even though there is an alpha gradient used in the “maskMC” MovieClip, this file will still work in Flash MX and MX 2004, but the mask will render as a hard edge, using all non-transparent data as mask data.

Runtime Bitmap Caching
As soon as you enable runtime bitmap caching in Flash 8, however, the alpha data comes alive. You can activate this feature in the Properties panel, shown in Figure 3, or via ActionScript, using the cacheAsBitmap property.

Figure 3. Controlling Bitmap Caching: You can enable or disable bitmap caching via the Properties panel (note the “Use runtime bitmap caching” checkbox) for continuous use, or set the property programmatically using ActionScript.

Setting the property programmatically is very handy for dynamic situations. In these cases, because you need to composite the alpha data of the mask with the content being masked, you need to tell Flash 8 to cache both MovieClips as bitmaps. Combining this with the scriptable mask approach discussed previously results in this final code:

   maskee.cacheAsBitmap = true;   maskMC.cacheAsBitmap = true;   maskee.setMask("maskMC");

All that remains is for you to be creative with how you create your masks. Soft wipes immediately come to mind. But you can go further, too. For example, Figure 4 shows the effect of first creating a MovieClip container to serve as your mask, and then dynamically adding several gradient tweens at random locations. For example, the following is adapted from a file included in the downloadable source code that accompanies this article:

   if (i:Number < 20) {      obj:MovieClip = attachMovie("gradient_mask",             "mask_circle" + i,10 + i);      obj._x = Math.random()*Stage.width;      obj._y = Math.random()*Stage.height;      i++;   }

Figure 4. Creating Dynamic Transitions: By adding several tweened alpha gradients to a container mask, at random locations, you can create dynamic, almost organic, looking transitions.

You could also attach, duplicate, or load your mask content in a grid pattern, or control it with your mouse. For example, you could easily create a stylized scratch-and-win interface by duplicating mask content at your mouse position. Space limitations prevent me from going into detail for all of these applications, but I have included samples in an archive of bonus source code that is available from my Web site. I would be very interested in seeing anything you may come up with.

Next Month: Bitmap Filters
Next month, I'll show you how Flash 8's new runtime bitmap filters can add a new artistic dimension to your creations. Using this feature, you can add real drop shadows, glows, blurs, and similar effects?all of which are calculated at runtime. See you then.