type = 'application/x-shockwave-flash'
data = 'http://sitepointstatic.com/flash/loader.swf'
width = '400'
height = '400'
bgcolor = 'black'

This tutorial shows you how to create a great loader animation. Download the sample files here.

1. Create some short, static text, and name it "Loading". Convert this to a symbol, and call it "loader".

2. Use loader symbol to create a rotating movieclip. Give this movieclip an instance name of "ball".

3. Create three key frames in the scene. In the first, insert the action:

//initialize variables. 
i = 0;
a = 10;

4. In the second key frame, insert the action:

if (Number(i)<10) 
//Create duplicate movie clip
duplicateMovieClip("ball", "ball" add i, i);
//decrease the alpha of the dupliacte movieclip
setProperty("ball" add i, _alpha, 50-(i*(50/a)));
i = Number(i)+1;

5. In the third key frame, insert the action:


Now, play the movie!

Georgina has more than fifteen years' experience writing and editing for web, print and voice. With a background in marketing and a passion for words, the time Georgina spent with companies like Sausage Software and sitepoint.com cemented her lasting interest in the media, persuasion, and communications culture.

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.

No Reader comments

Related books & courses
Available now on SitePoint Premium

Preview for $1