Actionscript 3 Random Circles on Image
In this tutorial, you'll learn how to create the above mask effect just by using Actionscript 3.0. Let's get started with Flash CS3!
Setting up the environment
1. Create a new Flash Actionscript 3.0 document of size 300x300.
2. Import an image of size 300x300 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.0
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.
