Creating an Advanced Preloader in Flash
Flash 5 is getting more popular on the web with every day. In the first of our Flash tutorials we show you how to
make a full featured preloader step by step. We're going to control the loader bar with built in Flash functions
and keep our users constantly updated with dynamic text fields. So follow along and develop your own so that your
Flash content is loaded with style. Please let us know if you have any questions
or comments.
1. Begin by making a new movie in Flash, with the size you want your preloader to be [I chose 400 pixels
wide and 250 pixels high].
2. Make a new symbol that will be the container for our loader bar. This is what will frame the loader bar
as it stretches. If you'd rather have a loader bar with no edges skip this step. Choose Insert > New Symbol and
name it something descriptive like LoadBarFrame. Make sure you also make it a movie clip symbol. Now
just draw a rectangle with an outline in whatever colors you choose.
LoadBarFrame so far
3. Go back to the root of your movie and insert another symbol [Insert > New Symbol]. This is what
we will stretch as your movie loads. Name it something like LoadBarFill, and make sure you also make
it a movie clip symbol. Double click LoadBarFrame's icon in the library to edit it, then select the
fill of LoadBarFrame and cut it [CTRL + x]. You can select just the fill by clicking it once
with the Arrow Tool [V]. Now double click LoadBarFill's icon in the library to edit it, and
choose Edit > Paste In Place to paste just the fill of our rectangle into this symbol. You should now have
2 symbols, one with the frame of our loader bar and one with just the fill. You should also move the rectangle of
the fill so that the centerpoint lies on the far left edge of the symbol. This will enable us to stretch the bar
we will be making next horizontally to the right.
LoadBarFill
4. Go back to the root of the movie [Scene 1] and make 4 new layers, and name all of your layers as well.
I've named mine actions [I like to keep my scripts separated], loaderbar [for the loaderbar
symbol instances], loading [to hold our loading graphic], text fields [to hold the text
fields that display our percentages and bytes loaded], and continue [for the button to continue to
loaded content].
The layer setup.
5. Select the loaderbar layer and drag a LoadBarFrame instance onto the stage wherever you want
it. Now do the same with an instance of LoadBarFill. I recommend selecting both and aligning to center
with each other so they fit together perfectly before moving them in unison.
6. We will set up the stage before we apply code to the movie so the next thing to do is select the text fields
layer and make a few text fields. We will need one for the percentage of movie loaded and one to display the bytes
loaded and bytes remaining in our movie. So select the Text Tool [T] and drag out a small rectangle. Now in
the Text Options panel make sure to make the field Dynamic Text and Single Line. You should also give
it a variable name like loadPercent. At this point you can also add formatting to the text by selecting
the field and going into the Character panel to adjust font, size, etc. Now do the same with another text field and
name it something like loadBytes.
Text Field Placement.
7. I also set up a small animation in the loading layer and placed it on the stage just for decoration. Feel
free to do whatever or just leave it off. You may also want to consider a background layer at this point.
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:
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:
loadPercent = (Math.floor (_root.getBytesLoaded() / _root.getBytesTotal() * 100) + "%");
loadBytes = (Math.round((_root.getBytesLoaded() / 1024) * 1000) / 1000 + " Kb of " + Math.round((_root.getBytesTotal()
/ 1024) * 1000) / 1000 + " Kb total Loaded.");
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.
Enroll for Announcements | Legal | Privacy
Policy | Contact Us
