The Loader class is the Actionscript class made specifically to get JPG, GIF, PNG and SWF files from a remote source and load it into the main SWF file. The LoaderInfo class gives you specific information about the file being loaded. By using the bytesLoaded and bytesTotal properties of the LoaderInfo class it is possible to display the information in a number of ways.

Before it is displayed in these ways the preloader has to be written. Below is the step by step of a simple preloader. Two objects are required to start. A URLRequest and a Loader. The Loader is a new Loader instance. The URLRequest object accepts a string. The string is the file path to the file.

var myLoader:Loader = new Loader();
var myURLRequest:URLRequest = new URLRequest("images/image.jpg");

Next step is to make a text field to display the preloader text. This is done by making a new instance of the TextField class. To make sure all the text is displayed the autoSize property of the TextField class is used. This is set to the TextFieldAutoSize class. The TextFieldAutoSize class is a list of constant values used in setting the autoSize property of the TextField class. The constant value can be either NONE (default), LEFT, RIGHT or CENTER. Then, the text is added to stage for display.

var myTextField:TextField = new TextField();
myTextField.autoSize = TextFieldAutoSize.LEFT;
addChild(myTextField);

The load of the URLRequest object is started with the load method of the Loader class. This line of code can also be put inside a function such as a MouseEvent. When planning out your preloading you usually want to break it up in such a way that the user is not waiting too long for the file or files to load. A rule of thumb is preload every 300 KB. Button clicks serve as natural break points. The reason is that there is a possibility that the user may never make that click. If they don’t click it then there is no reason to ever load that information.

myLoader.load(myURLRequest);

An event listener is added for the completion of the loader. This function will only add the Loader to the display list. The function myAddLoader is listening for myLoader completion.

myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, myAddLoader);
 
function myAddLoader(event:Event):void
{
	addChild(myLoader);
}

An event listener is added for the preloader text. This event listener is a ProgressEvent. It listens to the contentLoaderInfo property of the Loader class. This function is where all the preloading magic becomes visible. This progress event displays the event’s progress in bytes to the TextField instance we set up earlier. The keyword event here refers to the myLoader event. The function myLoaderProgress is listening to myLoader.contentLoaderInfo.

myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, myLoaderProgress);
 
function myLoaderProgress(event:ProgressEvent):void
{
	myTextField.text = event.bytesLoaded + " bytes";
}

The completed code would look something like this.

var myLoader:Loader = new Loader();
var myURLRequest:URLRequest = new URLRequest("images/image.jpg");
 
var myTextField:TextField = new TextField();
myTextField.autoSize = TextFieldAutoSize.LEFT;
addChild(myTextField);
 
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, myAddLoader);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, myLoaderProgress);
 
myLoader.load(myURLRequest);
 
function myAddLoader(event:Event):void
{
	addChild(myLoader);
}
 
function myLoaderProgress(event:ProgressEvent):void
{
	myTextField.text = event.bytesLoaded + " bytes";
}

Now that the preloader is made, the information can be displayed in any number of ways. To change the way the preloader looks just change the code in the myLoaderProgress function.

For a percentage preloader divide the bytesLoaded by the bytesTotal. This will give a decimal number from 0 to 1. To make it a percent multiply by 100. If it is published now it will give you a whole number while followed by about 100 decimal places. To get rid of that use the Math class round method. It will chop off all the nasty extras. The % sign is concatenated as a string literal after all the other stuff to tell the user that this is indeed a percentage and not going to count up to one billion.

function myLoaderProgress(event:ProgressEvent):void
{
	myTextField.text = Math.round(event.bytesLoaded/event.bytesTotal * 100) + "%";
}

For a kilobyte preloader divide by 1000 because a kilobyte is one thousand bytes. Add the string literals to layout it out however you want. In this example it outputs “Total x KB of Loaded: x KB”.

function myLoaderProgress(event:ProgressEvent):void
{
	myTextField.text = "Total: " + Math.round(event.bytesTotal/1000) + " KB of Loaded: " + Math.round(event.bytesLoaded/1000) + "KB";
}