How to preload AS3 clips

There are a lot of cases when your Flash animation is quite large in terms of file size. It contains images, perhaps some smaller .flv movies or a few “heavy” components.

In this case, if you publish your project somewhere on the web, you might have to wait a little, some times a little more, until the clip loads and starts playing. In this case it is very common (and quite frankly, necessary) to display something while your clip loads so the viewer knows there’s something going to happen and wait until your clip is completely loaded. In AS2 this wasn’t so hard. All you had to do was to move your animation to start from the third frame (but not necessarily), deactivate the “Export on first frame” setting from your symbols and components in the Library, place them on the second frame of your movie so they would load their assets (not necessary for all of them) by the time they would be instantiated, change the frame onto which classes were loaded from frame 1 to frame 2 and finally write some code on the first frame that would set an onEnterFrame event handler to display a preloader clip according to the size of your clip loaded so far. Lee Brimelow has made a nice video tutorial on how to preload flash clips, posted here: Again, this part isn’t necessary if you don’t want to display the amount of downloaded data and you only have a nice animation instead.

For ActionScript 3.0, the same thing is possible, only with the code changed to the AS3 syntax. You can download the example file from the link at the end of the post. However, this not always works. I’ve tried this with several components and looks like the method described earlier does not fully work. This is the case when using JumpeyeComponents’ TxEff or FlashEff. Even if you un-check the “Export in first frame” option from the Linkage Properties dialog box, there still is a considerable amount of data loading on the first frame. Don’t know why, yet… probably it has to do something with the embedded text (remember that TxEff and FlashEff need embedded characters for text effects). If this is the case, then you’ll probably have to wait a while until even your preloader shows up.

A workaround I’ve been using for this problem is to create the animation clip normally, without considering any preloading and then create a second clip I would use to load the first clip. This second loader clip would have all the preloading capabilities implemented into it. So, now I’m preloading an external .swf file. There’s also an item in JumpeyeComponent’s Knowledge base that addresses this issue:

However, this arises another problem: in case of timeline animations, if that animation is in the external .swf file that you’re preloading, it so happens that the animation would start before the preloader is gone (while the preloading action is still going on). In this case, there’s a simple solution: move the entire timeline animation so it starts on the second frame and on the first frame place a stop() function. This way, your swf will not start the animation. Finally, after all the external .swf is loaded, just access the content in your loader object and instruct it to start playing from the second frame by using a gotoAndPlay(2) or gotoAndStop(2), if that’s the case.

You can check out these examples I’ve made.