AS: MAIN by Denvish
AS: Bars by Inglor
AS: Maths - Basic by T-H
AS: Varibales by Rantzien
AS: PRELOADERS
By Snubby
Sorry Denvish, but I feel I can explain how to make a preloader better that you previously did.
-----
What will I learn?
By successfully completing this tutorial you will now how to make dynamic preloaders for both movieclips and the main timeline with...
- Percentage Text
- Kilobytes / Bytes Loaded
- Loading Bars
- Animation Corresponding with Percent
Get a percentage
You will learn about getBytesLoaded() and getBytesTotal()
So to get started I'm going to make a variable called percent. This variable will be responsable for equating the actual percentage of the movie loaded.
getBytesLoaded() - returns the amount of bytes of the movie that are currently loaded.
getBytesTotal() - returns the total amount of bytes in your movie.
Math.round() - rounds a numeric value up or down.
So I'm going to take advantage of these in a simple equation...
percent = Math.round(getBytesLoaded() / getBytesTotal()) * 100;
Now let me walk you through this. To get a percentage on your grade in school, you take your mark, say 22/30, and divide 22 by 30 and then multiply by 100. So when you need to find your percentage when loading a movie, you get the bytes loaded divided by the bytes total, and then multiply by 100. I am round the division because I don't want a value of 55.2987% or 33.3333%. Simple, right?
Making a Percent Loaded Preloader
On the Main Timeline
Create 2 layers, the top named Actions, and the bottom named Percent. The Actions layer should have 2 blank keyframes, and the Percent layer should have 2 frames. On the Percent layer, create a dynamic text box with the var, 'percentText'.
Place this actionscript on the first frame...
percent = Math.round(getBytesLoaded() / getBytesTotal()) * 100;
percentText = percent+"%";
I have consatinated the percent variable with the sting "%", consatinating means to combine a sting and normal varibale. If the percent was equal to 55, this would return, '55%'. So now the percentText has the percent, but we need to constantly update this percent, so on the second blank keyframe, write...
if(_root.percent == 100){
_root.play();
}else{
gotoAndPlay(1);
}
This is a simple if else command. I have used the == to check comparison. In English, this AS states, 'If the percent is not 100%, update the percent again'.
On a Movieclip
Create a movieclip and put it on the first frame of your timeline, nothing else there. Place the following code on your movieclip.
onClipEvent(load){
_root.stop();
}
onClipEvent(enterFrame){
var percent = Math.round(_root.getBytesLoaded() / _root.getBytesTotal()) * 100;
_root.percentText = percent+"%";
if(percent == 100){
_root.play();
}
}
So first off, this script stops the main timeline with the '_root.stop()'. Then we use that percent script on the enterFrame handler, so it will constantly update. Finally, we check if the percent is 100, and if so we play the movie!
Adding the Kilobytes Loaded
1000 bytes = 1 kilobyte. So when we get the bytes loaded or total, like 'getBytesLoaded()', if we were to divide those equations by 1000 we would actually be doing, 'getKilobytesLoaded()', which isn't actually real.
On the Main Timeline
On your Percent layer, add another dynamic text box and give it the var, 'kiloText'. Add this AS on your first keyframe of the Actions layer...
kiloText = (getBytesLoaded() / 1000)+" / "+(getBytesTotal() / 1000);
This is very simple, it just consatinates quotients of the bytes loaded and bytes total, and applies that to the text box.
On a Movieclip
This is simple. Add this line of code at the start of your enterFrame clip handler.
_root.kiloText = (_root.getBytesLoaded() / 1000)+" / "+(_root.getBytesTotal() / 1000);
Presto!
Make a Loading Bar
On the Main Timeline
Make a new layer named 'load bar'. Then, create a bar movieclip, and give it the instance name 'loadBar'. On the Actions layer, add this actionscript...
loadBar._xscale = percent;
_xscale - the PERCENTAGE of a movieclip's width, so in other words out of 100. If a movieclip has a width of 1000 and I say, 'movieclip._xscale = 50;' the movieclip's width will be 500.
This actionscript just sets the _xscale property of the loadBar to the percent, making it mimic the percent.
On a Movieclip
Add this actionscript on your enterFrame clip handler,
_root.loadBar._xscale = percent;
This is the same thing with the _root. prelude infront of the loadBar, for the actual loadBar is on the main (or _root) timeline.
Animation Corresponding with Percent
On the Main Timeline
Make a new layer for your movieclip containing animation, and put it on it. Let this layer have 2 frames. Give your animation movieclip the instance name, 'animation'.
Count the number of frames in your movieclip. Say there are 25. On the first frame of your Actions layer write...
animationFrame = Math.round(percent * (25 / 100));
animation.gotoAndStop(animationFrame);
Replace the bolded number with the number of frames your animation movieclip has. This Actionscript just tells the movieclip to go to the frame of the movieclip that best represents the percent. It rounds the number because all frames in flash are whole numbers (there is no frame 1.1).
On a Movieclip
Add a new layer for your animation movieclip. Move it away from your preloader movieclip, or they will overlap. Add the following AS to the animation movieclip...
onClipEvent(enterFrame){
var animationFrame = Math.round(percent * (25 / 100));
this.gotoAndStop(animationFrame);
}
Like the other script, replace the bolded number with the number of frames your animation movieclip has.
-----
Well, that is my tutorial on Preloaders. Please post comments. I hope you have enjoyed it.