Tutorial: A Simple Preloader, in detail

Justin | ActionScript,Animate/Flash,Tutorials | Tuesday, February 20th, 2007

Preloaders are one of the simplest bits of underutilized Flash programming
on the web. When making any kind of presentation on the web, whether it be
an interactive experience or a self-running animation, it is important to consider
user experience. It is important to be generous with the user, because we ask
that they be generous with us as they view our websites. Preloaders are also
important because they may retain busy or impatient users who would otherwise
think that nothing is going on when the page is merely loading without giving

Not everybody’s a programmer, though. So I’ve provided this detailed tutorial
for anyone would like to add a preloader to their Flash web project.

Getting started:

I usually like to put the preloader in its own scene so that it doesn’t disturb
my main timeline. If you’re not familiar with using scenes in Flash, a scene
can be added in the following manner:
– Window > Other Panels > Scene
– click the “+” to add a new scene
– drag it to the top
– and double-click to rename it
– I usually name it “preloader” and from hereon out I will refer to
it as the preloader scene

Then make sure your actionscript is organized in its own layer in the preloader
– add a new layer and rename it to ‘actions’
– lock the layer so nothing accidentally get placed on the stage for this layer
– select the first keyframe on the actions layer and open the actions panel
– the actions panel can be opened by hitting the f9 key or by going to Window > Actions

Then enter the following code:

//loaderbar_mc is a movieClip containing a rectangle with its registration point at the left edge
//percent_txt is a dynamic text field
//note the 3 different display options (A, B, C)


loaderbar_mc._xscale =

function preloading():Void{
var bLoaded:Number = getBytesLoaded();
var bTotal:Number = getBytesTotal();
var percentL:Number = (bLoaded / bTotal) * 100;

if (percentL < 100){
// (A) if you want to show text in the form of xx% loaded
percent_txt.text = Math.round(percentL) + “% loaded”;
// (B) if you want to show text in the form of xx Kb loaded/ xx Kb total
percent_txt.text = Math.round(bLoaded/1000) + ” Kb / “ + Math.round(bTotal/1000) + ” Kb” ;
// (C) if you want a loaderbar to grow with the % loaded
loaderbar_mc._xscale = percentL;
} else {


loaderInterval = setInterval(preloading,25);

//make sure there’s a stop command on your main scene if it’s a one frame app

Now for a detailed description of what everything does:


The Shy Amoeba

Justin | ActionScript,Animate/Flash | Friday, February 16th, 2007

This tiny app uses ActionScript classes from Sandy 3D, Fuse, Lee Brimelow, and one that I made myself.