Simple Flash Blog

Gradient mask mean a mask that fades with the MovieClip masked, and not suddenly finished. For being more understandable see in the below how a gradient mask (the left circle) or a  non-gradient mask (the right circle) will look.

 Ok, how to do this? Just follow the next 6 steps:

1. Create a new flash document and set for it 300×300 dimensions. Create two more layers and rename them from top to bottom: actions, mask, background.

2. In the first frame of the background layer import a 300×300 picture you want to mask. Choose File >> Import >> Import to Stage (Ctrl+R). Select the picture and go to Modify >> Convert to Symbol (F8). In the Convert to Symbol window that appears choose MovieClip as Type, center for Registration point, put it the name bgMC and press OK button. While the picture is still selected go to the Properties panel and give it an instance name of bg_mc.

3. Select the Oval Tool (O) from the Tools panel, go to the Properties panel and choose none for Stroke color and white #FFFFFF for Fill color. Now go to the first frame of the mask layer and draw a circle (hold pressed the Shift key to draw a perfect circle). Click the circle to select it,go to the Properties panel and set W:300.0 and H:300.0. Then go to the Align panel and center the circle both horizontal and vertical.

4. Now let’s put it some gradient. Having the circle selected go to Color panel and choose the Color Mixer tab. Choose Radial as Type and #FFFFFF for the first color and #FFFFFF, Alpha 0% for the second color (see next pictures).

5. Now I will convert the circle into a MovieClip named maskMC(see step 2). While the circle is still selected go to the Properties panel and give it an instance name of mask_mc.

6. Now go to the first frame of the actions layer and open the Actions panel (F9). Put the following ActionScript code:

bg_mc.cacheAsBitmap=true;
mask_mc.cacheAsBitmap=true;
bg_mc.setMask(mask_mc);

What does this code? I will start with the end: the third line just sets mask_mc as mask for bg_mc.

The first two lines of ActionScript do the same thing: sets to true the cacheAsBitmap property of bg_mc and mask_mc movieclips. MovieClip.cacheAsBitmap property tells Flash Player to cache an internal bitmap representation of the MovieClip reffered is it is set to true.

That’s all!

This entry was posted on Wednesday, September 19th, 2007 at 7:46 am and is filed under ActionScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.