Random Mask Circles on Image
February 6, 2009 by: smonteIn 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.
Related tutorials:
Comments
One Response to “Random Mask Circles on Image”Leave a Reply
You must be logged in to post a comment.
I am very glad about this tutorial and also i wana say thank you for this tutorials.
i have try and make it.It is good and cool.
I have a question.
Can you tell me if i have more then one picture.How can hendle almost 6 or 8 picture with the same effect?
Thank you if you provide me help