Cool Mask Animation with Actionscript 3
February 6, 2009 by: smonteIn 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”.
6. Apply blur filter to the “Blurred image” movie clip.
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”.
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.
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.
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!
Awesome tut