Shaking photo animation using the AS3

Date: 29.1.2010, 13:11 Total views: 8657

In this thoroughly explained, detailed flash lesson, I will show you how to create shaking photo animation using the Action Script 3. You can use this shaking animation for some presentation or web banner. Using this lesson, you will also learn how to import any photo into a flash stage, how to convert it into a Movie Clip Symbol, how to Linkage it and much much more. Let's start!

Example:

Step 1

First, save the photo below that we will use for this lesson!

Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 300 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.

Step 5

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

Step 6

Go to the Flash Library and linkage the photo movie clip to a class named Photo.

Step 7

Remove the photo from the stage.

Step 8

Select the first frame of layer photo and go to the AS panel (F9). Then, enter this code inside the actions panel:

var photos:Array = new Array();

for (var i = 0; i < 20; i++) {

var photo:Photo = new Photo();

photo.scaleX = Math.random();
photo.scaleY = photo.scaleX;

photo.x = Math.random() * stage.stageWidth;
photo.y = Math.random() * stage.stageHeight;

addChild (photo);

photos.push (photo);
}

var timer:Timer = new Timer(20, 100000000);
timer.addEventListener (TimerEvent.TIMER, shakephotos);
timer.start ();

function shakephotos (e:Event):void {

for (var i = 0; i < 20; i++) {

  photos[i].rotation += Math.random() * 8 - 4;

  photos[i].x += Math.random() * 6 - 4;
  photos[i].y += Math.random() * 6 - 4;
}
}

We're done!

Test your animation (Ctrl+Enter) and enjoy!

Download source file (.fla)