Jesse Stratford

Jesse lives and works in Melbourne Australia. He is the Cofounder of http://ActionScript.org. A Flash enthusiast, teacher, author, freelancer and speaker Jesse's main focus nowadays is managing http://ActionScript.org, but he enjoys participating actively in community and the wider Flash scene when he has time.

View all articles by Jesse Stratford

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

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);
}

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

gotoAndPlay (1);

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 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.