How to create a gradient mask in Flash 8
Gradient masks are an every-day designer trick to gradually fade the opacity of an object. Just about every bitmap software application (notably Photoshop) has offered them for years, but Flash has never supported them. Designers have traditionally worked around Flash's limitation by importing semi-transparent PNGs or by fudging the effect with layered semi-transparent shapes, but true semi-transparent masks in Flash have never been a possibility. That is until now with Flash 8.
Before I start, a small caveat. Semi-transparent masks require you to use ActionScript, which as far as I've been able to tell (someone correct me if I'm wrong) is the only way to create the effect. There simply isn't a UI utility to do this through point and click.
So with that, first create the movie clip you want to mask and give it an instance name of "clip." Then, create a new timeline layer above the clip. Select the empty frame, and using the vector drawing tools create a gradient shape with both edges being black, but set the "Alpha" value of one end to 0. You should now have a gradient shape that starts as solid black at one end, completely invisible at the other, and smooth steps of gray in-between. With the shape selected, create a movie clip and give it an instance name of "mask."
Next, create a new timeline layer, and select the first empty frame. Open the Actions panel and type the following:
clip.cacheAsBitmap=true;
mask.cacheAsBitmap=true;
clip.setMask("mask");
For those who haven't used Flash 8 yet, the first two lines are likely foreign to you. cacheAsBitmap is a new option in Flash 8 that takes any shape and stores a bitmap representation of it, which enables gradient masks (and all the other new effects in Flash 8) to be used.
With that, the two movie clips are rendered as bitmaps, and then "mask" is assigned as a mask to "clip". Publish a Flash Player 8 movie and "clip" should now be gradually masked, revealing the Stage or anything underneath "clip" below.
This is a bare-bones example of what's possible with the new masking options, but it's a good starting point for all kinds of effects and animation tricks.
Comments
The effect still works if you don't have the line:
mask.cacheAsBitmap=true;
Maybe it does that automatically?
Posted by: Paul M at September 19, 2005 12:46 PM
Thanks, just a sidenote -- these effects are now being performed at runtime, on the world's varied machines -- there's a greater need for performance testing than when filtering & compositing was done during development, on your own workstation.
I'm expecting that some will go hog-wild on runtime graphic effects which look great on your box, but which may not play as well on that five-year-old Mac running Firefox... testing on representative target machines is the way to avoid problems from too many runtime demands.
More info:
http://www.kaourantin.net/2005/09/some-word-on-blend-modes-in-flash.html
Posted by: John Dowdell at September 19, 2005 7:47 PM
You don't need code to do gradient masks:
--create circle filled with a gradient going from 0% to 100% alpha (say
gray)
--convert to symbol, set blend to alpha or erase (do one then try the other
when you're done)
--create some artwork or import a photo...place it under the circle clip.
--select everything (the graphic and circle)...covert to movie clip.
--set that combined clip's blend to Layer
--put something underneath.
Posted by: Phillip Kerman at September 20, 2005 2:58 AM
Phillip is right, I hate to say.
Posted by: Alexander Casanova at September 21, 2005 2:28 PM
You don't need to make either of the items bitmaps... MacroMedia have a sample FLA you can download at
http://www.macromedia.com/support/documentation/en/flash/fl8/samples.html
under the heading "Alpha Masking".
Posted by: WhiteMonkey at October 15, 2005 10:38 PM
@WhiteMonkey: If you look closely at the sample from the Macromedia site, you'll notice that both objects (oval mask and flower image) have Use Runtime Bitmap Caching checked (in the Properties Panel). After playing around with the sample, I found out that you'll need at least the "Maskee" object cached as a bitmap, and that the masking should be done via ActionScript (and not via the Layer Properties) for the gradient mask effect to work.
Posted by: Brownspank at October 20, 2005 5:22 AM
I'm having no luck trying to mask an empty mc that gets clips dynamically attached to it. (gradient mask). it seems that .setMask isn't working when I enable "use runtime bitmap caching" anyone have any suggestions? I don't set the mask until after the dyn clips are added....
Posted by: Nate Pegman at November 4, 2005 10:39 AM
