How do you create a Preloader with ActionScript 3 in Flash CS3?

Written on May 2, 2007 – 12:36 pm | by sascha |

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.

Usually I’m using a setup like this when creating something in the Flash IDE … my main timeline has three frames, the first only contains the preloader, the second contains a Movieclip that keeps all the linked stuff from the Library and all Classes and the third is where my app starts. Pretty easy, pretty clear.

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.

  1. 41 Responses to “How do you create a Preloader with ActionScript 3 in Flash CS3?”

  2. By steffNo Gravatar on May 2, 2007 | Reply

    You could use the “URLLoader” class ;)

  3. By saschaNo Gravatar 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.

  4. By DanielNo Gravatar 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=-

  5. By saschaNo Gravatar 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.

  6. By carnageNo Gravatar on May 8, 2007 | Reply

    could we somehow use setInterval, so the main timeline will have only one frame?

  7. By CharlieNo Gravatar 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

  8. By qzimNo Gravatar 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

  9. By saschaNo Gravatar 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.

  10. By PsykovskyNo Gravatar 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 :)

  11. By pwdNo Gravatar 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

  12. By saschaNo Gravatar 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.

  13. By Den IvanovNo Gravatar 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);
    */

  14. By JohnNo Gravatar 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

  15. By GibbousNo Gravatar 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

  16. By GibbousNo Gravatar 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.

  17. By giantstepsNo Gravatar 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

  18. By Denis KolyakoNo Gravatar 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 :)

  19. By giantstepsNo Gravatar 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);

    }

  20. By Denis KolyakoNo Gravatar 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.

  21. By gabsNo Gravatar on May 29, 2007 | Reply

    Psykovsky’s solution (root.loaderInfo.bytesLoaded();) works fine for me :D thanks, btw

  22. By JoeNo Gravatar 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

  23. By DrewNo Gravatar on Jun 20, 2007 | Reply

    Den Ivanov, you are a life saver!

  24. By Denis KolyakoNo Gravatar on Jun 20, 2007 | Reply

    2Drew, thanks :) Den Ivanov just informs about my solution :D

  25. By LEENo Gravatar 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!

  26. By LEENo Gravatar on Jul 24, 2007 | Reply

    right about now I just despise Adobe….

  27. By MikeNo Gravatar 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.

  28. By MikeNo Gravatar on Jul 30, 2007 | Reply

    Forgot to post the link…. DOH!!!!

    http://sd-dezign.com/blog/?page_id=10

  29. By koen de weggheleireNo Gravatar 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 ;-)

  30. By Josh TamugaiaNo Gravatar 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.

  31. By Josh TamugaiaNo Gravatar on Dec 28, 2007 | Reply

    NAH, everything got screwed up when I changed the class exports to frame 2…

  32. By daveNo Gravatar 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.

  33. By daveNo Gravatar 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

  34. By AdobeNo Gravatar on Mar 5, 2008 | Reply

    http://www.adobe.com/devnet/actionscript/articles/lightweight_as3_02.html

  35. By An ExampleNo Gravatar 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);
    }
    }

  36. By An ExampleNo Gravatar on Mar 18, 2008 | Reply

    edit: that code goes in frame 1 on the main timeline.

  37. By BoterkoekNo Gravatar 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%

  38. By Anime EnglishNo Gravatar on May 6, 2008 | Reply

    I think that there is no way to build preloader in as3.

  39. By WesNo Gravatar 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

  40. By DanielNo Gravatar 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

  41. By thienhaflashNo Gravatar 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…

  42. By DennisNo Gravatar 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?

Post a Comment

Welcome to H1DD3N.R350URC3!

These are the adventures of a random guy trying to be an independant game developer, utilizing ActionScript for programming and talking abouting gaming and nonsense in general.

Need any news feed?

 Main Feed (contains all categories), Dev Feed, Design Feed, Audio Feed, Gaming Feed, Miscellaneous Feed
Find entries: