More about preloading in Flash CS3

2007 April 30
by Koen

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.


42 Responses leave one →
  1. 2007 May 13
    nick permalink

    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.

  2. 2007 June 11
    Ruben Rojas permalink

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

  3. 2007 July 12

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

  4. 2007 July 22

    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….

  5. 2007 July 28

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

  6. 2007 August 23

    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?

  7. 2007 August 23

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

  8. 2007 August 24
    p0c permalink

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

  9. 2007 August 24

    @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.

  10. 2007 August 24
    Chris permalink

    Yes It is under the showprogress function still get the error

  11. 2007 August 24
    Chris permalink

    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) ????????

  12. 2007 August 24
    Chris permalink

    It’s flash CS3 btw

  13. 2007 August 24
    Chris permalink

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

  14. 2007 August 24

    SWEET! That works perfectly. Thank you.

  15. 2007 October 3
    Julien permalink

    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.

  16. 2007 October 3
    Julien permalink

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

  17. 2007 October 25

    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?

  18. 2007 October 25

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

  19. 2007 November 14
    Jose Mijares permalink

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

  20. 2007 December 6

    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! :)

  21. 2008 February 6

    Thanks!

  22. 2008 February 8

    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!

  23. 2008 February 28

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

  24. 2008 March 7
    ash permalink

    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?

  25. 2008 March 10

    yep, i have the same problem

  26. 2008 March 12

    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.

  27. 2008 March 12
    jacob permalink

    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.

  28. 2008 March 12
    jacob permalink

    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

  29. 2008 May 9

    Very good, save me!

  30. 2008 June 8

    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. :)

  31. 2008 July 30
    Calderone permalink

    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)

  32. 2008 September 15
    Mark permalink

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

    }

    }

  33. 2009 April 26
    jack permalink

    Can you please upload a file for this code ?!

  34. 2009 June 27

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

  35. 2009 September 27

    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

Trackbacks & Pingbacks

  1. Preloader in Flash CS3 - Actionscript 3.0 way « New Movieclip()
  2. JUST GOOD DESIGN | BLOG » Dynamic Loading in Flash
  3. WebService //Flash
  4. the hawaiiantime.com blog » Blog Archive » Preload the Assets
  5. Davey’s Flash Blog » Blog Archive » Transitioning from AS2 to AS3: Preloading Movies
  6. kill-the-dinosaur | about actionscript and random rants » Preloading a runtime flash site with an swf wrapper
  7. [Flash] Preloader in Flash CS3 - Actionscript 3.0 | Billyblue Entertainment

Leave a Reply

Note: You can use basic XHTML in your comments. Your email address will never be published.

Subscribe to this comment feed via RSS