Flash Preloader Tutorial

Easy Bytes-Loaded Preloader for Flash 5+

1: Mmmm, real bytes!

This tutorial assumes:

You have flash 5 or later
You know how to make movie clips
You know how to work with the library
You have basic knowledge of making layers, adding actions, and other simple flash stuff.

You can download the source file n-vent-flash-preloader.zip 1.00 MB (Flash MX format).

If you have trouble, please read over the tutorial again carefully, as it contains all you need to know to get it working.
Let's get started!

Hey, we all know that preloaders are great. Having one is like watching grass grow, and that's always good fun! Old preloaders using frameload for percentage will jump around... going from say 10% to 34% to 98%. That's all fine and good, but you're not really getting a real picture of what's being loaded... sometimes your movie is on one frame as in many websites and interfaces, with everything being loaded via movie clips! This way uses the getBytesLoaded() and getBytesTotal() which can be found in Objects/MovieClip:

2: Initial Setup

OK. kick back and crack your knuckles, 'cause here we go... open up flash 5 and set up two scenes like this:

preload scene layer setup

Yeah, we're cruising. Set up the layers in the preload scene like this, and add 4 frames to the timeline: We'll be filling in each of the layers as we go.

Flash Preloader Frame Setup

Excellent. Onward!

3:Building the load meter is fun

Make a new MC (movie clip) and name it "loader." Make it 100 frames long, and tween a bar or some sort of movement that happens over the course of those 100 frames. Frame 0 is nothing loaded, and frame 100 will be fully loaded. My example is a simple bar, that I shape-tweened, growing more and more as it nears the last frame. (yours will most certainly be much, much better.)

Building the Load Meter

Nicely done. now we have a MC loader.

4: Hey, lets put it all together

This tutorial is not about how to make anything look a certain way, so let's just imaging making a background for your preloader. The point here I guess is to build your movies so everything is clearly marked and on different layers.

Setting up the variables

Let's set up our variables first. This way when things happen, we'll be able to see it in action. grab the type tool, and type in a "0". go to the Text Options pallet and set the text you just typed to be "dynamic text" as shown below:

Setting up the variables

Name the variable totalbytes.
Now repeat the above step and make variables with these names: loadedbytes, loadedkbytes, totalkbytes, and frame. I'm arranged them all on the "display var" layer as shown, also adding some Static text as labels to tell me what things are:

Click on the "load meter" layer, then drag in the "loader" symbol from the library onto the stage area. (see below)

Give it an instance name

Great! If you've stuck with me this far, we all win a trip to a theme park of your choice!

5: Setting up the actions

In the second frame of the control layer, we want this action:

loadedbytes=getBytesLoaded();
totalbytes=getBytesTotal();
loadedkbytes=Math.ceil (loadedbytes/1024);
totalkbytes=Math.ceil(totalbytes/1024);
if (loadedbytes == totalbytes) {
	gotoAndPlay (4);
}
percentage = int(loadedbytes/(totalbytes/100));
loader.gotoAndStop (percentage);

Explanation Time

First, we set up our variables, using getBytesLoaded() and getBytesTotal(). Note that loadedkbytes and totalkbytes use Math.ceil(), which rounds the results up to the nearest integer. When looking at KB, no one cares about the leftover fractions! (well maybe some people do, I don't.)

Next we use an if statement to see whether or not the movie is loaded. I use the "==" operator here, because it checks for true or false. If it's true, we just go to the next frame and continue on with our movie. If it's false, we continue on down the script.

The next part gives us our percentage value, which also is the frame number we want our loader to go to. After figuring what percentage we are at in the loading process, we then tell the "loader" movie clip to go to that frame, like this:

loader.gotoAndStop (percentage);

Make it loop

In the 3rd frame, Control layer, place an action to loop back to the first frame like this:

gotoAndPlay(2);

Simple! We are virtually done, and ready for a nice nap.

6: Finishing up

Your preloader scene should look like this:

You will of course have to place your content into the next scene yourself... when you have done this you'll have to preview the movie in flash to see the preloader in action. Just hit ctrl-enter twice. (the second time will mimic a slower-speed connection.)

Enjoy!

< Back