Ok i have seen about 5000 posts asking about how to make a preloader
and how it works. Within this post i will describe how the preloader
works, and how to use it.A preloader is something that holds the
movies playhead at the first frame or specified frame until the
total file size of the movie is loaded, if a preloader is not used
in your movie, the movie can become choopy and unclear whihc can
ruin the entire movie, making a preloader essential to understand.
First off download the attached fla. Once you have it opened as you
can see the entire preloader is inside 1 movieclip making this a
very simple object to use. In your preloader you can have any amount
of animations you like, but keep in mind that the preloader can't
preload its self, so the preloader must be loaded before the
preloader can start to work. You might want to keep the preloader
size under 10 kb. Next open the preloader movieclip by double
clicking on the preloader and you will see multiple layers with
various things on them. We are going in order from top layer to
bottom layer. In the first layer is the actions
code:
_root.stop();
PercentLoaded = _root.getBytesLoaded()/_root.getBytesTotal()*100;
if (PercentLoaded != 100) {
setProperty(bar, _xscale, PercentLoaded);
} else {
_root.play();
}
percentDone = Math.ceil(PercentLoaded)+"%";
bytesloaded = (_root.getBytesLoaded()/1000);
bytestotal = (_root.getBytesTotal()/1000);
bytes_loaded = Math.ceil(bytesloaded)+"kb";
bytes_total = Math.ceil(bytestotal)+"kb";
I will describe these as we get to each part. In the second layer is
just an outline of the load bar so you can see how far the loading
has left(this part is optional).In the third layer is the loadbar
it's self which is what changes size as you can see by these actions
code:
_root.stop();
PercentLoaded = _root.getBytesLoaded()/_root.getBytesTotal()*100;
if (PercentLoaded != 100) {
setProperty(bar, _xscale, PercentLoaded);
} else {
_root.play();
}
_root.stop(); stops the main playhead as i forgot to mention before
the only content that should be on the first frame of oyu movie
should be the preloader everything is at least 1 frame later. So
when the playhead stops on frame 1 the movieclip on frame one(the
preloader) loops and inside this movieclip is two frames which loop
continually. On the second frame on the actions layer is
code:
gotoAndPlay(1);
what this effectively does is sends the playhead that is inside the
movieclip back to frame one and recalls the actions in that layer
therefore updating all the actions every 2 frames. the PercentLoaded
is a variable that is defined by the total amount of bytes in the
swf, that is if oyu say _root.getBytesLoaded() because if you say
getBytesLoaded you are basically saying get the bytes for just this
movieclip and then it will only load hte preloader and the rest of
the movie will still be unloaded. When you say _root.getBytesLoaded
()/_root.getBytesTotal() you are creating a ratio that will always
be less than or equal to 1 which is how you find the percentage
loaded. Lets say you have a movie that is 100kb and 25kb of it is
loaded. The PercentLoaded would be .25 and if we want the actaul
percent all of us mathmaticians know that you have to mulitply it by
100 to get the actual percent, hence you have the PercentLoaded. Now
in the next line of scripting where it says
code:
if (PercentLoaded != 100) {
this is an if statement saying if the PercentLoaded variable is NOT
equal to 100 then do the following actions. The following actions are
code:
setProperty(bar, _xscale, PercentLoaded);
this sets the propertie of the loadbar which has an instance
(reference name) of bar so we set the property of the _xscale of the
bar which is 100 if it is equal to the regular _xscale making this a
handy tool to use since it can be equivilant to the PercentLoaded.
We could also say these actions in the one aboves place and it would
do the same thing
code:
_root.preloader.bar._xscale = PercentLoaded;
and now to the next line where it says
code:
}else{
this is basically equivilant to saying if the if statement
code:
if (PercentLoaded != 100) {
is not true then do the following actions which are
code:
_root.play();
this is basically the opposite of the _root.stop(); action. What the
_root.play(); action does is starts the main timeline playhead again
so the movie continues to play. So here is what these actions
code:
} else {
_root.play();
}
mean in regular terms: if the PercentLoaded is equal to 100 then
play the main timeline. Pheww now to layer 4. In layer four is the
display of the percent done. The way we display variables is create
a dynamic text box and give it a var which you can relate so that it
will display whatever you want it to say in actionscripting. In this
case you could use the PercentLoaded varible like so
code:
percentDone = Math.ceil(PercentLoaded)+"%";
what Math.ceil() does is it basically rounds the number following it
to a whole number this also can be done with the Math.round()
function. So we are rounding the PercentLoaded so that if the actual
PercentLoaded was 54.67895634 it will display 55. When i say +"%" i
am indicating that you need to add the following to the display.
This just happens to be in quotations meaning that you add the
character to that text field instead of a variable. Now on to layer
5. In layer 5 is a dynamic text field that displays the kb loaded
using these actions
code:
bytesloaded = (_root.getBytesLoaded()/1000);
//this just assigns a variable the value of the bytes loaded *1000
//since 1 kb is 1000 bytes
bytes_loaded = Math.ceil(bytesloaded)+"kb";
//the line above rounds the bytesloaded and adds the charaters kb to
//it and assigns the text field bytes_loaded that value
Also in layer 5 is just a regular text field with the value of "of"
showing that this amount of kb is loaded out of this other amount of
kb. And lastly in that layer is the other text field displaying the
totalbytes
code:
bytestotal = (_root.getBytesTotal()/1000);
//here we assign this variable getting the bytes of the total swf
//which will not change but needs to be assigned
bytes_total = Math.ceil(bytestotal)+"kb";
//and the line above assigns the text field bytes_total the value
//above
In the last and final layer is a simple animation that loops whihc
can be removed or changed and will not affect the loading process.
I hope this tutorial has helped you and if you have any questions
feel free to post back and ask. If you feel something should be
added, please post as well and i will edit it.
Thanks,
Joe
A Flash Developer Resource Site
Reply With Quote
and a sticky would be pimp
