Be a Supporter!

AS: Preloader

  • 15,108 Views
  • 49 Replies
New Topic Respond to this Topic
Denvish
Denvish
  • Member since: Apr. 25, 2003
  • Offline.
Forum Stats
Member
Level 46
Blank Slate
AS: Preloader Feb. 25th, 2005 @ 08:26 AM Reply

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
orb
orb
  • Member since: May. 1, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Preloader Feb. 25th, 2005 @ 10:46 AM Reply

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
Sulphent
Sulphent
  • Member since: Dec. 4, 2003
  • Offline.
Forum Stats
Member
Level 06
Blank Slate
Response to AS: Preloader Feb. 25th, 2005 @ 10:49 AM Reply

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

Denvish
Denvish
  • Member since: Apr. 25, 2003
  • Offline.
Forum Stats
Member
Level 46
Blank Slate
Response to AS: Preloader Feb. 25th, 2005 @ 10:57 AM Reply

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
isthatlegal
isthatlegal
  • Member since: May. 25, 2003
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Preloader Feb. 25th, 2005 @ 11:27 AM Reply

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

rickstertherockstar
rickstertherockstar
  • Member since: Mar. 1, 2005
  • Offline.
Forum Stats
Member
Level 05
Blank Slate
Response to AS: Preloader Mar. 6th, 2005 @ 03:05 PM Reply

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?

rickstertherockstar
rickstertherockstar
  • Member since: Mar. 1, 2005
  • Offline.
Forum Stats
Member
Level 05
Blank Slate
Response to AS: Preloader Mar. 6th, 2005 @ 03:08 PM Reply

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.

TheCrazyPotato
TheCrazyPotato
  • Member since: May. 10, 2005
  • Offline.
Forum Stats
Member
Level 13
Blank Slate
Response to AS: Preloader Jul. 27th, 2005 @ 10:09 AM Reply

Thanks alot Denvish! I'll try to get this working later.. now I can start worrying about getting all the tweening and layering done right. Maybe I'll even get a crappy submission to pass before the 30 day trial! ;D

Mloriendell
Mloriendell
  • Member since: Jan. 9, 2003
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to AS: Preloader Aug. 1st, 2005 @ 11:42 PM Reply

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

Sheol-Jam
Sheol-Jam
  • Member since: Mar. 18, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: Preloader Aug. 2nd, 2005 @ 01:53 AM Reply

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.

DarthRaver
DarthRaver
  • Member since: Oct. 6, 2004
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Preloader Aug. 9th, 2005 @ 01:41 AM Reply

Just copy the frames into ur movie


BBS Signature
Dbag
Dbag
  • Member since: Oct. 13, 2002
  • Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to AS: Preloader Aug. 9th, 2005 @ 02:06 AM Reply

It works!!

dELtaluca
dELtaluca
  • Member since: Apr. 16, 2004
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS: Preloader Aug. 9th, 2005 @ 04:06 AM Reply

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);
}


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature
dELtaluca
dELtaluca
  • Member since: Apr. 16, 2004
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS: Preloader Aug. 9th, 2005 @ 04:13 AM Reply

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;
}
}


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature
FloydBoy
FloydBoy
  • Member since: Apr. 26, 2003
  • Offline.
Forum Stats
Member
Level 18
Blank Slate
Response to AS: Preloader Aug. 10th, 2005 @ 03:55 AM Reply

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
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Preloader Aug. 29th, 2005 @ 06:02 AM Reply

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

neowolf22964
neowolf22964
  • Member since: May. 1, 2004
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to AS: Preloader Nov. 12th, 2005 @ 03:46 AM Reply

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

Thomas
Thomas
  • Member since: Feb. 14, 2005
  • Offline.
Forum Stats
Member
Level 13
Musician
Response to AS: Preloader Dec. 12th, 2005 @ 02:52 AM Reply

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
a compessor wil raise the volume while lowering the db - chronamut

Ssilver7
Ssilver7
  • Member since: Feb. 19, 2004
  • Offline.
Forum Stats
Member
Level 35
Blank Slate
Response to AS: Preloader Dec. 12th, 2005 @ 07:24 AM Reply

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
Claxor
Claxor
  • Member since: Oct. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS: Preloader Dec. 12th, 2005 @ 11:58 AM Reply

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

Yes you are


BBS Signature
GuyWithHisComp
GuyWithHisComp
  • Member since: Nov. 10, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS: Preloader Dec. 12th, 2005 @ 12:10 PM Reply

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
IWantSomeCookies
IWantSomeCookies
  • Member since: Aug. 20, 2004
  • Offline.
Forum Stats
Member
Level 13
Blank Slate
Response to AS: Preloader Dec. 12th, 2005 @ 12:10 PM Reply

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

GuyWithHisComp
GuyWithHisComp
  • Member since: Nov. 10, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS: Preloader Dec. 12th, 2005 @ 12:11 PM Reply

Yeah or

_root.gotoAndstop(3);


BBS Signature
IWantSomeCookies
IWantSomeCookies
  • Member since: Aug. 20, 2004
  • Offline.
Forum Stats
Member
Level 13
Blank Slate
Response to AS: Preloader Dec. 12th, 2005 @ 12:12 PM Reply

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

GuyWithHisComp
GuyWithHisComp
  • Member since: Nov. 10, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS: Preloader Dec. 12th, 2005 @ 12:13 PM Reply

Yeah, my mistake :P


BBS Signature
Thomas
Thomas
  • Member since: Feb. 14, 2005
  • Offline.
Forum Stats
Member
Level 13
Musician
Response to AS: Preloader Dec. 13th, 2005 @ 05:48 PM Reply

Well then you can call me a preloader perfectionist.


wat
a compessor wil raise the volume while lowering the db - chronamut

shazwoogle
shazwoogle
  • Member since: Sep. 27, 2004
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: Preloader Dec. 13th, 2005 @ 05:56 PM Reply

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

shazwoogle
shazwoogle
  • Member since: Sep. 27, 2004
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: Preloader Dec. 13th, 2005 @ 05:58 PM Reply

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

IWantSomeCookies
IWantSomeCookies
  • Member since: Aug. 20, 2004
  • Offline.
Forum Stats
Member
Level 13
Blank Slate
Response to AS: Preloader Dec. 13th, 2005 @ 06:02 PM Reply

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

Bi0Reaper
Bi0Reaper
  • Member since: Jun. 24, 2005
  • Offline.
Forum Stats
Member
Level 13
Blank Slate
Response to AS: Preloader Feb. 20th, 2006 @ 10:42 PM Reply

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/