Circles on Image Animation | FlashMyMind - Flash and ActionScript 3 Tutorials

ActionScript 3 Random Circles on Image

February 6, 2009 by: smonte

In this tutorial, you’ll learn how to create the a cool mask effect over an image just by using ActionScript 3.0. Let’s get started with Flash!

Setting up the environment

1. Create a new Flash ActionScript 3.0 document of size 300×300.

2. Import an image of size 300×300 to the center of the stage.

3. Convert the image into a movie clip (name doesn’t matter, registration point in the center).

4. Give the image movie clip an instance name of “picture”.

5. Draw a circle shape on the same layer as the picture.

6. Convert the circle into a movie clip (name doesn’t matter, registration point in the center).

7. Remove the cirlce from the stage.

8. Linkage the circle movie clip to a class named “MaskBall”. These MaskBalls are the circles, that will slowly uncover the image.

Moving into ActionScript 3

Create a new layer called “actions”. Type the following in the first frame.

//This container contains all the circles that act as a mask for the picture
var container:Sprite = new Sprite();
 
//Assign the container to be the image's mask
picture.mask = container;
 
//Add the container to the stage
addChild (container);
 
/* This timer is responsible for creating a circle every 0.05 seconds. A total of 20 circles will be created. */
var timer = new Timer(50,20);
timer.addEventListener (TimerEvent.TIMER, createMaskBall);
timer.start ();
 
//The timer calls this function every 0.05 seconds
function createMaskBall (e:Event):void {
 
        //Create a new MaskBall
        var maskBall:MaskBall = new MaskBall();
 
        //Set scale to zero so it won't be visible at the beginning
        maskBall.scaleX = 0;
        maskBall.scaleY = 0;
 
        //Assign a random position in the stage
        maskBall.x = Math.random() * stage.stageWidth;
        maskBall.y = Math.random() * stage.stageHeight;
 
        //Add the maskBall to the container
        container.addChild (maskBall);
 
        //We need ENTER_FRAME function to handle the animation
        maskBall.addEventListener (Event.ENTER_FRAME, animateMaskBall);
}
 
//This function is called in every frame
function animateMaskBall (e:Event):void {
 
        //Increase the scale
        e.target.scaleX += 0.05;
        e.target.scaleY += 0.05;
}

That’s it, test your movie! As you can see, it’s much more efficient to create effects like this with ActionScript rather than using a timeline. Hope you enjoyed! If you have any questions concerning the tutorials, please visit the forum.