Creating an Advanced Preloader in Flash - Page 3

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:

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:

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:

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:

gotoAndPlay(1);

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:

gotoAndPlay(2);

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:

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:

stop();

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.