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.

34 Responses to “More about preloading in Flash CS3”

  1. [...] UPDATE : Take a look at this extra article on preloading   [...]

  2. [...] More about preloading in Flash CS3 [...]

  3. Прелоадер в Flash CS3

    Прочитал в блоге товарища Koen De Weggheleire интересную статейку о том, как сделать прелоадер в Flash CS3. Смотрим:
    Прелоадер для SWF мувика целиком:
    Ес…

  4. 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. [...] More about preloading in Flash CS3 [...]

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

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

  8. 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. @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. 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. @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. I get “1120: Access of undefined property percent.” any ideas?

  13. @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. Yes It is under the showprogress function still get the error

  15. 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. It’s flash CS3 btw

  17. 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. SWEET! That works perfectly. Thank you.

  19. 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. is the “com.newmovieclip” part is important after the package?

  21. 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. @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. 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. 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. Thanks!

  26. 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!

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

  28. 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?

  29. yep, i have the same problem

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

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

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

  33. [...] 2) more-about-preloading-in-flash-cs3 [...]

  34. Very good, save me!

Leave a Reply