Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Mask square photo animation

12.1.2010, 17:37    Total views: 27159

Using this thoroughly explained, detailed flash lesson, 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!


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 a movie 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!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 310247

2. High-tech city animation
Total views: 272836

3. Water effect
Total views: 237035

4. Photo slide show
Total views: 220337

5. Special Picture Effect
Total views: 190707

Related links