Programming Art, LLC
Products Web Services Free stuff Forums
100% Satisfaction Guarantee
Credit Cards Accepted
Programming Art's Tutorials

Creating an Advanced Preloader in Flash
Flash 5 is getting more popular on the web with every day. In the first of our Flash tutorials we show you how to make a full featured preloader step by step. We're going to control the loader bar with built in Flash functions and keep our users constantly updated with dynamic text fields. So follow along and develop your own so that your Flash content is loaded with style. Please let us know if you have any questions or comments.

Get the FREE Preloader [Flash MX, 1.93Mb]

The finished preloader.

1. Begin by making a new movie in Flash, with the size you want your preloader to be [I chose 400 pixels wide and 250 pixels high].

2. Make a new symbol that will be the container for our loader bar. This is what will frame the loader bar as it stretches. If you'd rather have a loader bar with no edges skip this step. Choose Insert > New Symbol and name it something descriptive like LoadBarFrame. Make sure you also make it a movie clip symbol. Now just draw a rectangle with an outline in whatever colors you choose.

LoadBarFrame so far

3. Go back to the root of your movie and insert another symbol [Insert > New Symbol]. This is what we will stretch as your movie loads. Name it something like LoadBarFill, and make sure you also make it a movie clip symbol. Double click LoadBarFrame's icon in the library to edit it, then select the fill of LoadBarFrame and cut it [CTRL + x]. You can select just the fill by clicking it once with the Arrow Tool [V]. Now double click LoadBarFill's icon in the library to edit it, and choose Edit > Paste In Place to paste just the fill of our rectangle into this symbol. You should now have 2 symbols, one with the frame of our loader bar and one with just the fill. You should also move the rectangle of the fill so that the centerpoint lies on the far left edge of the symbol. This will enable us to stretch the bar we will be making next horizontally to the right.


4. Go back to the root of the movie [Scene 1] and make 4 new layers, and name all of your layers as well. I've named mine actions [I like to keep my scripts separated], loaderbar [for the loaderbar symbol instances], loading [to hold our loading graphic], text fields [to hold the text fields that display our percentages and bytes loaded], and continue [for the button to continue to loaded content].

The layer setup.

5. Select the loaderbar layer and drag a LoadBarFrame instance onto the stage wherever you want it. Now do the same with an instance of LoadBarFill. I recommend selecting both and aligning to center with each other so they fit together perfectly before moving them in unison.

6. We will set up the stage before we apply code to the movie so the next thing to do is select the text fields layer and make a few text fields. We will need one for the percentage of movie loaded and one to display the bytes loaded and bytes remaining in our movie. So select the Text Tool [T] and drag out a small rectangle. Now in the Text Options panel make sure to make the field Dynamic Text and Single Line. You should also give it a variable name like loadPercent. At this point you can also add formatting to the text by selecting the field and going into the Character panel to adjust font, size, etc. Now do the same with another text field and name it something like loadBytes.

Text Field Placement.

7. I also set up a small animation in the loading layer and placed it on the stage just for decoration. Feel free to do whatever or just leave it off. You may also want to consider a background layer at this point.

8. Now we will get into the code portion of the tutorial so we can make the loader bar fully operational, not unlike the Death Star. I always like to initialize everything first, so in the first frame of your actions layer insert the following code:

loadpercent = "0%";
loadBytes = "0 of " + Math.round((_root.getBytesTotal() / 1024) * 1000) / 1000 + " Kb";

This just puts initial values in our text fields and gives us a chance to line things up and make sure we set up the fields properly. The (_root.getBytesTotal() / 1024) uses Flash's built in getBytesTotal function and divides it by 1024 to give us kilobytes instead of bytes. I prefer Kb over bytes for my loaders. The Math.round method is just being used to round our result to 3 decimal places so it's easier to read.

9. To update the text fields properly during the loading of our animation we need to make another keyframe in the actions layer by selecting frame 2 and hitting F6. Then select that frame and insert this code:

loadPercent = (Math.floor (_root.getBytesLoaded() / _root.getBytesTotal() * 100) + "%");
loadBytes = (Math.round((_root.getBytesLoaded() / 1024) * 1000) / 1000 + " Kb of " + Math.round((_root.getBytesTotal() / 1024) * 1000) / 1000 + " Kb total Loaded.");

The loadBytes line may wrap around in your browser, however it should be entered as one line in Flash.

It's much easier than it may seem. We take _root.getBytesLoaded and divide it by the total number of bytes in our movie [getBytesTotal], and we get a number between 0 and 1. When you multiply that by 100 you get the percent of your movie loaded. The Math.floor method is used to round it to an integer to keep the numbers clean. For loadBytes, you just take the bytes loaded and total bytes and put them in between some formatted text so it looks better. The Math.round method is being used here as well to round the numbers to 3 decimal places so they don't get out of hand. And again we divide by 1024 to get Kb instead of bytes.

10. OK, double click on the LoadBarFill instance on the stage so that it's in edit mode. Make a new layer in LoadBarFill's timeline for the actions you will be adding. In frame 1 enter the following:

this._xscale = ((_root.getBytesLoaded() / _root.getBytesTotal()) * 100);

Very straightforward, we simply scale the fill with the loaded amount to produce the loading bar effect we are all familiar with. Also, make another keyframe on frame 2 of LoadBarFill's timeline and enter:


LoadBarFill's layer setup.

This creates a loop that will insure the bar is updated continuously as our movie loads. Now go back to the root of your movie and add another keyframe [F6] to the actions layer. In the newly created frame 3 enter the following code:


This will begin the looping process that will continue until our movie is loaded. After the text fields update in frame 2 we come here, only to return to frame 2 and update the text fields again. Now you see that we need a special conditional statement to end this loop after our movie has loaded completely. Return to frame 2 to enter this after our existing code:

if (_root.getBytesLoaded() == _root.getBytesTotal()){
   loadPercent = "100%";
   loadBytes = (Math.round((_root.getBytesLoaded() / 1024) * 1000) / 1000 + " Kb of " + Math.round((_root.getBytesTotal() / 1024) * 1000) / 1000 + " Kb total Loaded.");

The loadBytes line may wrap around in your browser, however it should be entered as one line in Flash.

This is a cleanup conditional that first checks to see if our movie has finished loading. If it has, we finalize the text field display [you may not need to do this if your user is immediately sent to another frame that doesn't contain them], and go to the frame label "Button". We haven't created this label yet, so let's do it now. Create one last keyframe in the actions layer [this will be the fourth] and give it the frame label "Button" using the Frame panel.

From this point we just need to tie up a few loose ends. First, in the "Button" frame, enter this action on the actions layer:


This just ensures that our movie stops and waits for the user to click our continue button. The continue button is an optional step I decided to take so that once my movie loads my user can click to start it [this also ensures focus on your movie for keyboard input]. If you want a continue button, Put it in the "Button" frame of your continue layer. It will appear after your movie has loaded. Just create a simple release function that takes your movie where you want it to go when the user clicks your button.

A sample continue button.

Lastly, you'll want to make keyframes for all of your layers at the "Button" frame so that everything is visible for the duration of your preloader. Just select the fourth frame in each layer and hit F6 to do so.

The final layer setup.

That's it, just link your continue button with whatever content you've loaded and you're finished. Be sure to grab the sample .fla file so you can double check if you run into trouble. It will be hard to initially see that your bar is moving because the .swf output's file size is so small. Just use View > Show Streaming to see the bar grow as it would when streamed from a browser.

Your Shopping Cart