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
- Flash CS3 file as3_masking_4.fla
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.
