Toxiclab.org

Falling icon animation

14.1.2010, 15:14
Submited in: Flash | Total Views: 15671

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create falling icon animation using the action script code. Using this lesson, you will also learn how to import any icon into a flash stage, how to convert it into a movie clip symbol, how to create instance name and much much more. Let's start!

Example:



Step 1

First, find any icon which you like to use for this animation.



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 283 pixels. Select any color as background color. Set your Flash movie's frame rate to 32 and click ok.

Step 3

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

Step 4

Choose File > Import > Import to Stage and import any icon into a flash stage!

Step 5

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



Step 6

Select the Selection Tool (V) and click once on the icon to select it. Then, go to the AS panel (F9) and enter this code inside the actions panel:

onClipEvent (load) {
 movieWidth = 420;
 movieHeight = 283;
 
 i = 1+Math.random()*3;
 k = -Math.PI+Math.random()*Math.PI;
 
 this._xscale = this._yscale=50+Math.random()*100;
 this._alpha = 75+Math.random()*100;
 this._x = -10+Math.random()*movieWidth;
 this._y = -10+Math.random()*movieHeight;
}
onClipEvent (enterFrame) {
 rad += (k/180)*Math.PI;
 this._x -= Math.cos(rad);
 this._y += i;
 if (this._y>=movieHeight) {
  this._y = -5;
 }
 if ((this._x>=movieWidth) || (this._x<=0)) {
  this._x = -10+Math.random()*movieWidth;
  this._y = -5;
 }
}

Step 7

Select the Selection Tool (V) and click once on the icon. After that, hit Ctrl+D key on the keyboard few times to duplicate your icon.

Step 8

Place you icons random on the flash stage like it is shown on the picture below!



We're done!

Test your movie and enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials


Resources Worth visiting


Friends