Cool Mask Effect with Blur

In this tutorial I will show you how the create the above masking 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 60x333 (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!