Shooting Masks via ActionScript 3
February 6, 2009 by: smonteThis tutorial will teach you how to create randomly shooting masks over an image. You will learn how to use multiple masks over an image and animating the alpha of the masks.
Setting up the environment
1. Import an image on to the stage that you would like to use in this Flash movie.
2. Set the stage to the same size as the image. Then align the image to the center of the stage.
3. Convert the image into a movie clip. Name it “Background” and set the registration point to the center.
4. Give the background movie clip an instance name of “backgroundImage”.
5. Create a new layer and draw a circle of size 50×50 on the new layer. This will be our mask circle.
6. Convert the circle into a movie clip. Set the following settings.
7. Remove the circle from the stage.
Moving into ActionScript 3
8. Create a new ActionScript file. Type the following code in the file.
package { import flash.display.MovieClip; public class MyMask extends MovieClip { //Mask's x and y speed public var speedX:Number; public var speedY:Number; //Set the given scale for this mask, when we create a new //mask object public function MyMask(scale:Number) { this.scaleX = scale; this.scaleY = scale; } } }
9. Save the file as “MyMask.as”. Remember to save it in the same place where your .fla file is.
10. In your main time line, type the following code in the first frame.
//We use an array to hold all our masks. //(Except the mask that follows our cursor) var masks:Array = new Array(); //We add all of the masks to a container var maskContainer:Sprite = new Sprite(); //Set the maskContainer to be the image's mask backgroundImage.mask=maskContainer; //Add the container on the stage addChild(maskContainer); //Create the mask which follows cursor movement (master mask) var masterMask:MyMask=new MyMask(1); //Set the master masks's coordinates to match cursor's coordinates masterMask.x=mouseX; masterMask.y=mouseY; //Add the master mask to a container maskContainer.addChild(masterMask); //Cache the image and container as bitmap, so we //can animate the alpha of the masks maskContainer.cacheAsBitmap=true; backgroundImage.cacheAsBitmap=true; //Create a timer that is called every 0.2 seconds var timer:Timer=new Timer(200,0); timer.addEventListener(TimerEvent.TIMER, timerEvent); timer.start(); //This function is called every 0.2 seconds. //We create a new mask in this function. function timerEvent(e:TimerEvent):void { //Calculate a random scale for the new mask (0 to 1.5) var scale:Number=Math.random()*1.5 + 0.5; //Create a new mask with random scale var newMask:MyMask=new MyMask(scale); //Set the position for the new mask newMask.x=mouseX; newMask.y=mouseY; //Assign a random x and y speed for the mask newMask.speedX=Math.random()*20-10; newMask.speedY=Math.random()*20-10; //Add the mask to the container maskContainer.addChild(newMask); //Add the mask to the array masks.push(newMask); } //We need ENTER_FRAME to animate the masks addEventListener(Event.ENTER_FRAME, enterFrameHandler); //This function is called in each frame function enterFrameHandler(e:Event):void { //Loop through the mask array for (var i:uint = 0; i < masks.length; i++) { //Save a mask to a local variable var myMask:MyMask = (MyMask)(masks[i]); //Update the x and y position myMask.x+=myMask.speedX; myMask.y+=myMask.speedY; //Increase the scale myMask.scaleX+=0.1; myMask.scaleY+=0.1; //Reduce the alpha myMask.alpha-=0.01; //If the alpha is below 0, remove the mask //from the container and from the array if (myMask.alpha<0) { masks.splice(i,1); maskContainer.removeChild(myMask); } } //Update the master mask position masterMask.x=mouseX; masterMask.y=mouseY; }
You are done, I hope you enjoyed this tutorial! Remember, if you have any questions feel free to post them in the forum.
Related tutorials:
Comments
2 Responses to “Shooting Masks via ActionScript 3”Leave a Reply
You must be logged in to post a comment.
Plz Plz help at the earliest…
Me getting a output error…
ArgumentError: Error #1063: Argument count mismatch on MyMask(). Expected 1, got 0.
at flash.display::Sprite/constructChildren()
at flash.display::Sprite()
at flash.display::MovieClip()
at withoutpreloader_fla::MainTimeline()