Actionscript 3 Image Mask Animation


1. Make/download an image of size 500x300.

2. Create a new document (500x300).

3. Import your image into the library.

4. Drag that image to the stage (add it to the center of the stage).

5. Convert it into a movieclip.


Instance name


6. Give your movie clip an instance name.


Instance name


7. Now we are ready to make the boxes that reveal the picture. Draw a rectangle shape (can be on the same layer, position doesn’t matter). No borders!

8. Make the rectangle to size 40x40.

9. Convert the rectangle into a movie clip. Note the registration point!


Create a mask symbol


10. Remove the rectangle from the stage.

11. Linkage the rectangle to a class ”MaskRectangle”.


Linkage


Linkage warning

Don’t worry about the warning above .


12. Now we start to use actionscript. Via actionscript, we organize the mask boxes onto the image and then tween them to reveal the image.

13. Create an actions layer, type the following.

var boxWidth:Number = 40;
var boxHeight:Number = 40;

var rows:Number = 6;
var columns:Number = 10;

var boxes:Array = new Array();
var tweens:Array = new Array();
var container:Sprite = new Sprite();

addChild(container);

for (var i=0; i

Explanation: First, we declare some variables. We want 6 rows and 10 colums for this image to animate nice. We want to use a container, where we add the boxes (=MaskRectangle). This is done, because a movie clip can only have one mask (we can’t add the boxes separately onto the image to act as a mask). Eventually, we’ll mask the image with the container. In the for loop, we simply organize the boxes row by row. We push all the boxes into an array for later use.


14. Next we set up the mask and scale the boxes. Type the following. 

cityMC.mask = container;
for (var k=0; k< boxes.length; k++) {	
	boxes[k].scaleX = 0;
}

Explanation: We assign the container to be the image’s mask. Then we change the scaleX property, so the boxes will be invisible at the beginning of the animation.


15. Now for the animation part, type the following.

var timer = new Timer(35,boxes.length);
timer.addEventListener (TimerEvent.TIMER, animateMask);
timer.start ();

function animateMask (e:Event):void {
	var box = boxes[timer.currentCount-1];
	var myTween:Tween = new Tween(box, "scaleX", Bounce.easeOut, 0, 1, 1, true);
tweens.push(myTween);

}

Note: You must add the following import statements.

import fl.transitions.Tween;
import fl.transitions.easing.*;

Explanation: First we create a timer. Our delay is 35 milliseconds and we call the timer as many times as we have boxes. We add an event listener, which is called every 35 milliseconds. Then we start the timer. In the event handler, we check which box we should animate. Then, we apply a motion tween with bounce effect. We push the tweens into an array, so they won’t get garbage collected. That’s all!


16. Test your movie.

Remember, you are not restricted to just rectangles or bounce effect. You can also change the order of how you animate the boxes. Play with it. If you have any questions concerning the tutorials, please visit the forum.


Final code 

import fl.transitions.Tween;
import fl.transitions.easing.*;

var boxWidth:Number = 40;
var boxHeight:Number = 40;

var rows:Number = 6;
var columns:Number = 10;

var boxes:Array = new Array();
var tweens:Array = new Array();
var container:Sprite = new Sprite();

addChild(container);

for (var i=0; i< boxes.length; k++) {	
	boxes[k].scaleX = 0;
}

var timer = new Timer(35,boxes.length);
timer.addEventListener (TimerEvent.TIMER, animateMask);
timer.start ();

function animateMask (e:Event):void {
	var box = boxes[timer.currentCount-1];
	var myTween:Tween = new Tween(box, "scaleX", Bounce.easeOut, 0, 1, 1, true);
tweens.push(myTween);

}

Bookmark and Share