Cool Mask Animation with Actionscript 3

February 6, 2009 by: smonte

In this tutorial I will show you how the create a cool mask effect by using some simple Actionscript 3. You should already have the basic knowledge of Actionscript 3 so that you can follow the tutorial.

Setting up the environment

1. Download an image that you want to apply the masking effect.

2. Create a new Flash Actionscript 3 document. Use the same stage size as the image size.

3. Import the image to the library (File -> Import -> Import to Library).

4. Drag the image to the center of the stage.

5. Convert the image into a movie clip by hitting F8. Name it “Blurred image”.

Movie clip

6. Apply blur filter to the “Blurred image” movie clip.

Blur

7. Create a new layer. On the new layer, drag the image from the library to the center of the stage.

8. Convert the image into a movie clip named “Original image”.

Movie clip 2

9. Give the “Original image” an instance name of “origImage”.

10. Draw a rectangle (only fill color) that is taller than your image. You can select the width yourself. For example my rectanle is 60×333 (this rectangle will be our mask). It doesn’t matter to which layer you draw the rectangle onto.

11. Convert the rectangle into a movie clip named “Rectangle Mask”. Set the registration point to the top-center.

Rectangle MC

12. Remove the “Rectangle Mask” movie clip from the stage.

13. Linkage the “Rectangle Mask” movie clip to a class named “RectangleMask”. Don’t worry about the warning that appears.

Linkage

Moving into Actionscript 3

14. Create a new layer for actionscript and type the following.

//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);
        }
}

You are done, I hope you enjoyed this tutorial!

  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Comments

2 Responses to “Cool Mask Animation with Actionscript 3”
  1. Ajay says:

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

    Reply
  2. soulfultim says:

    Awesome tut

    Reply