Shooting Masks via ActionScript 3

February 6, 2009 by: smonte

This 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.

Convert background to movie clip

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.

Movie clip 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.

  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. Mask Animation with ActionScript 3
  2. Random Mask Circles on Image
  3. Image Mask Eraser
  4. Image Mask Animation
  5. Image Fill with ActionScript 3

Comments

2 Responses to “Shooting Masks via ActionScript 3”
  1. DK says:

    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()

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.