00:00
00:00
Newgrounds Background Image Theme

Chan99 just joined the crew!

We need you on the team, too.

Support Newgrounds and get tons of perks for just $2.99!

Create a Free Account and then..

Become a Supporter!

AS: Preloader

18,831 Views | 48 Replies
New Topic Respond to this Topic

AS: Preloader 2005-02-25 08:26:23


AS: Preloader

Basics

To create a basic preloader, you need two variables:
_root.getBytesTotal(); //grabs the size of the swf (in bytes)
_root.getBytesLoaded(); //grabs the amount of swf loaded (in bytes)

There are various ways to go about using these variables. In the simplest form you would just need to creat a Dynamic Text Box on frame one of your movie, give it the Var "percent".
On the first frame of your movie, add these actions

var bytes = _root.getBytesTotal();
var bytes_loaded = _root.getBytesLoaded();
percent = int((bytes_loaded)/(bytes)*100) + "%";
if (bytes_loaded == bytes) {gotoAndPlay(3)}

And on the second frame, gotoAndPlay(1)

This assumes that your movie starts on frame 3.

To test your preloader, press CTRL+ENTER twice. You don't have to upload it to test it!
While in the swf window, use VIEW>DOWNLOAD SETTINGS to change the simulated bandwidth.

------------------------------------------------------------------------

Using an MC

It's generally a bit tidier, and more flexible to use an MC. Create 2 Dynamic Text Boxes, and give them the Vars "pl1" and "pl2".
Select them both, convert to Movie Clip (press F8).
Create a blank keyframe on the timeline at Frame 2, and add a stop(); action
Drag an Instance of the MC to the stage. Select it, and add these actions.

onClipEvent(load){
totalb=_root.getBytesTotal();
totalkb = int((totalb)/1024);
}
onClipEvent(enterFrame){
var loadedb = _root.getBytesLoaded();
if(loadedb == totalb){
_root.gotoAndStop(3); //If movie is loaded
}else{
loadedkb = int(loadedb/1024);
percent = (loadedb/totalb)*100;
pl1=""+int(percent)+"%";
pl2="" + loadedkb + " / " + totalkb + " kb";
}
}

------------------------------------------------------------------------

Variations
By using the percent calculation, you can do all sorts of cool things. Here are a couple of fairly uncomplicated ones:

Progress bar

Create a new MC. Inside it, draw a long thin rectangle. Set the bar's left-hand end to x=0, y=0 in the PROPERTIES bar.
Drag a copy of the bar to stage (on the same frame as your preloader MC, usually Frame 2), and give it the Instance Name: "progbar"
Change the actions on the preloader MC:

onClipEvent(load){
totalb=_root.getBytesTotal();
totalkb = int((totalb)/1024);
barwidth=_root.progbar._width;
}
onClipEvent(enterFrame){
var loadedb = _root.getBytesLoaded();
if(loadedb == totalb){
_root.gotoAndStop(3); //If movie is loaded
}else{
loadedkb = int(loadedb/1024);
percent = (loadedb/totalb)*100;
_root.progbar._width=(barwidth/100)*percent;
pl1=""+int(percent)+"%";
pl2="" + loadedkb + " / " + totalkb + " kb";
}
}

There's no reason why you can't place the progbar inside the preloader MC, and drop the _root from both of the italicised lines - the choice is yours

Progress animation

Create a 100-frame progress animation (eg, a clock face going from 12 to 12)
Place it on the stage (on the same frame as your preloader MC, usually Frame 2), and give it the Instance Name: "planimation"
Change the actions on the preloader MC:

onClipEvent(load){
totalb=_root.getBytesTotal();
totalkb = int((totalb)/1024);
}
onClipEvent(enterFrame){
var loadedb = _root.getBytesLoaded();
if(loadedb == totalb){
_root.gotoAndStop(3); //If movie is loaded
}else{
loadedkb = int(loadedb/1024);
percent = (loadedb/totalb)*100;
_root.planimation.gotoAndStop(int(percent));
pl1=""+int(percent)+"%";
pl2="" + loadedkb + " / " + totalkb + " kb";
}
}

I think that's enough examples. You can do all sorts of other things using the percent, by including it in equations with Stage.width, Stage.height, _alpha, _height, _width, _x, _y, etc. Remember, the preloader is the first impression that viewers will have of your Flash, so it's worth spending a few hours creating a smart, original one.

------------------------------------------------------------------------

Tip: I recommend placing your Preloader MC on frame 2 of a movie, and placing a simple text "Loading" on frame one. This means that the viewer will be able to see something while the preloader is loading, rather than a blank white rectangle.

More preloader tutorials:
http://www.newgrounds.com/portal/view.php?id=175909
http://www.newgrounds.com/portal/view.php?id=39399
http://www.bestflashanimationsite.com/tutorials/3/
http://www.actionscripts.org/t...r/Smooth_PreLoader/index.shtml

AS: Sections
AS: Main
AS: Basic Movement
AS: Random Movement
AS: Sound


- - Flash - Music - Images - -

BBS Signature

Response to AS: Preloader 2005-02-25 10:46:28


Wow, Denvish, you really went all out on this one. Hopefully this may become sticky. I had no idea you could hit Ctrl Enter twice and see the simulated preloader! Thanks a lot man!


No more animated sigs. :(

BBS Signature

Response to AS: Preloader 2005-02-25 10:49:19


Well i think there should be a stickied topic with a link to all the helpful tutorials on the boards, to prevent all questions being answered time again. Good work with the tutorials Denvish. :D

Response to AS: Preloader 2005-02-25 10:57:55


Thanks guys. I believe Tom is seriously thinking about (finally) putting a Tutorials section up, so we'll see how that goes. I think it'll mostly be submitted Flash tutorials (movies), but hopefully I'll be able to persuade him to add a link to these thingies.


- - Flash - Music - Images - -

BBS Signature

Response to AS: Preloader 2005-02-25 11:27:58


good stuff... this should prob go in the flash help section of the portal.. or even just a link..

Response to AS: Preloader 2005-03-06 15:05:52


wow dude. that should keep me busy for a while. thanks a lot man. i really appreciate it. one more question though, i see a lot in different tutorials about using multiple layers for a preloader, something about it being a good idea to seperate objects from script. any guidelines for that?

Response to AS: Preloader 2005-03-06 15:08:38


At 2/25/05 10:49 AM, Sulphent wrote: Well i think there should be a stickied topic with a link to all the helpful tutorials on the boards, to prevent all questions being answered time again. Good work with the tutorials Denvish. :D

agreed. there are so many recurring questions in here and the topics to a thread don't always relate to the actual content, and newbs get detoured becuase they don't see or can't find exactly what they're looking for when they search the BBS. i mean the flash section http://newgrounds.com/flash/ is about as close as it gets.

Response to AS: Preloader 2005-08-01 23:42:24


wow, thanx Denvish. I'm already using the MX Control bar you made for movie control *(fast forwarding and rewinding and al lthat) and i change the colors to fit the movie. This is awesome...atta way guy

Response to AS: Preloader 2005-08-02 01:53:48


My apologies if I sound like an absolute idiot here. But so far this has been the closest I have come to an answer.
My question though, is how do you actually add the pre-loader to the movie?
There are a hundred tutorials on how to make the preloader and whatnot, but not a single one says, do this and your movie will now load with the loader on it.
Do I import it in, or what exactly?
I know other people can't figure this out either, otherwise there'd be a lot less submissions without preloaders on them.

Response to AS: Preloader 2005-08-09 01:41:59


Just copy the frames into ur movie


BBS Signature

Response to AS: Preloader 2005-08-09 02:06:52


It works!!

Response to AS: Preloader 2005-08-09 04:06:22


heres another variation that i like to use:

class Preloader
{
static var total:Number;
static var loaded:Number;
private static var inter:Number;
static var update:Function;
static var onComplete:Function;
private static function loop(Void):Void
{
Preloader.loaded = _root.getBytesLoaded();
var perc:Number = Preloader.loaded / Preloader.total;
Preloader.update(perc * 100);
if (perc >= 1)
{
clearInterval(Preloader.inter);
Preloader.onComplete();
}
}
static function init(Void):Void
{
total = _root.getBytesTotal();
loaded = 0;
inter = setInterval(loop, 50);
update = new Function();
onComplete = new Function();
}
}

then all you have to do in your fla is:

Preloader.init();
Preloader.onComplete = function()
{
gotoAndPlay(3);
}

if you have a progress bar:
Preloader.onUpdate = function(percentage:Number)
{
//whatever for eg. progressbar.gotoAndStop(percentage+1);
}

Response to AS: Preloader 2005-08-09 04:13:30


wait i just realised in the class the function is named 'update' but ive said you would use onUpdate (ie change the the function in the class from 'update' to 'onUpdate')

if you wanted to be neater with your memory handling you could also delete all the variables from Preloader at the end as it only needs to be used once per movie

ie

class Preloader
{
static var total:Number;
static var loaded:Number;
private static var inter:Number;
static var onUpdate:Function;
static var onComplete:Function;
private static function loop(Void):Void
{
Preloader.loaded = _root.getBytesLoaded();
var perc:Number = Preloader.loaded / Preloader.total;
Preloader.onUpdate(perc * 100);
if (perc >= 1)
{
clearInterval(Preloader.inter);
Preloader.onComplete();
Preloader.end();
}
}
static function init(Void):Void
{
total = _root.getBytesTotal();
loaded = 0;
inter = setInterval(loop, 50);
onUpdate = new Function();
onComplete = new Function();
}
private static function end(Void):Void
{
delete total;
delete loaded;
delete inter;
delete onUpdate;
delete onComplete;
delete loop;
delete init
delete end;
}
}

Response to AS: Preloader 2005-08-10 03:55:48


holy moly, lotta stuff in there i dont understand yet. but i'll come back to this when i need a preloader. good job


BBS Signature

Response to AS: Preloader 2005-08-29 06:02:38


simple preloader code :

_root.stop();
function onEnterFrame (Void){
if(_root.getBytesLoaded()==_root.getBytesT
otal()){
_root.play();
delete onEnterFrame;
}
}

place it on any farme you feel like it and it'll preloade :P

Response to AS: Preloader 2005-11-12 03:46:06


How do you set the bars left hand end to _x and _y well, whatever it is?

Response to AS: Preloader 2005-12-12 02:52:11


Oh wow.

I'm learning a lot tonight.I've gotten print in,context menus,and now preloaders!

For a real basic preloader...

Create a Dynamic text box.Give it the Variable of "bytes" and the instance of "bytes1".Make sure the box is long.

Now insert 2 keyframes.On the first,add these actions...

var amt = _root.getBytesLoaded();
var amt_loaded = _root.getBytesTotal();
bytes = (amt_loaded)*(amt)+" Bytes Loaded";
_root.bytes1.selectable = false;
if (amt_loaded == amt) {
_root.gotoAndPlay(3);
}

Second...

gotoAndPlay(1);

Third...

_root.play();

You have a full working really basic and easy to understand preloader ;)


wat

Response to AS: Preloader 2005-12-12 07:24:55


At 12/12/05 02:52 AM, -Thomas- wrote: _root.gotoAndPlay(3);
}
Third...

_root.play();

Correct me if I'm wrong, but on the third frame you don't need play, because you say when it full loads to goto and play 3.

Am I right?


BBS Signature

Response to AS: Preloader 2005-12-12 11:58:38


At 12/12/05 07:24 AM, Ssilver7 wrote: Am I right?

Yes you are


BBS Signature

Response to AS: Preloader 2005-12-12 12:10:06


Instead of having 2 keyframes I think you can have:

onEnterFrame = function(){
var amt = _root.getBytesLoaded();
var amt_loaded = _root.getBytesTotal();
bytes = (amt_loaded)*(amt)+" Bytes Loaded";
_root.bytes1.selectable = false;
if (amt_loaded == amt) {
_root.gotoAndPlay(3);
}
}


BBS Signature

Response to AS: Preloader 2005-12-12 12:10:24


Yes, but on the 3rd frame, it should be _root.stop(); -- and that is where the PLAY button is, etc., no?


"Actually, the server timed out trying to remove all your posts..."

-TomFulp

Response to AS: Preloader 2005-12-12 12:11:17


Yeah or

_root.gotoAndstop(3);


BBS Signature

Response to AS: Preloader 2005-12-12 12:12:14


At 12/12/05 12:11 PM, GuyWithHisComp wrote: Yeah or

_root.gotoAndstop(3);

_root.gotoAndStop(3);

;-)


"Actually, the server timed out trying to remove all your posts..."

-TomFulp

Response to AS: Preloader 2005-12-12 12:13:21


Yeah, my mistake :P


BBS Signature

Response to AS: Preloader 2005-12-13 17:48:52


Well then you can call me a preloader perfectionist.


wat

Response to AS: Preloader 2005-12-13 17:56:50


you know whats even easier

animate a bar with 100 frams add this to it

onClipEvent(enterFrame){
this.gotoAndStop(_root.getBytesLoaded()/_r
oot.getBytesTotal()*100)
if(_root._root.getBytesLoaded() != _root.getBytesTotal()){
_root.stop()
}else{
play()
}
}
simple

Response to AS: Preloader 2005-12-13 17:58:22


At 12/13/05 05:56 PM, shazwoogle wrote: you know whats even easier

oops found an error =0

onClipEvent(enterFrame){
this.gotoAndStop(Math.round(_root.getBytes
Loaded()/_root.getBytesTotal()*100))
if(_root._root.getBytesLoaded() != _root.getBytesTotal()){
_root.stop()
}else{
play()
}
}

that will work better

Response to AS: Preloader 2005-12-13 18:02:24


At 12/13/05 05:56 PM, shazwoogle wrote: animate a bar with 100 frams add this to it

That takes up alot of file-size, and if your movie isnt 100kb, it will be laggy. Make a bar, instance name 'bar' and use this;

onClipEvent(load) {
bard = _root.bad_width;
}
onClipEvent(enterFrame) {
loaded = Math.round(_root.getBytesLoaded() / 1024);
total = Math.round(_root.getBytesTotal() / 1024);
perc = loaded/total;
barwidth = bard * perc;
bar._width = barwidth;
}

Thats what I used on my preloader ^.^


"Actually, the server timed out trying to remove all your posts..."

-TomFulp

Response to AS: Preloader 2006-02-20 22:42:01


What if i want to make my pre-loader display kilobytes instead of bytes?


British Columbians: Speak out against the new meal tax or you'll be paying 7% tax on top of the 5% you already pay. http://www2.nomealtax.ca/

Response to AS: Preloader 2006-02-20 22:53:03


At 2/20/06 10:42 PM, Bi0Reaper wrote: What if i want to make my pre-loader display kilobytes instead of bytes?

That script is already made to display kilobytes.


ey

BBS Signature