Mask Animation with ActionScript 3

//Hide the mouse
Mouse.hide();
 
//maskContainer holds all the masks
var maskContainer:Sprite = new Sprite();
 
//Set the maskContainer to be the original image's mask
origImage.mask = maskContainer;
 
//Create a new rectangle mask
var recMask:RectangleMask = new RectangleMask();
 
//Add recMask onto the maskContainer
maskContainer.addChild(recMask);
 
//Add the maskContainer onto the stage
addChild(maskContainer);
 
//Easing factore, used in animation
var easing:Number = 0.1;
 
//Create a timer that is called every 0.2 seconds
var timer:Timer = new Timer(200, 0);
timer.addEventListener(TimerEvent.TIMER, timerEvent);
timer.start();
 
//We need ENTER_FRAME for the animation
addEventListener(Event.ENTER_FRAME, onEnterFrame);
 
//This function is called in each frame
function onEnterFrame(event:Event):void {
        //Calculate the speed we want to move the rectangle
        var vx:Number = (mouseX - recMask.x) * easing;
        //Assign the new x position
        recMask.x += vx;
}
 
//This function is called every 0.2 seconds
function timerEvent(e:Event):void {
        //Create a new rectangle mask
        var rc:RectangleMask = new RectangleMask();
        //Assign it to the same position as our original mask
        rc.x = recMask.x;
        //Add it to the container
        maskContainer.addChild(rc);
        //ENTER_FRAME is used to animtate the scale of the mask
        rc.addEventListener(Event.ENTER_FRAME, scaleDown);
}
 
function scaleDown(e:Event):void {
        //Get the rectangle mask
        var rc:RectangleMask = (RectangleMask)(e.target);
        //Reduce scale
        rc.scaleX -= 0.05;
        //If the scale is below 0, we remove the rectangle mask
        //from the stage
        if(rc.scaleX < 0) {
                rc.removeEventListener(Event.ENTER_FRAME, scaleDown);
                maskContainer.removeChild(rc);
        }
}

Comments

1. Chuck says:

   November 5, 2009 at 6:35 pm

   I looked at your effect, its cool. However, I tried to do what you said and it did not work. I got an error, where you said to ignore it, however, I was not able to ignore it, because it would not complete the Movie Clip RectangleMask in the Movie Clip dialog box. Please advise asap.

   Log in to Reply
2. joumdane mohammed says:

   June 29, 2009 at 11:40 am

   i need something in this script for make mask to all the menu
   now i stell don’t understand why just last menu is mask
   i have var i change 0 to last number in the menu
   example: last menu is 9 so will mask just the menu number 9
   i need not just to mask menu number 9 i need to all the menu
   menu loanding from xml and i have the script for linkage
   i tray so much for finish the problem but ….
   this is script:

   this.attachMovie(“menubtn”, “menubtn”+i, i);
   this["menubtn"+i]._y = this["menubtn"+i]._width*j/35;
   this["menubtn"+i]._x =410;
   trace( i);

   _root["menubtn"+(i)].setMask(_root.butonover);

   Log in to Reply
3. Daniel says:

   April 2, 2009 at 8:03 pm

   Hi friend a query, this tutorial, there are variables, if the mask so that accompanies the image can be automatically move through in future there will be more tutorials to download thanks

   Log in to Reply
4. Baron says:

   March 27, 2009 at 6:16 am

   Very nice design!!
   I’m trying to custom it with 4 pics and an automatic mask.

   Talk ti you later!

   Log in to Reply
5. Ajay says:

   March 9, 2009 at 9:35 am

   I got so many errors in this file why i got errors

   Log in to Reply
6. soulfultim says:

   February 25, 2009 at 3:26 am

   Awesome tut

   Log in to Reply