Scripting 3 - masking squares

 

I will explain to you how to create square photo animation using the mask and action script code. You can use this mask animation for some web banner or for some presentation. Let's start!

Here is your file.

Step 1

First, save the photo below that we will use for this lesson as background.


Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 420 pixels and the height to 281 pixels. Select any color as background color. Set your Flash movie's frame rate to 34 and click ok.

Step 3

Call the current layer photo. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import a photo that you just saved in step 1 into a flash stage. While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 5

While the photo is still selected, hit F8 key (Convert to Symbol) to convert it into amovie clip symbol. 



Step 6

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip photo_mc. See the picture below.



Step 7

Select the Rectangle Tool (R) and draw a square shape about 30x30 px.

Step 8

While the square shape is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol. 



Step 9

While the new made movie clip (square) is still selected, hit delete key on the keyboard to delete it from the flash stage. 

Step 10

Go now to to flash library (Ctrl+L), right click on the square_mc and choose Linkage.

Step 11

After that, make the adjustments as follows:

Step 12

Create a new layer above the layer photo and name it action script. After that, select the first frame of layer action script and go to the action script panel (F9) and enter this code inside the actions panel:

var container:Sprite = new Sprite();
 
photo_mc.mask = container;
 
addChild (container);
 

 

var timer = new Timer(50,20);
timer.addEventListener (TimerEvent.TIMER, createMaskSquare);
timer.start ();
 

function createMaskSquare (e:Event):void {
 
 var maskSquare:MaskSquare = new MaskSquare();
 
 maskSquare.scaleX = 0;
 maskSquare.scaleY = 0;
 
 maskSquare.x = Math.random() * stage.stageWidth;
 maskSquare.y = Math.random() * stage.stageHeight;
 
 container.addChild (maskSquare);

 maskSquare.addEventListener (Event.ENTER_FRAME, animateMaskSquare);
}


function animateMaskSquare (e:Event):void {

 e.target.scaleX += 0.05;
 e.target.scaleY += 0.05;
}

We're done!

Test your movie and enjoy!