AS 3 Preloader

[jbruso]

Hi Everyone,

I have Googled this to death, looking all over the net for a simple tutorial...

I hate to be the newbie... but, can anyone point me to a good AS 3 Preloader script, or tutorial?

Thanks :)

:confused: John

[plutocrat]

It is fortunately much easier than AS2.

Make a new document: "DocClass.as":

package {
import flash.display.MovieClip;
import flash.events.*;
//Other Main Timeline imports go here! Don't forget!
public class DocClass extends MovieClip {
public function DocClass() {
this.loaderInfo.addEventListener(Event.COMPLETE, initApplication);
this.loaderInfo.addEventListener(ProgressEvent.PRO GRESS, showProgress);
}
public function showProgress(theProgress:ProgressEvent):void {
var percent:Number = Math.round((theProgress.bytesLoaded / theProgress.bytesTotal )*100 );
trace(percent + " %");
this.graphics.clear()
this.graphics.lineStyle(1, 0x000000, 1)
this.graphics.beginFill(0x000000)
this.graphics.drawRect(100,100,percent,10)
}
public function initApplication(myEvent:Event):void {
trace("Loaded !");
}
}
}
(tweaked from the (faulty) original found here (http://newmovieclip.wordpress.com/2007/04/30/more-about-preloading-in-flash-cs3/))

Then make that class your document class (publish settings/AS settings), and you are away.

It is probably the ugliest preloader graphic ever concieved, but it works :)

Best of luck. (You might want to remove those listeners as well, but that comes later...)

[jbruso]

Hi Plutocrat,

Thanks for the script. I added the file to the document class but it doesn't appear to be working when I try the test movie/bandwidth profiler or if I publish it directly.

Here's the .swf:
http://dev.sheridan.edu/newsite/splash_sheridan.html

here's the .fla:
http://dev.sheridan.edu/newsite/File_with_bug2.fla

Any ideas?

[plutocrat]

Read carefully:

1. Create NEW actionscript (not fla) file called DocClass.as and save it in the same dir as your main fla file.
2. Put my code in it.
3. Make the main fla (i.e. your fla file that holds your main timeline) have a document class of DocClass and click the little green arrow to check that the class exists.
4. Run it.

[tencity]

Unfortunately those Events don't reliably work in Internet Explorer.

See this thread for more information:

http://www.actionscript.org/forums/showthread.php3?t=136345&highlight=timeline+preloader

I tried your code just in case (and I had my fingers crossed) but no luck. It would work for other external swfs, but not the main timeline.

I've been using a timer that fires every 100ms to check how the loading is doing.

[plutocrat]

But it does work if you put it all in the document class (i.e. an external file) like I said! No code at all goes on the main timeline!

Should I post a full tutorial?

[tencity]

Yes please.

If you can get your code to work in Internet Explorer on a PC (not in Flash itself, where I agree it does work) I would love to see it. It would really help me out.

[slalonde44]

hey plutocrat... i got your preloader to work, which is awsome.. thanks for that.. but do you have any idea how i could incorporate a percentage indicator in this preloader.. ive tried everything except the right way..

thanks


//code from plutocrat

ActionScript Code:
package {
import flash.display.MovieClip;
import flash.events.*;
//Other Main Timeline imports go here! Don't forget!
public class DocClass extends MovieClip {
public function DocClass() {
this.loaderInfo.addEventListener(Event.COMPLETE, initApplication);
this.loaderInfo.addEventListener(ProgressEvent.PRO GRESS, showProgress);
}
public function showProgress(theProgress:ProgressEvent):void {
var percent:Number = Math.round((theProgress.bytesLoaded / theProgress.bytesTotal )*100 );
trace(percent + " %");
this.graphics.clear()
this.graphics.lineStyle(1, 0x000000, 1)
this.graphics.beginFill(0x000000)
this.graphics.drawRect(100,100,percent,10)
}
public function initApplication(myEvent:Event):void {
trace("Loaded !");
}
}
}

[plutocrat]

Here is the generic Base (document class) that I use for my apps at the moment. You may need to tweak some elements (e.g. extend MovieClip not Sprite if your app is timeline based; change new Application() to play()) but it should generally do the trick:

package com.application.main {

import flash.events.*
import flash.display.Sprite;
import flash.text.*

public class Base extends Sprite {

//Loader
private var loadBar:Sprite;
private var _tf:TextField;
private var _fmt:TextFormat;

public function Base() {

preload();

}

private function preload() {

//Events
this.loaderInfo.addEventListener(Event.COMPLETE, initApplication);
this.loaderInfo.addEventListener(ProgressEvent.PRO GRESS, showProgress);

//Draw Bound
with (this.graphics) {
beginFill(0xffffff)
drawRect(10,stage.stageHeight-20,300,10)
}

//LoadBar
loadBar = new Sprite()
addChild(loadBar)

//Text
_fmt = new TextFormat("_sans", 11, 0xCCCCCC);
_tf = createText();
addChild(_tf);
_tf.x = 9
_tf.y = stage.stageHeight - 40

}
private function showProgress($e:ProgressEvent):void {

//Determine Percent
var percent:Number = Math.round(($e.bytesLoaded / $e.bytesTotal )*100 );

//LoadBar
with (loadBar.graphics) {
clear()
beginFill(0x000000)
drawRect(11,stage.stageHeight-19,3*percent-2,8)
endFill()
}

//Text
_tf.text = "Loading: "+ percent + " %"


}
private function initApplication($e:Event):void {

//Clean
this.graphics.clear()
loadBar.graphics.clear()
_tf = null

//Move On
new Application(this)

}
private function createText():TextField {
var t:TextField = new TextField();
t.width = 0;
t.height = 0;
t.autoSize = TextFieldAutoSize.LEFT;
t.selectable = false;
t.defaultTextFormat = _fmt;
return t;
}

}
}

[tencity]

Could you let me know if you ever put a swf live using this preload system?

I really cannot get it to work in IE on a PC, and everybody I have discussed it with says the same thing.

Try this link (http://www.townvideo.net/test/new01.html), and refresh it a few times.

[plutocrat]

It does work ( ;) ) but I should have qualified it with a few hints.

If you are trying for a timeline preloader, make all your Library items *not* export on the first frame (in Linkages) then on frame 2, place *all* of those items on the stage. If it looks odd or ugly, get over it; this will never be seen.

Then in place of new Application() in the Base class, put goToAndStop(3). Further, change public class Base extends Sprite to public class Base extends MovieClip (to allow for a timeline at all.

It really does work :O

[Jello.Warrior]

Here's what I use. It's an external .as file linked to a simple text instance called textPercent in frame one of the timeline.

package {
import flash.display.MovieClip;
import flash.display.Stage;
import flash.events.*;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.TextFormat;

public class LoadingScreen extends MovieClip {
public function LoadingScreen() {

var loader:Loader = new Loader();
addChild(loader);
loader.load(new URLRequest("flashindex.swf"));

loader.contentLoaderInfo.addEventListener(Event.CO MPLETE, initApplication);
loader.contentLoaderInfo.addEventListener(Progress Event.PROGRESS, showProgress);
}
public function showProgress(event:ProgressEvent):void {
var percent:Number = Math.round((event.bytesLoaded / event.bytesTotal )*100 );
textPercent.text = percent + "";
addChild(textPercent);
}
public function initApplication(myEvent:Event):void {

removeChild(textPercent);

}
}
}

it works well on my website www.dotgalo.com

Galo

[tencity]

Thanks Jello, but the crucial difference in your method is that you have a preloader swf loading the main swf (which is called flashindex if I'm right). I've never had trouble with that system.

It's when I listen for complete/progress events off the main timeline (i.e. this.loaderInfo.addEventListener...etc) that I have problems.

Example here (http://www.townvideo.net/test/new01.html). On a PC with IE that page loads correctly the first time then stays blank if you refresh it. Any other browser or IE on a Mac and it's fine.

I'd love it if a few other people could try it out and just confirm that that's what they see too.

[gazzaboo]

I am getting this error:

1084: Syntax error: expecting rightparen before Event.

on this line of code:

loader.contentLoaderInfo.addEventListener(Progress Event.PROGRESS, showProgress);

[tencity]

'ProgressEvent.PROGRESS' should not have any spaces in

[gazzaboo]

Can one of you fellas upload the fla's for the external .swf preloader. I am only just getting back into flash and have a deadline to meet, it would be easier for me that way. Thanks gents.

[plutocrat]

Tencity:

You are correct; my preloader does not work on IE for PC. Which is lame. I have, however, made a new one that seemingly does, relying on the tried and true method of 1/3 framelooping until all frames are downloaded. Lame, but it works.

So much for OOP.

Really, you would think that by now MM or Adobe might have finally clicked on and supplied a MovieClip.preload() function. Perhaps flash developers have secretly lobbied them not to in some vague hope that the enormous complications inherent in one of the most universally required things might increase entry barriers to the flash development market.

Oh well.

[gazzaboo]

Can you upload those fla's for me.

[plutocrat]

Here (http://www.just****inggoogleit.com/?=AS3+preloader)

[gazzaboo]

link doesnt work.

[gazzaboo]

tried that link in a few browser and still not working

[gazzaboo]

In the time it took you to post that you could have just helped me out. Cheers you muppet.

[hokeyplyr48]

is there a reason why it's saying in the compiler errors.
1046: Type not found or was not a compile-time constant: SimpleButton

preloaders were so easy in AS2 why does AS3 have to make it so freaking difficult.

[tencity]

off the top of my head, sounds like you haven't imported the SimpleButton class?

[hokeyplyr48]

ahh. so how do i import that into the DocClass file?

[tencity]

Checkout the SimpleButton example in Flash help.

Basically at the start of your DocClass file you probably already have some import commands. You will need to add:

import flash.display.SimpleButton;

and if it has a moan about any other missing classes then bring in the whole lot:

import flash.display.*

[rosyTown]

I find it hard to believe that your preloaders are working based on the fact that a Document Class's constructor only gets called once the Document Class is fully loaded.

Try it. Place a trace statement inside your Document's constructor and test the movie on a slow connection. The trace will only be fired when the Document is 100% loaded.

Basically what I am saying is that placing an Progress Event Listener for loading a class inside that very class is null and void. Plus it's bad practice. No class should be in charge of it's own loading.

SOLUTION --> Make an external swf with your content in it and use a blank Document Class to load the external swf in.

[tencity]

Try it. Place a trace statement inside your Document's constructor and test the movie on a slow connection. The trace will only be fired when the Document is 100% loaded.


This is simply wrong, I have just tried it to confirm.

I put a trace statement in the document class constructor and a big mp3 asset on frame 2, then published it using a slow connection to test.

The trace fired almost straightaway, but the movie was loading for another 30 seconds afterwards.

Anyway, the original problem with Event.COMPLETE not firing has been fixed in flash player 9,0,115. It all works as it should now.

[denete]

I'm using Player 9.0.28.0 with IE 6, and getting the same IE hang that is described in this thread. Is it actually fixed or not?

Or, is 9.0.115 newer than 9.0.28?

- David

[tencity]

It's fixed in the latest flash player release - 9,0,115 - that came out in December 2007.

So if the people viewing your flash movie in IE6 are definitely going to have that version or later, you're good to go.

Otherwise find an alternative.

I just saw your edit. yes 115 is a later build than 28.

[denete]

It's fixed in the latest flash player release - 9,0,115 - that came out in December 2007.

So if the people viewing your flash movie in IE6 are definitely going to have that version or later, you're good to go.

Otherwise find an alternative.

I just saw your edit. yes 115 is a later build than 28.


Okay, so I downloaded and installed 115 and restarted the computer.

I still get the same behaviors though. It loads the first time, then stops on a browser refresh.

"Manage Add-Ons" says that I have "Flash9e.ocx" in use.

What gives?

- David

[tencity]

I suggest you establish first whether it's a problem with flash or with your code.

Try it in firefox, which has never had this problem.

If it hangs in firefox then it's a problem with something you've written.

If it works in firefox then you've probably proved the bug still exists, and you should try another preloading method (for example I used a simple timer which tested if the movie had loaded every half-second or so).

[denete]

No problems in FireFox or Safari. I'm trying the timer now. Thanks.