How do you create a Preloader with ActionScript 3 in Flash CS3?
Ok, I’ve searched with Google, I’ve asked on FlashCoders but nowhere got an answer. As far as I can understand it we still have to deal with the old problem in Flash of exporting library assets into frame 1 and using a Preloader. If we simply export the library stuff (and classes) into frame 1 we render our Preloader pretty much useless. But creating a Preloader like in ActionScript 2 obviously doesn’t work anymore.
In ActionScript 3 the MovieClip doesn’t have bytesLoaded and bytesTotal properties anymore but it has a loaderInfo property over which these values can be accessed. If we use these commands in frame 1 but export all our classes in frame 2 (or beyond) we have a problem: The classes required by the Preloader are not there when needed.
A chicken before the egg problem. The classes are in frame 2 but some of them are already needed in frame 1 and if we export all classes into frame 1 we render our Preloader unable to display it’s preload bar early enough at least if we use a lot of classes in our application and unfortunately we cannot put only specific classes into frame 1.
There’s an AS3 tutorial here but it doesn’t mention anything about exporting classes into frame 2.
So how do you do it? Did I miss something in the docs or is the solution so banally obvious but I cannot see it? Or am I totally wrong with my approach and it’s done in a completely different way now? It would be cool to hear some thoughts about this.
41 Responses to “How do you create a Preloader with ActionScript 3 in Flash CS3?”
By steff
on May 2, 2007 | Reply
You could use the “URLLoader” class
By sascha
on May 2, 2007 | Reply
Steff I take it you mean to create an extra SWF that acts as the preloader and loads the main SWF?! Yes that would be a solution but you wouldn’t want to have an extra SWF as a preloader for everything you do in Flash.
By Daniel
on May 7, 2007 | Reply
Steff, I believe that they are functions now. getBytesLoaded() and getBytesTotal().
This should give you a % of loaded bytes….
Math.round(_root.getBytesLoaded()/_root.getBytesTotal()*100);
-=Daniel=-
By sascha
on May 7, 2007 | Reply
Daniel, in AS3 there are no getBytesLoaded() and getBytesTotal() functions anymore (see AS2 migration). These are now properties of the URLLoader class. Hence the problem with classes not being in frame 1.
By carnage
on May 8, 2007 | Reply
could we somehow use setInterval, so the main timeline will have only one frame?
By Charlie
on May 11, 2007 | Reply
I want to know how to do a preloader in as3, could someone post a download for a .fla with a working preloader in CS3 please
By qzim
on May 12, 2007 | Reply
I think that there is no way to build preloader in as3. For example when I embed an mp3 into swf, events (progress and complete) are lunched only after the hole swf is downloaded. So the only way is create swf that will load the main swf. There is another way, but I can not implement it in pure as3. As we know there is self preloder in flex…so it should be in as3, but flex is using something that is called progressive layout. It is used to load and initialize every part of swf (f.e. componets)using queque…how? i still can not figure that out
By sascha
on May 12, 2007 | Reply
qzim, Keith Peters figured out how to create a preloader in pure AS3.0 similar like in Flex2 …. http://www.bit-101.com/blog/?p=946 … it works by creating a factory class which acts as the preloader. This way the factory class goes into frame 1 and your main class into frame 2. The important thing to be noted there is that the factory class will become root. It’s a bit confusing at first but it works. Though if I use this method in Flex Builder I always get unused CSS tag warnings from the compiler, even though I don’t use any CSS! Very strange, might be a Flex bug.
By Psykovsky
on May 14, 2007 | Reply
Every display object now has loaderInfo parameter.
so for root (or stage) you can use:
root.loaderInfo.bytesLoaded();
root.loaderInfo.bytesTotal();
and also attach the event listener:
root.loaderInfo.addEventListener(ProgressEvent.PROGRESS, yourFunc);
root.loaderInfo.addEventListener(Event.COMPLETE, yourFunc);
Hope it helps
By pwd
on May 14, 2007 | Reply
the preloading-prob is a mess in upcoming flash versions.
my preloader is probably a beta-solution - i do it like i did
in flash3 ( first frame looks if all frames have loaded successfully…)
for example 4 frames. first frame waits till frame 4 has loaded - second
frame holds all library-linkage stuff and more…
percentt.text = Math.round( ( framesLoaded/totalFrames ) *100 );
if ( framesLoaded == totalFrames ) {
//do some
}
it´s not a solution but it works by now…
pwd
By sascha
on May 15, 2007 | Reply
pwd, yes either your method or by creating an extra SWF that acts solely as a preloader. I don’t see any other way of having a preloader in a single SWF.
By Den Ivanov
on May 19, 2007 | Reply
here the solution )
http://dev.etcs.ru/blog/as3/export_in_second_frame_flash_cs3/
src - http://dev.etcs.ru/flash/export/ExportSecondFrame.zip
in short
just use:
var programClass:Class = loaderInfo.applicationDomain.getDefinition(”Program”) as Class;
var program:Sprite = new programClass() as Sprite;
addChild(program);
instead of NOT working code:
/*
var program:Program = new Program();
addChild(program);
*/
By John
on May 26, 2007 | Reply
Hi Daniel,
Have you been able to find anything out on the AS 3 Preloader? I’m looking for some guidance too and can’t believe how barren the resources are out there.
Thanks,
John
By Gibbous
on May 28, 2007 | Reply
Eh there peoples…
I’m not that up on Flash, heck all I can do are simple animations and such.
But I was able to get my Adobe CS3 Suite and it has Flash with it, I’m coming from Flash MX and hadn’t used that for about 4 years, but I’m in the same boat.
I’m doing a new site but need to know how to load ONE simple image inside the actual FLV or SWF itself.
If anyone figures this out I would greatly appreciate the help.
-Gibb-
gibbous_w@hotmail.com
By Gibbous
on May 28, 2007 | Reply
Ouhh right one more thing. All I want to create is a simple spinning ball, no text or numbers. Just a little circle / ball that spins while the image is loading.
By giantsteps
on May 28, 2007 | Reply
Den Ivanov -
I looked at your sample, but it appears to be a version of the three frame variety where AS classes are exported on frame 2 and the app starts on frame three.
I’m not sure I understand the issue you are addressing here? Thanks for the sample.
Peter
By Denis Kolyako
on May 28, 2007 | Reply
2giantsteps
No, this example demonstrates, how to create a preloader same as old AS2 practice. You don’t need to make three frames (just third frame doesn’t contain clip with embedded content, nothing more), you can start app at second frame.
But, we have a problem: if you have hand drawn clips (i.e. tween animation), when you export classes of these clips to second frame and place it’s contents to this frame, then try to create hand drawn class (new MyHandDrawnClass()) in second or third frame, the class creates, but it hasn’t any contents (animation, etc.). I dunno why. This example demonstrates, how to solve this problem.
Sorry for my english
By giantsteps
on May 29, 2007 | Reply
Oh ok - I think I understand. I hadn’t run into this problem yet.
Looking at your example, I am wondering if your program class had simply failed to initialize in time to run the code in your constructor?
Did you try listening for the init event as in the code below? I think you might have to extend MovieClip rather than sprite or import Loader and Loaderinfo, but I’m not sure.
public function Program() {
super();
this.loaderInfo.addEventListener(Event.INIT, initApplication);
}
public function initApplication(myEvent:Event):void {
x = 50;
y = 50;
var box:Box = new Box();
var star:Star = new Star();
var another:AnotherClass = new AnotherClass();
star.y = 100;
star.x = 100;
addChild(box);
addChild(star);
}
By Denis Kolyako
on May 29, 2007 | Reply
No, it isn’t important, when you trying to create Box and Star classes, their contents willn’t shown anyway. You need to use getDefintion method to create Program class instead of basic creation. Why is it so, i don’t know.
By gabs
on May 29, 2007 | Reply
Psykovsky’s solution (root.loaderInfo.bytesLoaded();) works fine for me
thanks, btw
By Joe
on Jun 9, 2007 | Reply
I found that adding a 200 millisecond delay after the Complete Event allowed me to create new classes. However, what I also found is that if you set classes to load in frame 2 none of the class linked objects on the stage work. Flash comes up with errors saying that it can’t convert the class MovieClip to class .
This really does look like a bug in CS3. Given that 90% of flash projects need a preloader Adobe needs to sort this out
By Drew
on Jun 20, 2007 | Reply
Den Ivanov, you are a life saver!
By Denis Kolyako
on Jun 20, 2007 | Reply
2Drew, thanks
Den Ivanov just informs about my solution 
By LEE
on Jul 24, 2007 | Reply
It’s VERY disappointing that Adobe doesn’t take this style of preloading a Flash app into account, and provide a more intuitive solution….
….but it is Adobe, they’re always too busy for perfection!
By LEE
on Jul 24, 2007 | Reply
right about now I just despise Adobe….
By Mike
on Jul 30, 2007 | Reply
I created a preloading package (very simple) in AS3. It gives a pretty basic understanding of how the new progress events and such work in AS3.
By Mike
on Jul 30, 2007 | Reply
Forgot to post the link…. DOH!!!!
http://sd-dezign.com/blog/?page_id=10
By koen de weggheleire
on Aug 23, 2007 | Reply
if someone want some more info about preloading; A few months back I have written two tutorials covering the process in AS 3: http://newmovieclip.wordpress.com/2007/03/14/preloader-in-flash-cs3-actionscript-30-way/
Enjoy
By Josh Tamugaia
on Dec 28, 2007 | Reply
I’m still looking for a solution, and I found this:
http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000818.html
It *may* work… I’m not sure.
By Josh Tamugaia
on Dec 28, 2007 | Reply
NAH, everything got screwed up when I changed the class exports to frame 2…
By dave
on Jan 21, 2008 | Reply
wow. after much searching, denis has the best example of exporting classes with graphics attached from inside the library. This example is illustrating how if you normally just drag instances on the export frame they would be availiable to be instantiated by the “new” keyword and then attached with addChild(), this method still creates an instance of the class, but no graphics that were either drawn in or embedded with external assets. its definetely a work around, but it definetely works! Thanks DENIS.
By dave
on Jan 21, 2008 | Reply
Another way to preload your classes is same as AS2, putting exports on second frame, waiting til loaderInfo.bytesLoaded==loaderInfo.bytesTotal, then playing to export frame. If you create a MovieClip call MAIN or ROOT or whatever and attach a script, you can use this as your “document class”, you can then create instances with library attachment using the “new” keyword and the graphics and everything in them will show up properly. Its a little bit of a hack because you’re putting everything in another Movieclip…but I dont see a problem arising from this solution because its just another display object container one child down from the maintimeline anyway.
the source is here.
http://www.odysseywave.com/as3_preload/example.zip
By Adobe
on Mar 5, 2008 | Reply
http://www.adobe.com/devnet/actionscript/articles/lightweight_as3_02.html
By An Example
on Mar 18, 2008 | Reply
I made a movie clip with 100 frames with a shape tween progressing through it. I exported it to action script and gave it the class “preloadBarClass”.
stop();
addEventListener(Event.ENTER_FRAME, preloadNow);
var preloadBar:preloadBarClass = new preloadBarClass();
//I build how I want the frame to look first, take note of all
//the variables I need, then clear the frame.
preloadBar.x = 25.4;
preloadBar.y = 164.8;
addChild(preloadBar);
function preloadNow(event:Event) {
var prebytesTotal:Number = stage.loaderInfo.bytesTotal;
var prebytesLoaded:Number = stage.loaderInfo.bytesLoaded;
var preAverage:Number = Math.round((prebytesLoaded/prebytesTotal)*100);
trace(preAverage +”% loaded.”)
preloadBar.gotoAndPlay(preAverage);
if (prebytesLoaded >= prebytesTotal) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, preloadNow);
removeChild(preloadBar);
}
}
By An Example
on Mar 18, 2008 | Reply
edit: that code goes in frame 1 on the main timeline.
By Boterkoek
on Apr 10, 2008 | Reply
Is there any way to avoid the ‘export on first frame’ issue, using the strick/OOP as3 mode, where the main timeline has nothing more then 1 empty frame. And all the code of preloader and game execute from within the Document Class, in external .as file?
I have tried to set the publish setting ‘export class’ on 2 already (publish->flash->settings..) but the preloader does not get any chance to show up any earlier then at 100%
By Anime English
on May 6, 2008 | Reply
I think that there is no way to build preloader in as3.
By Wes
on Jun 7, 2008 | Reply
put this in the first frame of your SWF. The rest of the movie on frame 2 and above
//Actionscript 3
stop();
this.addEventListener(Event.ENTER_FRAME,testInterval);
function testInterval(e:Event):void{
var nLoadedBytes:Number = loaderInfo.bytesLoaded;
var nTotalBytes:Number = loaderInfo.bytesTotal;
//trace (nLoadedBytes / nTotalBytes * 100)
percent.text = Math.round(nLoadedBytes / nTotalBytes * 100)+ “% complete”;
//trace (nLoadedBytes / nTotalBytes * 100)
if (nLoadedBytes >= nTotalBytes) {
trace(”load complete”);
this.removeEventListener(Event.ENTER_FRAME,testInterval);
play();
}
}
//End
By Daniel
on Jun 10, 2008 | Reply
I don’t know if this will help anyone, but if you are using a document class in Flash CS3 IDE, the document class (main class) has an instance of a LoaderInfo attached to it.
so for example, if my document class was MyDocumentClass:
public function MyDocumentClass() {
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
}
and then put your preloading code in onProgress().
-Dan
By thienhaflash
on Jun 30, 2008 | Reply
I searched everywhere, and find no solution, too
(sight…)
Same with you, sascha.
And agree with you, Anime English
Maybe there’re just no way to load external .as file and set it to export in other frames than frame 1.
Using another swf to act as the preloader will be the only workaround then…
By Dennis
on Jul 28, 2008 | Reply
Hey Wes, your solution seems to work fine. What is the problem then? It is clean and simple. Why should one not use Wes’ solution?