First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Programming Art | Website: http://www.programmingart.com

II - Entering Code

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";

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

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. Finally, below you see Programming Art's finished Flash 5 preloader.

» Level Advanced

Added: 2001-12-12
Rating: 8 Votes: 467
(10 being the highest)
» Author
Please email at support@programmingart.com with any additions or suggestion! Thanks!
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.