Tutorial: Create an Ajax Loader in Flash

As web 2.0 is becoming ubiquitous, everyone’s jumping onto the bandwagon. You may have seen nifty Ajax loaders on websites around. There’s even a website to download these Ajax loaders. You can access it at ajaxload.info. It allows you to download animated gif’s of different kinds of loaders. But, if you want a loader in Adobe Flash, these gif’s won’t be any good as there would be quality loss. Then, how about creating your own ajax loaders in Flash? It’s very easy. Read on to know how. This is a simple tutorial targeted at beginners.

1. Create a new Flash file. Change the frames per second to 24fps in the properties dialog box. Select the ellipse tool, hold shift and draw a circle.

2. Select no color for stroke and for fill color, select ‘Radial’ in Color palette. Click the left slider and select white. Now, select the right slider and type #0099FF in the hex value box to give a blue color. Now, select this blue slider and click at three different points in between the two sliders so as to get three more sliders of varying blues. The colors should be (from left) #9DDAFF, #7ECDFF, #58BDFF.

3. Now, select the Gradient Transform Tool (Click and hold the Transform Tool (shortcut is Q) to see the Gradient Transform Tool in Flash CS3). Select the gradient. It will show the handles. Using the handles, get the gradient ellipse similar to the one shown in the picture below. The idea is to get the white gradient close to the edge of the circle.

4. Select the circle with the Selection Tool (V) and click ‘Convert to Symbol’ (F8). Save it as a Graphic in the library.

5. Now create a new layer (Layer 2) in the Timeline and create a white circle and place it at the center of the circle that we created before.

6. In the Timeline, right click on the 15th frame and click Insert Keyframe. Now, right click anywhere between the frames in Layer 1 and press Create Motion Tween. In Properties, select CW in Rotate. Select Layer 2 and right click on the 15th frame and click insert frame (f5). Test movie and voila! Our ajax loader is here.

7. If you play around with gradients, you can create different kinds of Ajax loaders. You may cut a small portion of the white gradient to make the ajax snake loader that’s quite famous!

Click here to see few other loaders that I’ve created. (swf file, 2kb)
Downlad the source file. (fla file, 37kb)

~ by Saawan on March 29, 2008.