Return to Kroll Design home page

Flash Tutorials (with .FLA files included)

 
« Return

Soft-edged Mask

(no ActionScript used)

Typical masks in Flash have a hard edge. This tutorial shows you how to create a soft-edged mask.

Download the FLA file

(this example has no ActionScript)

1. Create the desired mask shape:

Create the shape as a movie clip, so that an instance of this shape can be blurred using a blur filter. In this example, I want the mask to be a rectangle with a circular hole, so that it looks like a telescope or lens being placed over the photograph. Make the rectangle larger than the stage, so that the mask can be animated left-right and up-down without the edge of the rectangle creeping inside the stage:


 

2. Apply the "blur" filter to the mask shape:

Create a movie clip with the desired photo or artwork to be masked in layer 1. In layer two place an instance of the mask shape that you created in step 1. Do NOT right click on the layer for the mask shape to assign it a layer type of mask. The masking effect will be achieved without designating the layer as a mask layer. Click on the shape, and add a blur filter:


 

3. Apply blend mode of "Erase" to the mask shape:

If desired, animate the mask to move it around the stage. Then give each keyframe of the mask shape a blend mode of "Erase". This will make the shape dissappear, and it won't look like it's working properly, but we're not done yet:


 

4. Place the combination mask / photo on the stage, and give if a blend mode of "Layer":

In this example, the name of the library item worked on in steps 2 and 3 is "mask and photo combined". Drag "mask and photo combined" from the library to the stage, to create an instance of this object on the stage. Give it a blend mode of "layer", and we now see (finally!) the soft-edged masking effect:


 

5. Give your movie the desired background image:

I chose as my background image a blurred copy of the masked photo, with a blend mode of "Hard Light" against a black background:


 

That's it! As you saw, the completed animation appears at the top of this page. Download the FLA file

Note: if you'd like to use the beach photograph used in this tutorial, please purchase a license for it from iStockPhoto.

 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 12/31/1969 7:00 PM