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.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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
  • Facebook
  • Mixx
  • Google

Related tutorials:

  1. Image Mask Animation
  2. Random Mask Circles on Image
  3. Shooting Masks via ActionScript 3
  4. Image Mask Eraser
  5. Image Fill with ActionScript 3



Filed under: ActionScript 3 Advanced
Tags:

Comments

6 Responses to “Mask Animation with ActionScript 3”
  1. Chuck says:

    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.

  2. 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);

  3. Daniel says:

    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

  4. Baron says:

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

    Talk ti you later!

  5. Ajay says:

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

  6. soulfultim says:

    Awesome tut

Leave a Reply

You must be logged in to post a comment.