Adding a Feathered Mask

Adding a Feathered Mask

Flash CS4 Tutorial


How to Create a Soft Edged Mask in Flash



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. It does require a bit of ActionScript to make the magic happen.

For information on creating hard edge masks, see topic, Mask Layers.

Tutorial Elements

Add two png images of the same size to your Assets folder. Size the images to match your .fla file stage. 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.


Step One

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

Step Two

Place your Photo.png and Mask.png images in your Assets folder as outlined above.

Step Three

Choose File > Import > Import to Library. Find your Photo.png and Mask.png images and choose Import to Library (PC - Open) in the dialog box.

Step Four

Drag the Photo.png image to the stage from the Library. Click the image and press F8 to convert it to a Movie Symbol.

Step Five

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

Step Six

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

Step Seven

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

Step Eight

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

Step Nine

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

Step Ten

Copy/Paste the following code to the ActionScript panel.




Step Eleven

Save your fla file, name it Main.fla.

Step Twelve

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 Nine 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.

Feathered PNG Images

Another option for feathered static images is to soften the edges in Photoshop. Save your feathered edge image as a PNG file (with a transparent background). The feathered edge is retained in your Flash document.


Stock Photos from 123RF