Flash Loader Tutorial

This tutorial covers how to build a radial gauge loader in Flash. I'll be using a speedometer as the basis for this tutorial, but the concepts apply to any form of radial gauge. The basic logic is that the speedometer will move to higher speeds as the file loads and when it reaches 100, a play button will appear. You can download the source files including the .fla file here (15k file). Although every effort has been made to prevent viruses, always scan all files before extracting them.

Flash radial gauge loader image

Image of the completed loader.

Get the basics right.

Start by creating a new document. In this case the size doesn't matter so you can use what ever size is suitable for your project. In my case I'm using the default size of 550 x 400. I'll use a black background for the gauge. Rename Layer1 to gauge.

A little background

Next we need an image for the gauge. You can create one in Flash or import one. For simplicity, I'll import one that I made earlier. This is a simple .wmf file with the numbers and a centre mark on the gauge. The centre mark will help in the positioning of the needle.

A setup

Now we can start to get the needle setup. The first thing we need to do is to change our speedometer image to a movie clip. Since we won´t be moving the speedometer, the registration point doesn´t matter. Be sure to name the movie clip appropriately. In this case I called it speed_mc.

Break it down

Let´s setup the frames and layers that we´ll need for the movie clip. First rename Layer1 to speed_background. Next we need to determine how many frames we need. This is where some people make a small mistake. Since our needle will go in increments of 5 we need 100 / 5 = 20 frames. However we also have a frame at 0 so we need 21 frames. We also need one more frame to go to the next scene, so in total we have 22 frames. Since the background does not change, simply insert a frame at frame 22. We also need layers for the needle and for the actionscript. I called my layers speed_needle and actions. For the needle we will have a keyframe on each of 21 frames, but don´t set them up yet. You´ll understand why in the next step. The action layer only needs two keyframes on frames 21 and 22. For the action on frame 21, all we need is a simple command:
stop();
For frame 22, we just need:
_root.gotoAndPlay("next_scene");

The needle for speed

Now we need a needle. Again for simplicity, I have imported one that I already have. To make it easier to position the needle, I´ll move the needle layer below the background layer on the layer list. Now I can see my centre mark on the background on top of my needle. Insert a keyframe at frame 0 of the needle layer. Drop in the needle and position it using the center mark for reference. Next we need to go into the Transform command. Before we do any rotations, we need to change our pivot point on the needle to the center marks of the background. Next we need to rotate the needle back to 0. In this case just enter -60 for the rotation angle in the transform palette. Next put a keyframe in frame 2. The needle moves at 6.0 degree increments, however the rotation angle is an absolute. Therefore you need to enter -54.0 for frame number 2. Now create a keyframe for frame number 3 and enter -48.0 for the rotation. By creating each keyframe as we go, we do not have to worry about positioning the needle on each frame. Go ahead and create the rest of the frames by inserting a keyframe and rotating the needle by 6.0 degrees. don´t forget to insert a frame in frame 22. Now you can move the speed_background layer to the bottom of the layer list. We´re done with movie clip, so go back to your scene. In the Properties you need to name the Movie Clip and call it speed_clip.

Flash radial gauge loader image

Needle placed with the frames list.
(Don´t forget to move the speed_background layer to the bottom before exiting the scene.)

Button up

In order to make this move to the next scene, we need to do a little programming and add a few more things. Let´s start by adding some layers. Add one layer called play_button and another called actions. The gauge layer will not change, so insert a frame at frame 3. On the play_button layer, insert a frame at frame 2, and a keyframe at frame 3. Now we can add the play button on frame 3. Again for simplicity, just pick a button from the Common Libraries. The one I used is from the Classic Buttons - Playback folder and it is called gel Right. The actionscript for the button is:

on (release) {
	_root.speed_clip.gotoAndPlay(22);
}

This will go to frame 22 in the movie clip which will go to the next scene. Finally on the actions layer, we need keyframes at frames 2 and 3. For frame 2, the action script will look like this:

if (getBytesLoaded() < getBytesTotal()) {
	_root.speed_clip.gotoAndStop(Math.round((getBytesLoaded() / getBytesTotal()) * 21));
	gotoAndPlay(1);
}

This compares the loaded bytes against the total bytes and creates a number which is rounded in increments of 1 up to 21. That number is then used to play 1 frame out of the speed_mc clip.

On frame 3 the actionscript looks like this:

stop();
_root.speed_clip.gotoAndStop(21);

The reason why we need this is because Flash rarely if ever gets to 100% when checking using the actionscript in frame 2. This way, we are forcing the loader to display 100 until the user presses the play button

Flash radial gauge loader image

The final touches.

And we are done!

Finally you will need a Frame Label in your next scene called - next_scene_start. And there you have it. A radial gauge loader in Flash. You can use these same concepts to apply to virtually any motion type loader. If you really want to add something extra, insert some frames in speed_mc to create some animation after the user has pressed the play button. You can also add sound to the loader as well. Experiment and have some fun.