Question

i have a big flash file that loads in but takes a noticeable amount of time to download. Its a header and i was just wondering if i could have an image instantly appear and then when the flash is downloaded seamlessly overlap it? Just wondering if there was an HTML to do this?

Thanks

Answer 1

You have two options for this as far as I can tell.

– Option A is the solution you’ve mentioned already. I would have an img tag inside the same div as the swf position:absolute and have flash do an ExternalInterface.call("hideImage") call to JavaScript when the swf is loaded and have the hideImage function in javascript remove/hide the img tag.

– Option B (which is what I would go with) is to use a preloader inside of flash. Set up two separate keyframes at the first of flash. I usu label my first one “loading” and the second one “main”. In loading I have actions similar to the following:

// stop the playhead from moving ahead
stop(); // you can also use gotoAndStop("loading"); if you want

function loaderProgressHandler(event:Event):void {
    // switch the framehead to main which will show your content
    if(event.bytesLoaded >= event.bytesTotal) {
        event.target.removeEventListener(Event.PROGRESS, this.loaderProgressHandler);
        this.gotoAndStop("main");
    }
}

this.loaderInfo.addEventListener(Event.PROGRESS, this.loaderProgressHandler);

Flash will show the “loading” frame segment once it loads, your swf won’t switch to “main” until the rest of the swf is done loading. I’d recommend some sort of preloader with a percentage indicator if you swf is as big as you’re saying.