Example 4 - Animating a Mask with EnterFrame

In this example we combine programmatic masking with animation using EnterFrame event. We use the same two versions of the the photo as in the previous example. Instead of dragging a mask, we draw in it dynamically a disk of varying radius. The drawing is triggered by EnterFrame event. The code below explains everything.

Download

The Code

/*
We imported two versions of a 350 by 263 jpeg photo from our recent PREP workshop at URI to the Stage, and turned them into MovieClips, darkClip and lightClip. We postioned them on the Stage at 55, 71, and gave them instance names mcDarkPic, mcLightPic. We create a new Sprite, lightSpot and add it to the Display List as a child of mcDarkPic. We position lightSpot in the center of our photos. Then, we are assingning lightSpot to be a mask for mcLightPic. Hence, the only visible portion of mcLightPic is going to be the portion visible through a circle that we will draw dynamically in lightSpot. Outside of the circle, we will see the background which is the dark image.
*/

var lightSpot:Sprite = new Sprite();

mcDarkPic.addChild(lightSpot);

lightSpot.x = 175;

lightSpot.y = 132;

mcLightPic.mask=lightSpot;

/*
We want mcDarkPic to respond to mouse events as mcLightPic or its portions will be often invisible. (Invisible objects do not respond to mouse events, that includs masks.) Since mcDarkPic is underneath mcLightPic, we use the next line to make sure that when the user mouses over the photos mcDarkPic will respond to the event.
*/

mcLightPic.mouseEnabled=false;

/*
We create two variables. The first will track if the mouse is over the photos or not. The second will store the current size of the disk in the mask lightSpot.
*/

 

var isOver:Boolean=false;

var spotSize:Number=0;

 

/*
The function that draws a disk of radius r in lightSpot. We will call it later, based on the status of the mouse and the current size of the disk.
*/

 

function drawSpot(r:Number):void {

lightSpot.graphics.clear();

lightSpot.graphics.lineStyle(1,0x000000);

lightSpot.graphics.beginFill(0x0000FF);

lightSpot.graphics.drawCircle(0,0,r);

lightSpot.graphics.endFill();

spotSize=r;

}

 

/*
We are assigning two listeners to mcDarkPic. The listeners set the value of the Boolean variable 'isOver' to 'true' if the user mouses over mcDarkPic, and to 'false' if the user mouses out.
*/

 

mcDarkPic.addEventListener(MouseEvent.ROLL_OVER, whenOver);

 

function whenOver(e:MouseEvent):void {

isOver=true;

}

 

mcDarkPic.addEventListener(MouseEvent.ROLL_OUT, whenOut);

 

function whenOut(e:MouseEvent):void {

isOver=false;

}

/*
We animate the mask using ENTER_FRAME event. The listener is attached to the Stage. Based on the value of 'isOver' and the current size of the disk, the listener dynamically draws a new disk in lightSpot creating the transition effect.
*/

 

stage.addEventListener(Event.ENTER_FRAME, whenEnterFrame);

 

function whenEnterFrame(e:Event):void {

var curSize:Number=spotSize;

if(isOver && curSize < 198){

drawSpot(curSize+3);

}

if(!isOver && curSize > 2){

drawSpot(curSize-3);

}

}

 

On the next page, we show an mathematical applet in which masking plays an important role.

Back to Intermediate Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.