More about preloading in Flash CS3

In one of my blog posts I already told you a bit about preloading with the actionscript 3.0 way. But there is a bit more to tell about Flash CS3 and preloading.

1. Preloading the whole SWF Movie :

If you want to write a preloader for your whole movie (eg with a lot of assets on frames), the simplest thing to do is put your preloader in your document class of the movie because there is a LoaderInfo object available for the instance of the main class of the SWF file. The instance of the main class of the SWF file has NO Loader object, the loaderInfo property is the only way to access the LoaderInfo.

How does this look in code? Well we make a small document class here as an example:

package com.newmovieclip{

 import flash.display.MovieClip;

 import flash.events.*;

 public class Preloader extends MovieClip {

 	public function Preloader() {

 		this.loaderInfo.addEventListener(Event.INIT, initApplication);

 		this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);

 	}

 	public function showProgress(theProgress:ProgressEvent):void {

 		var percent:Number = Math.round((theProgress.bytesLoaded / theProgress.bytesTotal )*100 );

 		trace(percent + " %  loaded");

 	}

 	public function initApplication(myEvent:Event):void {

 		trace("Application fully loaded !");

 	}

 }

}

As you see we can access the loaderInfo property and add some eventListeners to it to know when some progress is made. When the content is fully loaded then the initApplication method of our document class is executed. The only thing you still must do now is specify this class as the document class to use. In the properties panel you can set the Document class to eg “com.newmovieclip.Preloader”.

2. Preloading runtime loaded assets

Imagine you have a lot of assets in your library that are loaded at runtime. Then the progress event of the loaderInfo property in your document class will not be triggered because all the assets are default exported on the first frame ( this is still the same in CS3). 😦

One widely spread solution for this is changing the” export in first frame” option and force the assets to load in an other frame by explicit place them on the stage. (same technique as in Flash8). Another option is to use a wrapper SWF that loads your main swf with the approach I explained in this article. You can do the loading in the document class of the wrapper. I personally think a wrapper SWF is still far most the best approach for good preloading.

Advertisements

42 responses to “More about preloading in Flash CS3

  1. Pingback: Preloader in Flash CS3 - Actionscript 3.0 way « New Movieclip()

  2. Pingback: JUST GOOD DESIGN | BLOG » Dynamic Loading in Flash

  3. Pingback: WebService //Flash

  4. nick 13 May , 2007 at 1:58 pm

    In actionscript 3, I believe the event which is broadcast when the application is fully loaded is Event.COMPLETE, not Event.INIT.

    This is the opposite of the MovieClipLoader sequence in actionscript 2, where init came after complete.

  5. Pingback: the hawaiiantime.com blog » Blog Archive » Preload the Assets

  6. Ruben Rojas 11 June , 2007 at 2:44 am

    I like to see how to implement this code on a mai application to call externals swf´s or images, please.

  7. Bort 12 July , 2007 at 7:45 pm

    If all your assets are in the first frame this wont work.

  8. Tyler 22 July , 2007 at 1:59 am

    the only way i got eveything to work right is if you just leave the export as first frame and make a wrapper .fla that uses the loader class and the contentloaderinfo to extract the total bytes loaded. this cannot be the best solution though….

  9. Koen 28 July , 2007 at 6:16 pm

    @tyler : it is just a solution that works and indeed Bort, because the document class is exported in the first frame it only works when assets are place in other frames 😉

  10. Al Lemieux 23 August , 2007 at 5:03 pm

    I got this to work. Thanks for the info, since it’s pretty sparse about preloading. Now I’m trying to get a progress bar to expand on the x scale. I modified your code as follows:

    progress_bar.scaleX = percent;

    This is in the showProgress function. My guess is that it doesn’t work because it’s not an onEnterFrame event, so it’s not really looping? Any thoughts?

  11. Koen 23 August , 2007 at 9:38 pm

    @Al Lemieux : If you place a movieclip (eg: preloader_mc, 100px width) on your first frame and you write following ActionScript inside the ShowProgress() function it works:

    preloader_mc.scaleX = percent/100;

  12. p0c 24 August , 2007 at 8:55 am

    I get “1120: Access of undefined property percent.” any ideas?

  13. Koen 24 August , 2007 at 10:30 am

    @poc, in this example the percent variable is locally declared in the showProgress function, so it is only accessible in that function. I guess you are trying to access the percent var outside that function.

  14. Chris 24 August , 2007 at 11:44 am

    Yes It is under the showprogress function still get the error

  15. Chris 24 August , 2007 at 11:56 am

    I’ve looked under the ProgressEvent which rightly contains bytesLoaded and BytesTotal but I don’t see percentage there?

    Also the bytesLoaded figure doesn’t change on screen, but it does in trace. But now i am thinking that the swf file is so small it doesn’t give time to change (But I have experimented with high frame rate) ????????

  16. Chris 24 August , 2007 at 11:56 am

    It’s flash CS3 btw

  17. Chris 24 August , 2007 at 12:12 pm

    I experimented again with the trace result and a lrage swf file and realised it only displays the bytesLoaded after it has finished loading??

  18. Al Lemieux 24 August , 2007 at 7:54 pm

    SWEET! That works perfectly. Thank you.

  19. Julien 3 October , 2007 at 2:21 am

    its strange but me too (like Chris), the trace just trigger when the movie is loaded and it does not show the percentage during the preload.

  20. Julien 3 October , 2007 at 2:24 am

    is the “com.newmovieclip” part is important after the package?

  21. Trey 25 October , 2007 at 2:48 am

    Julien, I’m asking the same question. He didn’t explain EXACTLY how to do the following:

    In the properties panel you can set the Document class to eg “com.newmovieclip.Preloader”.

    Anyone else know how to do this?

  22. Koen 25 October , 2007 at 7:38 am

    @Trey, Julien you can set the Document class in your properties panel. Just click on the area outside your stage and look to the properties panel. There is a text input where you can define your documentclass. I hope it is more clear now 😉

  23. Jose Mijares 14 November , 2007 at 9:39 pm

    I made a preloader that runs fine with flash MX. I upgraded to Flash CS3 I put main movie and preloader movie on two diferent scenes as it was before. Everything works ok , but preloader does not. Action
    script is 1.0 or 2.0.

    The code of the first frame is:
    totalBytes = this.getBytesTotal();
    loadedBytes = this.getBytesLoaded();
    remainingBytes = totalBytes-loadedBytes;
    percentDone = int((loadedBytes/totalBytes)*100);
    bar.gotoAndStop(percentDone);
    if (_framesloaded == _totalframes) {
    gotoAndPlay(3);
    }

    And the other on the second frame is:
    gotoAndPlay(1);

  24. soybeansoft 6 December , 2007 at 4:57 am

    Hi.. Is it possible to share the .fla file?.. I tried it but it won’t quite work as it should. I manage to put a progress bar and compiled fine, but wouldn’t show until everything is already loaded.

    Here’s a little more details of what I did. The stage and frames are left empty. Library has 2 objects: a PreloaderBar (extends Sprite, and exported in the first frame) and a large mp3 (extends Sound, and also exported in the first frame). I tried setting the ‘first frame’ option off but it won’t compile (errors to make reference of it in the Preloader class). The modifications in Preloader class are initializing PreloaderBar in the constructor and initializing the sound class on initApplication method.

    Any ideas? Thanks! 🙂

  25. Todd Perkins 8 February , 2008 at 12:28 am

    That’s great! I had no idea about the loaderInfo property! I thought you could only use ProgressEvent to track progress of externally loaded assets. This is awesome! I’ve been using framesLoaded / totalFrames up to this point, which doesn’t do crap.

    Thanks Koen!

  26. ernst happel 28 February , 2008 at 11:52 am

    Great solution i now know how to use the preloader! greetings ernst happel

  27. ash 7 March , 2008 at 6:46 am

    I experimented again with the trace result and a lrage swf file and realised it only displays the bytesLoaded after it has finished loading??

    I have the same problem… what did i do wrong?

  28. taytus 10 March , 2008 at 7:01 pm

    yep, i have the same problem

  29. jacob 12 March , 2008 at 4:46 pm

    Hi, I am wondering why I cannot use a document class and at the same time have ActionScript on different frames in the movie. It gives me errors saying that different instances are not declared, even though they are. I am trying to make a preloader for the entire swf. Please help!!!!!!!! Thank you.

  30. jacob 12 March , 2008 at 5:08 pm

    basically, I tried to add this document class to a fla that has AS on specific frames. I tried to copy and paste the event listeners and handlers into the class, but then the buttons do not respond!

    I am fairly new to Flash and I have watched numerous tuts and still have not figured out why this happens.

    Thanks.

  31. jacob 12 March , 2008 at 5:10 pm

    also, I tried to use a new external swf wrapper and that worked. but i want it to load ALL the assets at runtime.If you could help that would really be great.

    Thanks again

  32. Pingback: Davey’s Flash Blog » Blog Archive » Transitioning from AS2 to AS3: Preloading Movies

  33. John Raul Joven II 8 June , 2008 at 8:50 am

    It would be best if you share us the sample Flash document demonstrating the code above. Do you think you can send it to me? I really need this fix. Thanks. 🙂

  34. Calderone 30 July , 2008 at 5:02 pm

    Hey Koen, thanks for the articles on cs3 preloading… i’m starting to get it …

    Somehow though, the showProgress does not seem to work. My data is not getting updated, it only shows change when the percentage = 100.

    And in my trace panel, first it says “fully loaded” and then, in second place “100% loaded”…

    any ideas ? my main timeline had a bunch of bitmaps on it, and with this class, i should be able to preload all this…(in the old days i’d use a scene in front of my main scene and preload everything there, jump to the main scene when everything is loaded)

  35. Mark 15 September , 2008 at 3:35 am

    Hi there,

    Thanks so much Koen, really helpful.

    For anyone needing more help you could try the version below. It goes together with an .fla that has all the content on Frame 2, with just a stop(); action on frame 1.

    package {

    import flash.display.MovieClip;
    import flash.text.TextField;
    import flash.events.*;

    public class Preloader extends MovieClip {

    private var load_txt:TextField = new TextField();

    public function Preloader() {
    this.loaderInfo.addEventListener(Event.COMPLETE, initApplication);
    this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
    this.addChild(load_txt);
    load_txt.x = 100;
    load_txt.y = 250;
    }

    private function showProgress(theProgress:ProgressEvent):void {
    var percent:Number = Math.round((theProgress.bytesLoaded / theProgress.bytesTotal )*100 );
    load_txt.text = String(percent);
    trace(percent + ” % loaded”);
    }

    private function initApplication(myEvent:Event):void {
    //trace(“Application fully loaded !”);
    this.gotoAndStop(2);
    this.removeChild(load_txt);
    }

    }

    }

  36. Pingback: kill-the-dinosaur | about actionscript and random rants » Preloading a runtime flash site with an swf wrapper

  37. Pingback: [Flash] Preloader in Flash CS3 - Actionscript 3.0 | Billyblue Entertainment

  38. jack 26 April , 2009 at 6:33 pm

    Can you please upload a file for this code ?!

  39. Bryon 27 June , 2009 at 12:28 am

    I found this code on http://theflashblog.com/?p=438
    This works perfect! Maybe I just needed to see a video…

    var l:Loader = new Loader();
    l.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);
    l.contentLoaderInfo.addEventListener(Event.COMPLETE, done);
    l.load(new URLRequest(“content.swf));

    function loop(e:ProgressEvent):void
    {
    var perc:Number = e.bytesLoaded / e.bytesTotal;
    percent.text = Math.ceil(perc*100).toString();
    }

    function done(e:Event):void
    {
    removeChildAt(0);
    percent = null;
    addChild(l);
    }

  40. Vivekanand 27 September , 2009 at 1:36 pm

    It would be great if you can give us the files for download – so that we get more idea about the same and it will be very easy to understand as well.

    Thanks,
    Vivek

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s