|
Well,
I know your timeline has expired, but I'm gonna give you the skinny on how to add a cheap no-frills progress loaderbar to your flash content - i hope you can incorporate this into your next project.
1. First thing to do is to pad some frames infront of your flash content, so, assuming you are working in Windows, highlight the entire first column of frames in the flash time line, then press F5 about 6 or seven
times. This should give you some extra frame in front of your content.
2. create a new layer to put your load bar and percent indicator text, if needed. These elements should be made into MovieClips so you can write code that will change what's inside them on the fly. Like this:
2a: Let's assume you created a later called "preloader". Inside preload, on Frame 1, create a text box. Change this text box to a dynamic text box, adjusting the color and the font properties to your liking. Be sure to embed the font info so the display looks correct on any computer weather they have the font or not.
2b: Next, under the text box, create a line graphic, using the box tool, with the line art turned off. You can use the line tool, but I find the box tool gives better corners.
2c: Select this line element and press F8 (convert to symbol) and change this sucker into a movieclip - give it a usefull name so you can recognize it in the library later).
2d: Now click on the line movieclip you created on the stage and enter and "Instance Name" in the properties box - call it "loadBar". This magical title will allow you to update the size/scale of the line to reflect the correct percentage loaded of the entire clip or movie.
With this you have the components to create the preloader, so let's press on with that:
3: we are going to write some code in frame 1, so create a new layer, call is "actions", in addition, let's name this frame "check", in the frame properties window (this will let us refer back to this code later - keep reading - I'll explain in a sec). Make sure that this layer is only as long as the other graphical elements in the preloader - they should not extend into the regular content or else you'll see them in addition to your loaded flash stuff.
In frame one add the following script:
var nLoaded = this.getBytesLoaded();
var nTotal = this.getBytesTotal();
var percent = (nLoaded / nTotal) * 100;
loadBar._xscale = percent;
So in this frame we've declared a few variables to find out the values of the number of kilobytes loaded (nLoaded), and the total number of kilobytes that we have to download (nTotal). We do a little 4th grade math and create a percentage value of those two numbers (small number divided by big number - the percent of the big number that the small number is). We'll get something like 0.34564 or 0.85722. We need to multiply this by 100 so we can set this value into action - which is what we do on the next step: We tell loadBar (our moveiclip'd line graphic) to set it;s _xscale propery = to this percentage. You see in flash, items can be scaled from 0 to whatever percent. In this case we'll have the line go from zero to 100 percent.
this look good so far, but how are we going to get this line to move along as we download stuff? I am glad you asked! Continue to add code to this frame by adding this:
if (nLoaded==nTotal) {
gotoAndPlay("frame-where-my-content-starts")
} else {
gotoAndPlay("check")
}
Here, we're doing a status check - where we compare the values of what's loaded vs. how much we are expecting. If we've loaded everything we need, show my content. If not, start over, in which case more bytes have downloaded and our bar will "magically" increase in size.
this is the foundation for your basic preloader. With this, you can go nuts. You can display the percent as a number in the text box we created, or your can do some fancy masking and show a graphic based on the percentage. The real trick is converting the graphical items to movieclips so you can control them in ActionScript.
All that's left to do here is to have a nice transition from your preloader into your content, and your done.
For more on this, send me an email - I have several of these running in projects and could pass along a few for you to pick apart...
happy coding,
apd
|
