00:00
00:00

7,390 Views | 30 Replies

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
- Animation Corresponding with Percent

Get a percentage

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?

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.

_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!

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!

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...

_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

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

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.

-----

Response to AS: Preloaders 2006-05-31 23:31:09

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

<3 ?

Response to AS: Preloaders 2006-05-31 23:34:49

Seems pretty well done GJ

Response to AS: Preloaders 2006-05-31 23:59:27

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...

Response to AS: Preloaders 2006-06-01 04:49:15

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

Response to AS: Preloaders 2006-06-01 04:59:10

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:

Your way's alright too though :)

Response to AS: Preloaders 2006-06-01 15:40:33

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:

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.
:')

Response to AS: Preloaders 2006-06-01 15:57:05

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

Response to AS: Preloaders 2006-06-01 17:16:42

ya thats what i was aiming for.

Response to AS: Preloaders 2006-06-08 18:34:14

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.

Response to AS: Preloaders 2006-11-18 11:51:36

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

Response to AS: Preloaders 2006-11-18 11:55:22

PS i have seen ur example and wat brit moose said

Response to AS: Preloaders 2007-02-19 02:17:21

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

Response to AS: Preloaders 2007-03-04 21:10:20

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.

Response to AS: Preloaders 2007-05-24 22:08:12

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

AS: Main

Response to AS: Preloaders 2007-05-24 22:55:25

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

Response to AS: Preloaders 2007-11-02 20:28:32

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

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

Response to AS: Preloaders 2008-07-26 18:37:03

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

Response to AS: Preloaders 2008-08-14 09:19:06

What's a dynamic text box?

Response to AS: Preloaders 2008-08-14 10:44:39

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

Response to AS: Preloaders 2008-08-14 10:59:03

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

Response to AS: Preloaders 2008-08-14 11:30:51

[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.

Response to AS: Preloaders 2008-08-14 11:33:31

Dynamic Text Box *

Response to AS: Preloaders 2008-08-15 00:01:43

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?

Response to AS: Preloaders 2008-08-15 00:05:04

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

I know the name sucks...

Response to AS: Preloaders 2008-08-15 00:40:26

Ty guys! :D

Response to AS: Preloaders 2008-08-15 01:17:39

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

Response to AS: Preloaders 2008-08-15 01:21:04

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

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