Creating a Feathered Mask

Creating a Feathered Mask

Flash CS4 ActionScript 3.0 Tutorial


How to Create a Mask with Soft Edges Using Flash ActionScript



Whenever you create a mask using a mask layer, the mask edges are sharp, not feathered. This method allows you to soft mask an object and reveal only specific portions of the original image.

Tutorial Elements

Add two png images of the same size to your Assets folder. The Assets folder should be in the same directory as your Main.fla file.

Name one image Photo.png and the second one Mask.png. To reveal areas of the Photo.png, fill the Mask.png with any color. To hide sections, make the mask transparent. Be sure to feather the edges between the opaque and transparent portions of the mask. The images are saved as png files because png supports transparancy.


Step One

Create two documents in Photoshop. One is your image and the second is the mask. Both images should be the same size at 72 ppi. The mask should be opaque in the areas you wish to see the image.

Step Two

Save images as Photo.png and Mask.png in your Project folder.

Step Three

Open a new Flash document and name the default layer Content.

Step Four

Choose File > Import > Import to Stage (Cmd/r (PC - Ctrl/r). Find your Photo.png and Mask.png images and choose Import (PC - Open).

Step Five

Drag the Mask.png beside the photo image. Click the mask and press F8 to convert it to a Movie Symbol.

Step Six

Click the Photo.png image and press F8 to convert it to a Movie Symbol.

Step Seven

Click the Photo symbol assign it an instance name of photo_mc in the Properties panel.

Step Eight

Click the Mask symbol assign it an instance name of mask_mc in the Properties panel.

Step Nine

Select both images and use the Align panel (Window > Align (Cmd/k (PC - Ctrl/k) to align them to the center of the stage.

Step Ten

Add a new layer at the top and name it Actions.

Step Eleven

Option double-click (PC - Alt double-click) frame one of the Actions layer.

Step Twelve

Copy/Paste the following code to the ActionScript panel.




Step Thirteen

Save your fla file in the project folder and name it Main.fla.

Step Fourteen

Publish your movie by pressing Cmd/Return (PC - Ctrl/Enter). The photo is masked using the soft edged mask file.

Dissecting the Code

The first line at Step Twelve tells the mask_mc symbol to mask the photo_mc symbol.

The next two lines instruct Flash to set the cacheAsBitmap parameter to true for both the images.

Position the Mask

To set the mask position, move the mask and/or image on the stage.


Stock Images