Creating opacity gradient mask in Flash 8

I’m a flash user since version MX, it is a very great tool to create interactive web contents. But there is one effect I want to achieve but couldn’t do in Flash: creating opacity mask. But thing had changed. Opacity mask can be done in Flash since version 8! Hopefully I am not too late to know this. Here I am going to tell you how to create opacity gradient mask with just few lines of codes in Flash.

To do this tutorial, you need Macromedia Flash 8 of course and a picture to mask. Before proceed, you can try to feel the opacity mask effect by dragging the masked image in the flash above, and starts the tutorial.

First, launch the Flash 8 program and create a new flash document. Then, import any picture you like to use and convert it to a movie clip symbol by pressing F8. Then giving this movie clip an instance name call “picture”. Now you can lock the layer and create a new layer on top.

Next, you need to create a opacity gradient mask to mask the picture. Select the Oval Tool and draw out a circle on top of the picture. Delete the stroke if exist and make the Solid Color Fill to Radial Gradient. Now you have to make an end point of the gradient transparent by dragging the Alpha level from 100% to 0%. The circle gradient now is from color and faded to transparent. Select this circle and convert it to movie clip and giving this the instance name “mask”.

Create another layer, and on the first frame, enter the code below:

// to set the mask
picture.setMask(mask);

// to make the opacity gradient mask draggable
mask.onPress = function() {
startDrag(”mask”);
};
mask.onRelease = function() {
stopDrag();
};

Now here is the magical part. To make the opacity mask works, you need to tick Use runtime bitmap caching for “picture” and “mask” instances shown below. It is just located at the bottom of Blend option.

After ticking for both instances, save this flash document and Ctrl+Enter to test this movie. Now you should have your opacity gradient mask working by just using simple Action Script! Hope this tutorial helps and here I upload my source file to download for your reference.

Download tutorial file (21KB)

• 10 simple ways to make glossy button
• Tutorial: Creating sleek gaming feel window
• Creating cool push button in Photoshop
• Who has the best Gradient Tool - Photoshop, Illustrator or Flash?
• Creating dotted tunnel in Illustrator