Make your own free website on
Gradient mask

This page is for Flash MX. Although they can be done in Flash 5. But it is more handy to do it in MX.

Mask is considered a filled shape. We can not have mask itself to be "gradient"; There are two ways to mimic the gradient mask effect. One is Flash light mask, it can be applied as "gradient scratch type" mask effect. The other is "blend mask";

The first "scratch off" gradient mask: It uncover the underlying image that is covered by single color layer. For example, the example below is an image covered by black color. Now my gradient mask will "uncover" the black color.

In fact, I uncover a circle region and then cover it by a gradient alpha.

The second "blend" type mask is difficult to achieve. It is done by "soft the edge effect". But we can not "soft the mask shape".

Flash use multiple expand ring with decreasing alpha value to simulate a softening of edge.

OK, we make a shape, for example, a circle. Click "soften the edge", step by 4 and expand it 8 step, that is a gradient of 32 pixels. Zoom in that shape to 200 x or 400 x, we will see multiple ring with decreasing alpha value. Turn each ring and the central circle into separate movieClip symbol, and give them instance names.

Now, turn the second bitmap picture (masked picture) to movieClip symbol. Drag 8 pieces of this symbol as movieClip on to the stage and give them instancename. Becareful the layer depth arrangement. Now set alpha value with the top one higher alpha and then decreasing. It is masked clip that we change the alpha, not the alpha of the mask itself.

Now, for each movieClip make it setMask to one mask ring that we made before. Stack them together.

If you need manipulation by mouse, write script to move all mask simultaneously.

Below is an example. There are 8 copies of the masked picture in it. You can zoom that movie to see "multiple rings" with decrease alpha value.

download zip of these two fla