In this tutorial we will learn how to make a simple but cool dynamic mask using AS3.

Move your mouse over the image!

Mask layer: A mask layer is a layer that is used to selectively obscure the masked layers beneath it.

Step 1: Create a new Flash movie with the ActionScript version set to 3.0. The background color, frame rate and the stage size do not matter for this tutorial.

Step 2: Create three new layers, so you will have four layers in total. Then name the one at the bottom BlurImage, the one on the top Image, the next one Mask, and the one on top Actions.

Step 3: Select the BlurImage layer and import the image you wish to use as your masked background by selecting File> Import> Import to Stage, or by using the Ctrl+R shortcut.

Step 4: Use the Select Tool (V) and select the image. Now Press F8 on your keyword to convert it to a symbol. Set the name of  the symbol to BG and the symbol type to Movie Clip.

Step 5: Use the Select Tool (V) and select the symbol. Access the Properties Inspector and in the Filters tab, create a new Blur Filter for your symbol. Set the Blur X and Blur Y to 15px, and the Blur Quality to Medium.

Step 6: Select the Image layer and drag BG symbol from the Library to the Stage.

Step 7: We need to set an Instance Name for our symbol so we can easily refer to it using ActionScript. Use the Select Tool (V) and select the symbol on the Mask layer, access the Properties Inspector and set MyImage as the instance name of this symbol.

Step 8: Now on the Mask layer, create your object for the mask on the stage. I have created a simple circle shape using the Oval Tool (O), but you can create whatever kind of shape you want. The color of the shape does not matter, as you will not be able to see the mask color.

Step 9: Use the Select Tool (V) and select your shape. Now Press F8 on your keyword to convert it to a symbol. Then access the Properties Inspector and set MyMask as the instance name of the symbol.

Step 10: Click once on the name of the Actions layer and then right-click the only frame on it and select Actions to open Actions panel.

Step 11: Copy and paste this code to your Actions panel. 

MyImage.mask=MyMask;

Mouse.hide();

MyImage.addEventListener(MouseEvent.MOUSE_MOVE, MoveTheMask);

function MoveTheMask(event:MouseEvent):void {
 MyMask.x=mouseX;
 MyMask.y=mouseY;
}

That’s it, We are done. You can now test your movie (Ctrl+Enter) and move your mouse to enjoy your mask .

Downloads:

Flash CS3: Dynamic Mask :: AS3

Flash CS4: Dynamic Mask :: AS3