AS: Preloaders

[Snubby]

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.

[Snubby]

This took me like an hour to write, surely somebody has something to say...

<3 ?

[Decade-Studios]

Seems pretty well done GJ

[Snubby]

At 5/31/06 11:57 PM, bkdude wrote: clockcrew.com has a preloader tutorial. im not gonna get into actioscript at the moment tho. im ok with the NG preloader :-)

hey thats great. i personally hate the NG loader because it is so overused! grrr...

[fuzz]

Good job snubster,
very well explained i think anyone could understand it

[Paranoia]

Yeah, although for the load bar I wouldn't reccomend using the rounded percentage. It's much smoother if you just use the unrounded value. I'd use something like:

decLoaded = _root.getBytesLoaded() / _root.getBytesTotal();
_root.loadBar._xscale = _root.decLoaded * 100;

Your way's alright too though :)

[Snubby]

At 6/1/06 04:59 AM, _Paranoia_ wrote: Yeah, although for the load bar I wouldn't reccomend using the rounded percentage. It's much smoother if you just use the unrounded value. I'd use something like:

decLoaded = _root.getBytesLoaded() / _root.getBytesTotal();
_root.loadBar._xscale = _root.decLoaded * 100;

Your way's alright too though :)

doh! yup ur tha man. I did it quick and coppied the AS from previous sections of the tutorial as not to write it twice, and forgot to delete the rounding.
:')

[Simple-Logistics]

It's good, it's only a bit the same shit Denvish wrote but more detailed.

[Snubby]

ya thats what i was aiming for.

[BritishMoose]

At 6/1/06 04:49 AM, -fuzz- wrote: Good job snubster,
very well explained i think anyone could understand it

He's right, I did understand.

I don\t get what you mean when you say "animation" for the preloader though. Any chance you could show an example?

[Snubby]

At 6/3/06 12:47 PM, British_Moose wrote:

At 6/1/06 04:49 AM, -fuzz- wrote: Good job snubster,
very well explained i think anyone could understand it

He's right, I did understand.

I don\t get what you mean when you say "animation" for the preloader though. Any chance you could show an example?

http://www.snubbyland.com

on the News page and the FAQ page there is a loader. The animation in that case would be the squares that light up around the title.

[FogOut9921]

snubs , i still don't understand the 'animation' thing.
Could ya help a man out?

[FogOut9921]

PS i have seen ur example and wat brit moose said

[Penboy]

Wow this is a great NG-Tutorial; so many views, yet not so many replys D:
Nice job :D

[Memnarch]

Thanks, I slimed though it and I think I understand most of it for now. I didn't have flash open following along, but I'll try it on my own and see if I mess anything up, and if I do I can just come back here to see what I did wrong.
Once again thanks, I've been looking to learn how to make my own preloader, and yeah the NG preloader is overused.

[ChilliDog]

This is great, it really helped me out. Thanks Snubby!

[wsp]

DAMN YOU i had the EXACT SAME idea just the other day and was gonna make an AS: Main thread on it, comparing to test scores in school, but i was too lazy and didn't want to and u beat me too it.... Very nice explainations and very in-depth btw :D

[hashbrown]

now give this to me in 3.0 >:C

[ekagauranga]

At 5/24/07 10:57 PM, hashbrown wrote: now give this to me in 3.0 >:C

preloader for As3
http://www.bit-101.com/blog/?p=946

[Zeppekk]

Anyone care to help me out? I'm trying to make a preloader with a masked bar (It's going to look a bit like the one on 'The last stand' 1 & 2)

http://www.newgrounds.com/bbs/topic/9436 41

[rickeyricksricky]

What's a dynamic text box?

[14hourlunchbreak]

I like your tutorial more than Denvish's preloader tut. I actually learned a few things.

[rickeyricksricky]

At 8/14/08 10:44 AM, 14hourlunchbreak wrote: I like your tutorial more than Denvish's preloader tut. I actually learned a few things.

So what's a dynamic text box? :p

[Xivectro]

[quote] I have consatinated the percent variable with the sting "%", consatinating means to combine a sting and normal varibale. [/quote]

Not trying to be an ass, but did you mean, "Concatenating", the programming term?

Just didn't want to confuse anyone.

PS: The dynamic text box is the feature, in Flash, that does just that, it makes text dynamic.
Meaning your text does not always have to be or say the same thing.
And you update or change what it is within the code using a variable that links to the
dynamis text box.

[Xivectro]

Dynamic Text Box *

[rickeyricksricky]

PS: The dynamic text box is the feature, in Flash, that does just that, it makes text dynamic.
Meaning your text does not always have to be or say the same thing.
And you update or change what it is within the code using a variable that links to the
dynamis text box.

How do I create it?

[VinceDash]

you create a normal text box modify its type in the upper left corner of its properties.

[rickeyricksricky]

Ty guys! :D

[rickeyricksricky]

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.

Ok, not tryin' to be an ass too here but 1 Kb = 1024 b

[rickeyricksricky]

At 8/15/08 01:17 AM, rickeyricksricky wrote:

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.

Ok, not tryin' to be an ass too here but 1 Kb = 1024 b

Nvm, your rite, I'm wrong.