Reveal an image with a dynamic mask

This tut will show you how to create a dynamic mask effect that by growing will reveal an image.

View DemoDownload Source

1. Create a new flash file (Actionscript 3.0).
Download the Tweener engine for Actionscript 3 at http://code.google.com/p/tweener/. Extract the zip file and get the caurina directory. Place this directory at the same level of your flash file.

2. On the layer 1 that we rename “pic”, put the image of your choice. Convert it to a movie clip and give it an instance name of “image_mc”.
(The image that we used is a shot from l’Arc de Triomphe, Paris and taken from interfacelift.com/wallpaper_beta/details/1897/colors_of_paris.html)

3. Create a new layer named “mask” and draw a shape at the center of the image. In our case we use the polyStar tool. Convert it to a movie clip and give an instance name of “maskStar_mc”.

4. Create a new layer named “button”. Take the Text tool and create a static text and type “Play animation”. Convert it to a movie clip with instance name of “playBtn”.

5. Create a new layer for the actions. Open the actions panel.
Type the following code :

import caurina.transitions.*;

image_mc.mask = maskStar_mc;
maskStar_mc.scaleX = maskStar_mc.scaleY = 0;

var scaleBig : int = 25;

playBtn.buttonMode = true;
playBtn.addEventListener(MouseEvent.CLICK, playAnim);

function playAnim(e:MouseEvent):void{
	playBtn.removeEventListener(MouseEvent.CLICK,playAnim);
	maskStar_mc.scaleX = maskStar_mc.scaleY = 0;
	Tweener.addTween(maskStar_mc, {scaleX:scaleBig, scaleY : scaleBig ,time:1.5, 
	transition:"easeInExpo",
	onComplete : function() { playBtn.addEventListener(MouseEvent.CLICK,playAnim); }});
}

6. Few explanations.
When the button playBtn is clicked, we call the function playAnim which remove the Click event listener so that if the user clicks and the animation has not finished it will not call the playAnim function.
We set the scaleX and scaleY properties of our mask to 0.
Then we call the addTween method of the Tweener class and define our parameters.
We want the scaleX and scaleY to be equal to scaleBig which we have declared at the beginning and that represents the value when the image is completely revealed.
We want the tweening to last 1.5 seconds and the transition to be of type “easeInExpo”.
Screenshot
Finally when the tweening is completed we add the Click event listener to playBtn so that the user can replay the animation.

For more details about the Tweener engine check http://hosted.zeh.com.br/tweener/docs/en-us/

7. Test the movie to see it in action.

2 thoughts on “Reveal an image with a dynamic mask

Leave a Reply

Your email address will not be published. Required fields are marked *