Creating a Preloader and Progress Bar - Page 6
       by kirupa  |  31 May 2008

In the previous page, you wrapped up the integration work where you used a preloader to load an image from an external location. In this page, let's look at the details of why it worked the way it did...starting with the code.

Looking at the Code
To best understand why your preloader worked, I am only going to focus on the code specific to just the preloader. The code for actually loading the images is explained in a separate tutorial and will not be discussed here.

function loadImage(url:String):void {
// Show Preloader
preloader.visible = true;
 

// Set properties on my Loader object

imageLoader = new Loader();

imageLoader.load(new URLRequest(url));

imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imageLoading);

imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);

}

In the above line, I am setting our preloader's visible property to true. If you recall, your preloader movie clip's instance name was preloader, and that instance got carried over when you copied and pasted it into your loadimage application.

The loadImage method is the first method that gets called when you run your application, so in other words, the first thing we do to our preloader when your application runs is make sure that our preloader is visible.

function imageLoaded(e:Event):void {

// Load Image

imageArea.addChild(imageLoader);

// Hide Preloader

preloader.visible = false;

}

The imageLoaded method gets called once your image has been loaded. This means that the download process has already been completed, so what you do is set your preloader's visible property to false because we no longer need to see it.

You looked at the code for what happens just before your image begins to get downloaded, and you saw the code for what happens after your image gets downloaded. What is missing is the code for what happens during the image download.

That is handled by the imageLoading method:

function imageLoading(e:ProgressEvent):void {

// Get current download progress

var loaded:Number = e.bytesLoaded / e.bytesTotal;

 

// Send progress info to "preloader" movie clip

preloader.SetProgress(loaded);

}

To be more specific, imageLoading is an event handler that gets called each time your progress event fires. That is why the argument to your imageLoading method is an object named e whose type is ProgressEvent. Progress Event fires each time more of your data is being downloaded, so you can imagine it being called many times for any particular download.

Your ProgressEvent object contains the properties for letting you know how much of your external content has actually been downloaded and the total size of the download. This data allows you to figure out the percentage of your file that is currently being loaded:

var loaded:Number = e.bytesLoaded / e.bytesTotal;

As your download progresses, the value of your loaded variable approaches 1 because your bytesLoaded will approach the total size of your download represented by bytesTotal.

This brings us to the grand finale of this code:

// Send progress info to "preloader" movie clip

preloader.SetProgress(loaded);

In this line, you call your preloader movie clip's SetProgress method and pass it your loaded value. As you saw a few pages ago, as the values you pass into SetProgress vary from 0 to 1, your progress bar adjusts its width accordingly. It is this line that links the progress of your download with your actual progress bar.

Recap
This is a fairly long tutorial, so let's quickly touch upon the higher level goals of what happened. You spent the first part of this tutorial creating the preloader movie clip. The preloader movie clip contains your progress bar and some code for controlling that progress bar. What makes it really nice is that everything you need is contained inside that movie clip. Think of it is as a very simple component!

You copied that preloader movie clip and pasted it into an existing application that loads content from an external source. With just a few tweaks, you were able to integrate your preloader and have everything working. The tweaks involved displaying and hiding the preloader when appropriate and passing in the appropriate progress updates as your content was being downloaded.

Feel free to look at my source file to see the version I described in this tutorial:

Download Final Source

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums New, Upcoming, and In-Progress Tutorials How to Help out kirupa.com Writing Tutorials

Cheers! Kirupa Chinnathambi facebook | twitter

1 | 2 | 3 | 4 | 5 | 6