negush blog

Flash, ActionScript and stuff…

November-28-08

How to preload AS3 clips

posted by negush

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: http://www.gotoandlearn.com/play?id=18. 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: http://www.jumpeyecomponents.com/knowledgebase/TxEff-AS3.0/Preload-TxEff-animations~439/.

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.

  1. Laurent van Tright Said,

    Hello,

    First of all…. thanks a million! I have spent pretty much a day on adding a preloading bar to my site.
    My site has an swf file in it that takes time to load. The swf file was originally an fla file I made in CS3 and contained A LOT of flasheff components. Adding a loading bar to this appeared more challenging than I thought! Most tutorials out there seemed to deal with AS2 which I could not use due to flasheff components.

    I read your previous instructions, and indeed was hitting the problem of having the swf appear after only 50% of the bar was loaded. The loading bar would stay on the screen until it’s full 100%.

    I added your trick above described in the last paragraph; going back to the fla file, shifting everything to frame 2,
    reconverting it to a new swf file, and add the gotoAndStop(2) in the AS.

    The only problem I see now is that as soon as the swf movie starts to play, it seems to freeze for a fraction of a second and you can see “flasheff” signs instead of the buttons. This only takes a fraction of a second, then everything looks normal. It is a little annoying though. I feel I am close to having it perfect now…. any tips?
    In any case, thank you! I can finally go to bed now….

  2. Laurent van Tright Said,

    Ok. I think the problem I mentioned above was due to not letting flasheff enough time to load. I shifted everything 1 frame further, and the logo appearance at the beginning is now gone. This does cause a small delay between the disappearance of the loading bar and the actual loading of the animation. But that is not too big of an issue.
    Thanks again for all your help!

  3. admin Said,

    @Laurant

    It’s good to know I managed to help you out through the article. Indeed there’s the problem of FlashEff needing a little time to initialize, so it is recommended to leave some frames before using it (this info is found in the FlashEff’s forum too: http://www.flasheff.com/forum/).

  4. Joël Said,

    I have a question for you : I’m doing a project with a teammate and I’m in charge of the programmation in AS3 and all the project is in ONE .swf. The thing I’d like to know is this : Could I introduce in THE .swf file a preloader, put it in the first frame, load everything and once all load go to frame 2?

    I’ve tried it, but there’s a problem… I can do a preloader made in AS but it’s such a stupid progress bar with Loading : XX% and the bar progress with scaleX… well… My teammate did such a nice clip with an animation in it for the preload, and I’d like to know… if there’s a way to make it play while everything is downloading, so the preload would be a clip, once the preloader on the frame 1 he would do it’s little animation and once the project fully loaded, go to frame 2 OR am I comdamned to put the animation in a second .swf file and make him load the project?

    Thanks for this, if possible, send the answer here : joeli@videotron.ca

  5. admin Said,

    @Joël

    Yes, you could use such an animation on the first frame and while the rest of the content is loading, then go to the second frame. But this solution is good only if you do not have embedded fonts because they would load at the beginning and your preloader wouldn’t be visible until those fonts load. The best solution would be with a separate loader clip into which you would place that preloader. But as I mentioned, the first solution might work too, if you don’t have embedded fonts (just remember to deactivate the “Export in first frame” option from the Linkage dialog box of your components and set the Export classes to frame 2 in the publish settings).

  6. Twitted by amyleew Said,

    [...] This post was Twitted by amyleew [...]

  7. Amy Lee Said,

    Thank you so much for this post! It really helped me…. I had a 35MB flash piece to load and this really saved the day. Thx!

    Ms.Lee

  8. Zaharia Paul Said,

    Thank you a LOT, i have been searching for a easy-to-use internal preloader for some time…your examples are awesome, and really work :)

    Cheers

Add A Comment