Creating A Gradient Mask In Flash CS4

Gradient masks are the key to smooth shadows. You still need to use code to get an animated gradient mask to work properly in CS4 – but that is no oversight. This is caused by the fact that the movie clip property, cacheAsBitmap is removed the instant the movie clipmoves.

You can either download the completed example , or start from scratch. Its up to you.

Prerequisites :
The sample file provided is from Flash CS4 3D Tutorial Part I. You may want to start that tutorial prior to this one, but it is not necessary if you are just here for the gradient mask.


Creating A Gradient Mask in Flash CS4
1. Open the sample file provided.
2. In the Library Panel, double click on the Item movie clip so that you are inside the clip and on its time line.
3. Create two new layers, making sure both layers are beneath the logo layer.
2. Name the new layers mask and shadow respectively from top to bottom.
3. Copy the logo movie clip and paste it onto the shadow layer. Name it shadow in the properties window.
4. Select Modify>Transform>Flip Vertical. Position the shadow movie clip accordingly.
5. In the properties window, pull down the color effect tab and pop the menu to Alpha. Drag the slider down to 8% or type in 8% in the window.
6. In the properties window, pull down the effects to blur and set the blur to 10px x 10px quality low.
7. Lock the logo and shadow layers by clicking on the lock icon next to the layer name.
8. Select the rectangle tool from the tool menu and create a rectangular shape on the mask layer that covers the top part of the shadow to about the middle. Fill the shape with a gradient from black to white covering the top of the shadowmovie clip. If you need to rotate the blend because it is left-to-right by default then you do that by clicking on the transformation tool and holding it down until you get the blend transformation tool. Once that tool is selected you can rotate your blend accordingly.
9. Edit the Alpha property of the white in your blend to 0% and make the black at about 90% opacity. This is done in the Color Palette.
10. Hit F8 and name the movie clip mask.
11. Click on the movie clip named mask on the stage and name it themask in the properties window.
12. Right click (or control click on mac) on the mask layer, and activate mask so that the shadow is masked by the mask. The blend in the mask may not masking correctly and instead of a smooth mask you may have an abrupt line where the blend ends. We’ll fix that next.

Fixing the drop shadow.
Creating a mask with colors that have alpha properties less than 100 can not always produce the desired effect. Sometimes the blend in the mask seems to cut off the object it is masking abruptly. This is caused because as soon as a movie clip moves, it no longer is cached as bitmap.

So, we’ll have to fix the problem of the hard edge on our blended mask with Actionscript 3.

    1. Go to frame 1 and double click on Item opening it up so you see the layers we created earlier.
    2. create a new layer and name it AS3. Lock the layer. Select the first frame.
    3. Open the Actions panel (opt-F9) and type the following lines of code.
  1. maskedobject.mask = themask;
  2. maskedobject.cacheAsBitmap = true;
  3. themask.cacheAsBitmap = true;
    4. Back to the time line, right click on the mask layer and make sure it is no longer set to mask. There should appear to be no masking on the stage.
    5. Preview your movie and you should have a nice mask with a faded bottom, actually working.
Posted on April 23, 2010 at 12:07 pm by Runtime · Permalink
In: ActionScript 3, CS4, Flash, design · Tagged with: , , ,

Leave a Reply

You must be logged in to post a comment.