Tutorial details:
Written by: Jesse Stratford [email:jessestratford@actionscript.org]
Time: 15 minutes
Difficulty Level: Intermediate
Requirements: Flash 5.
Topics Covered: ifFrameLoaded, goto, set variables, dynamic text fields, movieClip properties.
Assumed Knowledge: Instances, Paths, basically all the Beginner level stuff.

Click here to download the source for this tutorial. (Flash 5, PC Zip file).

(The 'X' graphic in this file is copyright to me, Jesse Stratford, one of my brief toys with 3D rendering. You can download it here if you want it for personal use. 1024 x 768 )

In this tutorial we will discuss (or I will discuss) preloaders in Flash 5. One of the greatest benefits of Flash 5 is that it is self-aware. By this I mean that a flash file knows how big it is (in bytes, frames, time, etc), and knows where elements are in relation to itself. This allows us to do various things which, though they were possible in Flash 4, took a lot of effort.

Before I teach you about percentage preloaders, we've got to have a look at the basic preloader mechanism. If you've made a preloader before, you can skip this bit: I assume nothing.

A preloader is a buffering mechanism: it allows us to load up some of our content before we begin playing our flash file, to ensure smooth streaming and correct timing. I must emphasize the word some: personally I feel that Flash is a streaming medium and as such it should have as much streaming content as possible, thus I am not keen on 5Mb sites who preload the whole thing before it starts. That's a waste of my time and bandwidth. If you're going to make huge sites, I say make them hierarchical so that you can load up content when and more importantly if the user wishes to see it. Now, with the rant out of the way, let's move on.

The basic preloader in Flash 5 has not changed from Flash 4. You will see other ways to do it using onFrameEnter and the like but I still like the old way. Your basic preloader goes in a scene of its own before the main content scene, (you can move Scenes around using the object inspector, so don't worry if you're made your content and left the preloader to last). The preloader scene has 2 frames with the following actions:

Frame 1

[as]ifFrameLoaded ("Scene 2", 1) {
gotoAndPlay ("Scene 2", 1);
}[/as]

Frame 2

[as]gotoAndPlay (1);[/as]

This example is for a SWF with 2 scenes, named Scene1 and Scene2, where most of the content is in frame 1 of Scene2. Thus we buffer up to (and including) the frame with most of the content, then we continue. The code above is pretty self-explanatory so I wont go into detail about it. Over the page we discuss the percentage calculator...

OK, so now you all know about the basic preloader model, let's move onto the good stuff. A percentage preloader is a preloader which displays the current percentage of the file loaded. Our version also shows the total bytes and the bytes loaded so far. You can also display bytes still to load and approximate load time, but I will append that information later because I want to get this tutorial up and out of the way today! :o)

In the halcyon days of Flash 4, we had to extrapolate frame sizes from a file size report and load them into Flash as variables. Then we used some pretty scary code to calculate how many frame are loaded, their sum total byte size, and thus the percentage of the file loaded so far. This was a mega pain because, amongst other things, it changed every time you made the tiniest alteration to your SWF. Furthermore, these preloaders tended to jump up in bursts as large symbols (such as sounds) loaded. Flash 5 has solved bother these problems. We can now make an efficient, accurate and easy, dynamic preloader using only 3 functions! So let's get into it!

We start off as before: insert a new Scene and use the Object Inspector to move this scene to the front of your movie (making it the first Scene). We want this scene to have 2 layers, so click the add layer button and name your two layers (from the top down) "Script" and "Visual". Insert a keyframe in Script at frame 1, and another at frame 2 (select the frame and press F6). Extend Visual to be 2 frames long also (click in frame 2 and press F5).

Create a new movieClip symbol (Ctrl F8) and name is "bar". Make this symbol 100 frames long (for ease) and insert 2 layers: Frame and Bar. In frame 1 of Bar, draw your loading bar using the square tool: mine's a little gray box with a white outline. Now, select the outline (if you made one) and Cut it (Ctrl X). Select the Frame layer and Paste In Place (press Ctrl Shift V): this way your frame is on another layer and wont be tweened. Go back to the Bar layer and insert a keyframe at frame 100. Now at frame 1, zoom right in on your bar and use the select tool to cut off as much as you can while still keeping a little line there for the shape tween we're about to make. You should now have a tiny line in frame 1 and the full bar in frame 100. Open up the Frame Inspector and set Tween to Shape tween. Now when you press Enter you should see your bar slowly filling up. Put a stop instance in frame 1 of the Frame layer so that this bar doesn't just fill as soon as the movie starts. Now go back to your main stage and drag one copy of your bar movie clip symbol onto the stage at Frame 1 of the Visual layer. Use the instance inspector to name this symbol "bar".

Now insert 4 Dynamic Text Fields in frame 1 of the Visual layer, (using the text tool and text inspector to set Type to Dynamic Text). Uncheck 'Selectable'. name your fields as follows: total_bytes, loaded_bytes, remaining_bytes, percent_done .

Now we just need to ad the script and you're ready! In the script below, you will have to adjust the ifFrameLoaded and gotoAndPlay actions to encompass the length and Scene names of your own SWF movie.

Frame 1

[as]total_bytes = _root.getBytesTotal();
loaded_bytes = _root.getBytesLoaded();
remaining_bytes = total_bytes-loaded_bytes;
percent_done = int((loaded_bytes/total_bytes)*100);
bar.gotoAndStop(percent_done);
ifFrameLoaded ("Scene 2", 30) {
gotoAndPlay ("Scene 2", 1);
}[/as]

Scrip analysis (What it does, by line)

1. Sets variable total_bytes to the byte size of this SWF movie.
2. Sets variable loaded_bytes to the current load status of this SWF movie.
3. Sets variable remaining_bytes to the number of bytes yet to load (using simple math) in this SWF movie.
4. Sets variable percent_done to the appropriate (rounded) number determined using simple math.
5. Tells the 'bar' clip to go to the frame number which corresponds to the current percentage loaded.
6. Checks loaded status - "Is movie fully buffed?"
7. If Line 6 returns True, goes to appropriate frame (start of movie).
   

Frame 2

[as]gotoAndPlay (1);[/as]

Scrip analysis (What it does, by line)

1. If Line 6 of frame 1 returns False, this code loops back to frame 1 until Line 6 returns True.

And that's it! To test it in Flash press Ctrl-Enter, select your streaming speed (56Kb is pretty standard) and press Ctrl-Enter again to see how it would load if you were downloading it from the 'Net rather than running it from a local system.

Jesse Stratford [email:jessestratford@actionscript.org] is the Co-Master of ActionScript.org and a freelance Flash developer and teacher. He is based in Australia and enjoys all things Flash. NB: If you have comments or feedback please feel free to email me, but please do not email me Flash questions; the forums are provided for that purpose and you will get a faster answer by posting you question there.

If you have found this tutorial helpful, I hope that you will take 30 seconds to visit The Hunger Site where, with just one click you can make a free donation of food to a starving person in a third-world country. We do not benefit financially from this action; it is purely an act of charity.

This tutorial is protected by International Intellectual Property Rights laws and may not be reproduced or redistributed in full or part, without the prior written consent of the author. Unauthorized reproduction of this tutorial or its contents may result in prosecution. I've worked hard on this tutorial, please don't steal it.