Advanced Preloader

Step 1

I should warn you that to understand this tutorial, you should be fairly familiar with Flash. Start off by starting a new movie: File » New. Then go to Modify » Movie and change the width and height to whatever your preference might be. The one I’m making is Width: 550 Height: 400. We’ll make the preloader first. Set up two scenes, the first one is the preloader and the second is the actual movie.

Step 2

Set up 2 layers on the first scene, name the top one “Control” and the second one “Other”. Add three keyframes to the first three frames in the “Control” layer. Then add three frames on to the “other” layer.

Step 3

Alright, now you want to go Insert » New Symbol and name it “loadmeter” with behavior as a Movie Clip. Make it 100 frames long, frame 0 is nothing loaded, and frame 100 will be fully loaded. My example is a simple bar, that I masked out, uncovering more and more as it nears the last frame, and I chose a chrome gradient fill, so you know when you reached 50%. If you want, you can download the preloader.fla movie and check it out (see resources at the bottom of the page).

Step 4

Go back into the scene, and drop the “loadmeter” from the Library onto the screen where ever you want it to be placed. Don’t be scared if you only see a white dot, the masking it hiding the real bar. Give it an instance name of “loader”.

Step 5

This part is sort of tricky, well not really. In the “other” layer, make a text box and put in “0”. Go into the Type pallet, and place it as Dynamic Text with Variable name “totalbytes” and no options checked. (Just make it look like the figure on the left). Now do this 4 more times, exact same thing, but change the Variable Names to loadedbytes, loadedkbytes, totalkbytes, and frame. Arrange it in a neat and orderly way as seen in the bottom left figure.

Step 6

Whew, now go to the Actions on the second frame of the “Control” Layer and Copy-Paste this beastly coding in there:

loadedbytes=getBytesLoaded();
totalbytes=getBytesTotal();
loadedkbytes=Math.ceil (loadedbytes/1000);
totalkbytes=Math.ceil(totalbytes/1000);
if (loadedbytes == totalbytes) {
nextScene ();
}
frame = int(loadedbytes/(totalbytes/100));
tellTarget (_root.loader) {
gotoAndStop (_root.frame);
}

If you look and read the code, its actually quite easy to understand. If you’re a real Boy Scout and want to write the code yourself, all of the functions can be found in the Object » Movie section.

Step 7

Finally, go to the third frame of the “Control” layer and put in the following code:

gotoAndPlay (1);

Now go to the other scene and make whatever you want to in there and the preloader will preload it, ain’t it great? If you want to check if this thing works, press Ctrl+Enter twice on your keyboard to test out the movie.

Tutorial resources

preloader.fla