Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Use Alpha Gradient Masks in Flash 8, At Last! : Page 2

Finally! The newly released Flash 8 includes one feature that designers have wanted for years—the ability to use an alpha gradient as a mask.

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:


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.

Note: If you need additional information about scriptable masks, an example is included in the "Samples" folder that ships with Flash MX, Flash MX 2004, and, as of press time, Flash 8.

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.

Rich Shupe is president of FMA, a full-service multimedia development and training facility based in New York. He is a regular Flash columnist for DevX and coauthor of the upcoming "Flash 8: Projects for Learning Animation and Interactivity" and the upcoming "Learning ActionScript 3.0," (both published by O'Reilly). FMA develops web and disc-based products for clients including McGraw-Hill, Phillips, 20th Century Fox, and Nickelodeon, and trains digital media professionals in Flash, ActionScript, HTML, JavaScript, and more.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.