<u>Preloaders, preloaders, preloaders…</u>
You all love them when you see one, you all hate them when you can’t make them right. As you all know, preloaders are a good way of telling (but nowadays showing) the user how much longer he or she has to wait for the friggin’ site to load. If you ask me, anything’s definitely better than watching that little blue bar at the bottom of your Internet Explorer browser. So people make preloaders: percentages, bars, masks, little animations, whatever. As long as the user is entertained during this seemingly eternal wait, everything’s cool.
Now the two functions revolving around almost all preloaders these days are
getBytesLoaded();
and
getBytesTotal();
Since this is a tutorial, i’m going to tell you what these are:
the biggest assumption is that these two functions only correspond to swfs and other externally loaded swfs. WRONG. If you look through the Flash help files, you’ll find different objects with these two functions: LoadVars, Sound, XML, etc. As you can see you aren’t limited to preloading movies, but sounds, xml data, even text files!
So from now on, all the code in this tutorial will also work on these other objects; it’s just a matter of replacing the object.
Probably the simplest form of a preloader goes as follows:
Frame 1:
if (_root.getBytesLoaded() == _root.getBytesTotal()) {
gotoAndPlay(2); // assuming the rest of your movie is on Frame 2
} else {
gotoAndPlay(1);
}
That’s it. This little chunk of code loops over and over until the entire movie is loaded, then it moves on to the second frame, where the rest of the movie supposedly is. Take time to understand the code here. If you notice there is ‘()’ at the end of each getBytes…This means that these aren’t variables but functions. These are functions that return numbers, meaning you don’t have to manipulate anything. Flash automatically fills in the values of these two function calls. How nice.
So the code. Simply put, there is an if statement that checks whether or not the movie is fully loaded. Once the number of bytes loaded of the movie is the same as the total number of bytes, it’s completely loaded, right? Right. Now from here, you can start all your sorts of fancy temporary entertainment.
First we start with the percentage loader. Again, very simple. Flash already gives us all the elements we need to determine the percentage of the movie loaded. All we need to do is make a place to put it:
1) Make an Input Text box on the root/main stage of the movie, frame 1 and give it a variable (Var: ___) "perLoaded" 2) Now go back to the actions we placed earlier and modify it to look like this (try to avoid copy/paste, you'll learn much better and faster if you type in the code yourself): ``` onEnterFrame = function () { perLoaded = Math.floor(100*_root.getBytesLoaded()/_root.getBytesTotal())+"% Loaded"; }; if (_root.getBytesLoaded() == _root.getBytesTotal()) { delete onEnterFrame; gotoAndStop(2); } else { gotoAndPlay(1); }</blockquote> Simple. The new line of code you added evaluates the percentage of the movie loaded and even puts a nice "% Loaded" at the end of it. I put the Math.floor() there because if I didn't, then the textbox would display decimal values as well, not very attractive. Now that we have that, we can move on to percentage bars... Percentage bars work very much the same as the number percentage, only you'll be working with the properties of an object to extend the bar the same amount the movie has loaded. <blockquote>1) Make a new Movie Clip symbol (Ctrl+F8), doesn't matter what you name it, we won't use it right now. 2) Edit your new Movie Clip and draw your bar in there. When you draw it, make sure it is the length you want it to be when it's fully loaded. 3) After drawing it, select the entire bar and move it so that the bar is to the right of the crosshair (called the "Registration Point") like this: [img]http://www.freewebs.com/thoriphes/misc/perbar.jpg[/img] 4) Now that that's done, return to the main stage and drag/drop your new symbol onto the stage. 5) Select on the object and give it the instance name "perBar" 6) Now select the first frame of the movie and insert this code:perBar.onEnterFrame = function () {
this._xscale = 100*_root.getBytesLoaded()/_root.getBytesTotal();
};
if (_root.getBytesLoaded() == _root.getBytesTotal()) {
gotoAndStop(2);
} else {
gotoAndPlay(1);
}</blockquote> The new line of code (perBar.onEnterFrame...) tells the bar to update its length accordingly to how much the movie has loaded. Nothing too fancy here. Well, that concludes Part I of the preloader series. Next time we cover preloading other things, like externally loaded movies and JPEGs. Mods: What do you think?
