Create a Slick Image Revealer in Flash Using ActionScript 3

Mar 28th in Effects by Michael Chen

In this tutorial, we'll create an animated mask image revealer, which will involve movie clips, masks and ActionScript 3.

Author: Michael Chen

Michael Chen is a Flash Developer currently working in New Zealand. He has strong interests in Interactive Web Design and Animation.

Final Result Preview

Below is the final result we will be working towards.

Step 1 - Brief Overview

We'll be creating the above effect, but without the "click replay" feature. Here is an overview of what we'll do. There will be two layers. One will hold the actions and the other will contain the image. We'll also create an animated Movie Clip which will be added to a mask at run-time. The purpose of the animated Movie Clip is to reveal the image bit by bit.

I'm assuming you already have a basic understanding of Flash and ActionScript 3. However, I'll still try to keep each step as clear as possible.

Step 2

Create a new ActionScript 3 document. Set the Stage size to 600 x 420px and 24 FPS. I've chosen this size since the image I'll be using will fit nicely within these dimensions.

Step 3

Rename the first layer to "image" and then import the image. I've imported an image of a beach and center aligned it to the stage.

Step 4

Now select the image and convert it to a Movie Clip symbol. I've named it "beach", but it can really be anything. Make sure the registration point is at the top left corner.

Step 5

Give the new image Movie Clip an instance name of "imageToReveal_mc". Lock that layer since we won't change it anymore.

Note: I've ended the name with "_mc". This is handy if you want automatic code hinting while in the Actions panel.

Step 6

Let's do a bit of animation now. Create a new symbol and give it a name "circle animation". Select "Movie Clip" as the type.

Step 7

You should now be within the "circle animation" timeline. First rename the layer to "animation" and then create a 80 x 80px circle on the stage. Center align it.

Step 8

Select the circle and convert it into a symbol (F8). Name it "circle" and select "Graphic" as the type. Make sure the registration point is "center".

Step 9

Select the graphic circle and apply a simple motion tween. The duration will be 14 frames. Make sure the circle has a scale of 1% on frame 1 and 100% on frame 14. You can adjust the position/scale/rotation of the circle anyway you like between the frames. I've only scaled mine.

Step 10

Now create a new layer in the Movie Clip called "actions". Insert a key frame at the very last frame (14). Open the Actions panel and add a stop action. This stops the animation from looping.

Step 11

Once that's done, go to the Library Panel, right click "circle animation" and select "Properties...". Make sure you're in the "Advanced" view. Check "Export for ActionScript" - "Export in frame 1" should automatically be checked. For the class, enter "CircleAnimation" and leave the base class as "flash.display.MovieClip".

Step 12 - Check point

Now go back to the main timeline and make sure that just the "image" layer is on the stage. The new "circle animation" you created shouldn't be on the stage, it should only exist in the library.

Step 13

Create a new layer called "actions" and lock it. Select the first frame for that layer and go into the Actions panel.

Note: Normally I like to put my "actions" layer at the top so it's easy to find.

Step 14

First, create a mask for the image. Then add it to the stage and assign the mask to the image Movie Clip.

Step 15

Now we'll create 4 variables: xPos, yPos, spacingX, and spacingY. "xPos" and "yPos" will be used to position the new CircleAnimation instances. "spacingX" and "spacingY" is the spacing between each CircleAnimation instance along the x and y axis.

Step 16

Because we want to add CircleAnimation instances into the mask one by one, we'll use a Timer to call a function repeatedly. The function "revealImage" will be called every 30 milliseconds. In order to start the Timer you also need to call the "start" method.

Note: I'd suggest you use the uncommented addEventListener since it can help with memory management if you ever forget to remove unused listeners. The fifth parameter (true) refers to "weak reference", which by default is set to "false". For more information about "weak reference", have a look at this blog post.

Step 17

Let's create the "revealImage" function now. Make sure it has a parameter of type "TimerEvent".

Step 18

Now create a new CircleAnimation instance and position it based on the "xPos" and "yPos". Then add it into the mask.

Step 19

Currently all the CircleAnimation instances stack up on top of each other since "xPos" and "yPos" are always the same. What we want is to have the instances appear left to right and top to bottom, so we need to make sure that we increment the "xPos" by "spaceX". The same goes for "yPos" by "spaceY", however "yPos" should only increment when "xPos" exceeds the maximum x boundary. When that happens, "xPos" also needs to reset back to the left.

Step 20

If you test your movie now, it should reveal the image like the final effect. There is one important thing that you may not have noticed; CircleAnimation instances are still being created even after the image is revealed. This is because the "createChildTimer" event listener is never removed. We need to check to see if "yPos" has exceeded the maximum y boundary and if so, remove the "createChildTimer" event listener.

Step 21 - Final code

By the way, "imageToReveal_mc.x + imageToReveal_mc.width + spacingX" and "imageToReveal_mc.y + imageToReveal_mc.height + spacingY" never change thus I've stored them into the variables "maxXPos" and "maxYPos".

Your final code in the Actions panel should look something like this...

var maskImg:MovieClip = new MovieClip();
addChild(maskImg);
imageToReveal_mc.mask = maskImg;

var xPos:Number = imageToReveal_mc.x;
var yPos:Number = imageToReveal_mc.y;
var spacingX:Number = 50;
var spacingY:Number = 50;

var createChildTimer:Timer = new Timer(30);
// createChildTimer.addEventListener(TimerEvent.TIMER, revealImage); 
createChildTimer.addEventListener(TimerEvent.TIMER, revealImage, false, 0, true);
createChildTimer.start();

var maxXPos:Number = imageToReveal_mc.x + imageToReveal_mc.width  + spacingX;
var maxYPos:Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY;

function revealImage(evt:TimerEvent):void {
	
	var ca:CircleAnimation = new CircleAnimation();
	ca.x = xPos;
	ca.y = yPos;
	maskImg.addChild(ca);
	
	xPos += spacingX;
	
	if (xPos > maxXPos) {
		xPos = imageToReveal_mc.x;
		yPos += spacingY;
	}

	if (yPos > maxYPos) {
		createChildTimer.removeEventListener(TimerEvent.TIMER, revealImage);
	}
}

Step 22 - Optional row by row

By using a bit of recursion, we can change the effect so that it reveals the image row by row.

var maskImg:MovieClip = new MovieClip();
addChild(maskImg);
imageToReveal_mc.mask = maskImg;

var xPos:Number = imageToReveal_mc.x;
var yPos:Number = imageToReveal_mc.y;
var spacingX:Number = 50;
var spacingY:Number = 50;

var createChildTimer:Timer = new Timer(120);
// createChildTimer.addEventListener(TimerEvent.TIMER, revealImage); 
createChildTimer.addEventListener(TimerEvent.TIMER, revealImage, false, 0, true);
createChildTimer.start();

var maxXPos:Number = imageToReveal_mc.x + imageToReveal_mc.width  + spacingX;
var maxYPos:Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY;

function revealImage(evt:TimerEvent):void {
	
	var ca:CircleAnimation = new CircleAnimation();
	ca.x = xPos;
	ca.y = yPos;
	maskImg.addChild(ca);
	
	xPos += spacingX;
	
	if (xPos > maxXPos) {
		xPos = imageToReveal_mc.x;
		yPos += spacingY;
	} else {
		revealImage(evt);
	} 

	if (yPos > maxYPos) {
		createChildTimer.removeEventListener(TimerEvent.TIMER, revealImage);
	}
}

Step 23 - Optional column by column

Here is a column by column version. Most of the x and y variables/properties have swapped positions.

var maskImg:MovieClip = new MovieClip();
addChild(maskImg);
imageToReveal_mc.mask = maskImg;

var xPos:Number = imageToReveal_mc.x;
var yPos:Number = imageToReveal_mc.y;
var spacingX:Number = 50;
var spacingY:Number = 50;

var createChildTimer:Timer = new Timer(120);
// createChildTimer.addEventListener(TimerEvent.TIMER, revealImage); 
createChildTimer.addEventListener(TimerEvent.TIMER, revealImage, false, 0, true);
createChildTimer.start();

var maxXPos:Number = imageToReveal_mc.x + imageToReveal_mc.width  + spacingX;
var maxYPos:Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY;

function revealImage(evt:TimerEvent):void {
	
	var ca:CircleAnimation = new CircleAnimation();
	ca.x = xPos;
	ca.y = yPos;
	maskImg.addChild(ca);
	
	yPos += spacingY;
	
	if (yPos > maxYPos) {
		yPos = imageToReveal_mc.y;
		xPos += spacingX;
	} else {
		revealImage(evt);
	}
	
	if (xPos > maxXPos) {
		createChildTimer.removeEventListener(TimerEvent.TIMER, revealImage);
	}
}

Conclusion

There are many other things you can change in order to get different revealing effects such as the shape used in the animation, transformations within the animation, Timer speed, etc.

Thanks for viewing this tutorial and I hope you enjoyed it.