Be a Supporter!

AS: Preloaders

  • 5,922 Views
  • 32 Replies
New Topic Respond to this Topic
Snubby
Snubby
  • Member since: Dec. 4, 2004
  • Offline.
Forum Stats
Member
Level 21
Game Developer
AS: Preloaders May. 31st, 2006 @ 09:28 PM Reply

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
Snubby
  • Member since: Dec. 4, 2004
  • Offline.
Forum Stats
Member
Level 21
Game Developer
Response to AS: Preloaders May. 31st, 2006 @ 11:31 PM Reply

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

<3 ?

Decade-Studios
Decade-Studios
  • Member since: May. 29, 2006
  • Offline.
Forum Stats
Member
Level 03
Blank Slate
Response to AS: Preloaders May. 31st, 2006 @ 11:34 PM Reply

Seems pretty well done GJ

Snubby
Snubby
  • Member since: Dec. 4, 2004
  • Offline.
Forum Stats
Member
Level 21
Game Developer
Response to AS: Preloaders May. 31st, 2006 @ 11:59 PM Reply

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
fuzz
  • Member since: Jun. 2, 2004
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Preloaders Jun. 1st, 2006 @ 04:49 AM Reply

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

Paranoia
Paranoia
  • Member since: Apr. 22, 2005
  • Offline.
Forum Stats
Member
Level 35
Game Developer
Response to AS: Preloaders Jun. 1st, 2006 @ 04:59 AM Reply

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


BBS Signature
Snubby
Snubby
  • Member since: Dec. 4, 2004
  • Offline.
Forum Stats
Member
Level 21
Game Developer
Response to AS: Preloaders Jun. 1st, 2006 @ 03:40 PM Reply

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
Simple-Logistics
  • Member since: May. 10, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: Preloaders Jun. 1st, 2006 @ 03:57 PM Reply

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

Snubby
Snubby
  • Member since: Dec. 4, 2004
  • Offline.
Forum Stats
Member
Level 21
Game Developer
Response to AS: Preloaders Jun. 1st, 2006 @ 05:16 PM Reply

ya thats what i was aiming for.

BritishMoose
BritishMoose
  • Member since: Oct. 18, 2003
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Preloaders Jun. 3rd, 2006 @ 12:47 PM Reply

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?


Never forget...

BBS Signature
Snubby
Snubby
  • Member since: Dec. 4, 2004
  • Offline.
Forum Stats
Member
Level 21
Game Developer
Response to AS: Preloaders Jun. 8th, 2006 @ 06:34 PM Reply

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
FogOut9921
  • Member since: Sep. 16, 2006
  • Offline.
Forum Stats
Member
Level 06
Blank Slate
Response to AS: Preloaders Nov. 18th, 2006 @ 11:51 AM Reply

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

FogOut9921
FogOut9921
  • Member since: Sep. 16, 2006
  • Offline.
Forum Stats
Member
Level 06
Blank Slate
Response to AS: Preloaders Nov. 18th, 2006 @ 11:55 AM Reply

PS i have seen ur example and wat brit moose said

Penboy
Penboy
  • Member since: Jun. 17, 2006
  • Offline.
Forum Stats
Member
Level 17
Artist
Response to AS: Preloaders Feb. 19th, 2007 @ 02:17 AM Reply

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

Memnarch
Memnarch
  • Member since: Apr. 5, 2004
  • Offline.
Forum Stats
Member
Level 24
Blank Slate
Response to AS: Preloaders Mar. 4th, 2007 @ 09:10 PM Reply

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
ChilliDog
  • Member since: Feb. 16, 2007
  • Offline.
Forum Stats
Member
Level 16
Blank Slate
Response to AS: Preloaders May. 24th, 2007 @ 10:08 PM Reply

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


AS: Main

Don't read this sentence.

wsp
wsp
  • Member since: Sep. 10, 2006
  • Offline.
Forum Stats
Member
Level 03
Blank Slate
Response to AS: Preloaders May. 24th, 2007 @ 10:55 PM Reply

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
hashbrown
  • Member since: Jul. 7, 2005
  • Offline.
Forum Stats
Member
Level 16
Blank Slate
Response to AS: Preloaders May. 24th, 2007 @ 10:57 PM Reply

now give this to me in 3.0 >:C


BBS Signature
ekagauranga
ekagauranga
  • Member since: Aug. 15, 2007
  • Offline.
Forum Stats
Member
Level 02
Blank Slate
Response to AS: Preloaders Nov. 2nd, 2007 @ 08:28 PM Reply

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
Zeppekk
  • Member since: Jun. 28, 2005
  • Offline.
Forum Stats
Member
Level 13
Blank Slate
Response to AS: Preloaders Jul. 26th, 2008 @ 06:37 PM Reply

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
rickeyricksricky
  • Member since: Aug. 12, 2008
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: Preloaders Aug. 14th, 2008 @ 09:19 AM Reply

What's a dynamic text box?

14hourlunchbreak
14hourlunchbreak
  • Member since: Jul. 27, 2007
  • Offline.
Forum Stats
Member
Level 30
Game Developer
Response to AS: Preloaders Aug. 14th, 2008 @ 10:44 AM Reply

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


BBS Signature
rickeyricksricky
rickeyricksricky
  • Member since: Aug. 12, 2008
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: Preloaders Aug. 14th, 2008 @ 10:59 AM Reply

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
Xivectro
  • Member since: Oct. 5, 2006
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to AS: Preloaders Aug. 14th, 2008 @ 11:30 AM Reply

[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
Xivectro
  • Member since: Oct. 5, 2006
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to AS: Preloaders Aug. 14th, 2008 @ 11:33 AM Reply

Dynamic Text Box *

rickeyricksricky
rickeyricksricky
  • Member since: Aug. 12, 2008
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: Preloaders Aug. 15th, 2008 @ 12:01 AM Reply

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
VinceDash
  • Member since: Nov. 6, 2007
  • Offline.
Forum Stats
Member
Level 14
Blank Slate
Response to AS: Preloaders Aug. 15th, 2008 @ 12:05 AM Reply

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


I know the name sucks...

BBS Signature
rickeyricksricky
rickeyricksricky
  • Member since: Aug. 12, 2008
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: Preloaders Aug. 15th, 2008 @ 12:40 AM Reply

Ty guys! :D

rickeyricksricky
rickeyricksricky
  • Member since: Aug. 12, 2008
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: Preloaders Aug. 15th, 2008 @ 01:17 AM Reply

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
rickeyricksricky
  • Member since: Aug. 12, 2008
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: Preloaders Aug. 15th, 2008 @ 01:21 AM Reply

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.