Please Wait... Loading

We've all seen them, and for the most part we all use them. Preloaders. Those cool little animations some of us spend days creating to show our users the file transfer status and/or entertain them while they wait for files to load. New to Flash 5 are some methods which will return a file's size and it's total loaded bytes on the fly. These methods allow us to return exact values vs. the Flash 4 method of counting _totalframes. Flash 5 enables us to return information to the user in relation to file size rather than the number of frames in our movie.

To Preload or Not To Preload

Before I get into all the syntax you crave, lets step back. There are as many situations where we will want to preload content as there are where we won't. For example, I have seen preloaders that are larger than the animation which follows it. So, while trying to stay on the cutting edge and remaining "cool" in your peers eye's, remember, your user is there to see the content, not to watch the 3d cube spin around some text that reads loading. As with situations like cartoons, you may only wish to preload a certain percent upfront, and let the rest stream in. Another example is a complex game which we will want to preload all elements of it and initialize our code before moving ahead. So take into consideration what you have, what you need and what your users need before implementing a preloader. With that said, lets get down to business.

.getBytesLoaded() & .getBytesTotal()

In this tutorial I have 3 examples of different uses for the .getBytesLoaded() & .getBytesTotal() methods. You will use both methods in all 3 examples, but how the information is displayed for your user will vary. The variable names in them can be named whatever you want.

The best way to understand what these 2 methods do is to refer to your ActionScript dictionary and read up. But, in a nut shell, .getBytesTotal() returns the total bytes of a designated object and .getBytesLoaded() returns the current bytes which have been downloaded of a designated object. This in turn means we can use it for both our _root (timeline) or any other object (mc/swf/etc.) we load in. These examples target our _root timeline which will allow us to get the size of the whole swf. The examples below have a large jpeg in them so you can see the preloaders work. The actual source file contains only the preloader elements.

The Percent Method

In our first example, we will return the percent of our file which has been loaded to the user by literally showing them the percentage. All 3 examples have our code in clip events. This allows us to loop code and return information rapidly. We start each example with a onload clip event to get the total amount of bytes for the file and set a variable named "tkb" to represent it. We do this in an on load event first so that we can reference the total amount in our loop without having to get it every time it loops.

onClipEvent (load) {
   tkb = _root.getBytesTotal();
}

Next we setup a formula to find out the percent of our file that has been loaded. This is inserted in an enter frame clip event so that as longs as the swf is running, the formula will loop. We do this by dividing the total bytes (tkb) by the number of bytes loaded (.getBytesLoaded()). Then we multiply this amount by 100 to give us a percentage representing 0%-100%. Last, I have rounded up the percentage to the next integer to display a whole number. You could leave this out or use the Math.ceil/floor etc. method to round up or down. This is a personal preference as to what you wish the user to see. This result will be represented as "p".

p = Math.round((_root.getBytesLoaded()/tkb)*100);

After we have our percent, we want to show it to our user. We simply create a field to represent "p". Again, you can do this a number of ways, but I have decided to have a field named "percent" on the main timeline to keep the 2 straight. So, I have set _root.percent to equal "p".

_root.percent = p;

Last in our formula we set our conditional. This will tell us what to do if a certain percent of the movie is loaded. In this first example, I have decide to preload the entire movie and once it has been loaded to tell the main timeline to go to the next frame.

if (p == 100) {
   _root.nextFrame();
}

The KB Method

In our next example, we will return the number of kb which has been loaded to the user by literally showing them the amount. This examples varies some, but still has the same principle. We first have an onload event to get the total amount of bytes for the file. I then have a field to show the user how big the file is. Rather than hard code this amount in, I've done it as a variable so the code can be reused in other files. Again, we get the total bytes and represent them as "tkb" with a small variation. Here, I have divided the total amount by 1000 (because gettotalbytes returns bytes not kilobytes and generally speaking, there are 1000 bytes in a kilobyte). After we get this amount, I have rounded it up to show as a whole number. Last, using the "add" operator, we set a field "totalkb" on the main timeline to show the total amount of the file to be loaded.

onClipEvent (load) {
   tkb = Math.round(_root.getBytesTotal()/1000);
   _root.totalkb = ("kb of " add tkb add "kb loaded");
}

After setting up the amount to be loaded for the user, we then calculate the kb which are loaded. Again, this is inserted in an enter frame clip event so that it will loop. First, we getbyteslaoded. Then we divided it by 1000 (same reason as before) and round this number up. This is represented by "kb".

kb = Math.round(_root.getBytesLoaded()/1000);

After we get this amount we show the user by setting a field named "kbloaded on the main timeline.

_root.kbloaded = kb;

This is followed by our conditional. Here, we compare the total amount of kb to the number of kb that have been loaded. If the numbers are equal, we advance.

if (kb == tkb) {
   _root.nextFrame();
}

Another option is to count down what's left to load. To do this, we simply subtract what we have loaded from the total amount and set the text fields on our main timeline accordingly. You could do this in the percent method also. Just subtract the percent loaded from 100.

kbleft = tkb - kb;
   _root.kbloaded = kbleft;

The Progress Bar Method

In our last example, we will show the percent of our movie that has been loaded by representing it as a progress bar. This example is similar to our first percent method, but will change the scale of our progress bar rather than literally showing the amount. Again, we start by setting tkb in an on load event.

onClipEvent (load) {
   tkb = _root.getBytesTotal();
}

Our variation comes next by setting the progress bar length. Before we get into the code, lets back up and see what we did to make our progress bar. The first thing we do is make a mc named loading bar. Inside this mc, we draw the bar graphic. This graphic has it's top left corner coordinates set to 0,0.

We do this so that when we change the scale of our bar mc on the main timeline, it scales out from left to right, instead of from the middle. This is very important in this example, but you could do anything you want to show the load progress. We then drop this mc onto the main stage and scale the width to something really small like .1.

Back to our code, in order to set the width of the progress bar, we will use the _xscale property and set the scale of our bar equal to the percent of bytes loaded. We do this by dividing the total bytes (tkb) by the total bytes that have been loaded. Then we multiply this amount by 100 to give us a percentage representing 0%-100%. This will be represented by "scale".

scale = ((_root.getBytesLoaded()/tkb)*100);

Next we set the scale of our progress bar equal to the percent loaded (scale). In this example, our clip events have been attached to our bar mc so we set it's property by targeting"this".

this._xscale = scale;

Last we have our conditional and we test to see if our percent equals 100. If it is, we proceed.

Feel free to post questions and additional uses for these methods in the ActionScript forum. Remember that as with every tutorial you read, there is always a different way to do something. These examples are just one way they can be used. Have fun, and don't keep us waiting :)