Preloader
| Category | : Flash | Views | : 25978 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : preloader.zip | ||
| Result | : See the result | ||||
Let’s say you want to put your movie on the web, you would also want to use a preloader to inform the user of the downloading progress.
You need to have two frames, the first is the preloader and the second is the rest of your movie. In this case the second frame is just an image:
So, to start coding the preloader you need to create these things:
Now open the actions for the first frame:
//stops the frames, so we don’t leave the preloader before every thing is loaded
stop();
//declare the variable that will hold the loaded bytes
var loaded_bytes = 0;
//variable for the total bytes
var total_bytes = 0;
//the percentage in numbers
var percentage;
//the percentage with "%" , used in the dynamic text
var percentageText = "";
this.onEnterFrame = function()
{
total_bytes = _root.getBytesTotal();
loaded_bytes = _root.getBytesLoaded();
percentage = Math.round(loaded_bytes / total_bytes * 100)
bar._xscale = percentage;
percentageText =percentage + "%";
if (loaded_bytes == total_bytes)
{
gotoAndStop(2);
}
}
Here we use two functions from flash.
The first one gets the bytes for the entire movie and the second the loaded bytes so far.
total_bytes = _root.getBytesTotal();
loaded_bytes = _root.getBytesLoaded();
Now we use a basic calculation to find the percentage loaded and we round that number using Math.round().
percentage = Math.round(loaded_bytes / total_bytes * 100)
Using the percentage, we scale the Bar Movie Clip.Other methods can be used to make a progress bar, but this one is much simpler.
bar._xscale = percentage;
Add "%" to use in the text:
percentageText =percentage + "%";
If everything is loaded we call gotoAndStop(frame); to go to frame 2.
if (loaded_bytes == total_bytes)
{
gotoAndStop(2);
}
We finished, but if you test the movie you will probably not see it working, because the movie is on your computer so it loads VERY fast.
Luckily Flash let us simulate a download. Press Ctrl + Enter, go to "View", "Download Settings" and select a low speed.
Then click "Simulate Download".
That's it, see you in next tutorial!
 |
 |
 |
 |
 |