html and swf swapping (display html while swf file loads to 100%)

Question

This is what I want to achieve.

1. While the swf file is loading, wrapper div displays an html content (e.g. text content).
2. When the swf file has loaded 100%, it replaces the text content within the wrapper div, and then plays within the wrapper div.
3. When the swf file is finished playing, it is then replaced with the previous text content.

(This is more like html to swf to html swapping within a div)

any thoughts if this is possible or any other workarounds?

Much appreciated to anyone who could share.

Answer 1

The easiest way to do this is call your div-swapping function from ActionScript in your movie.

You can call is when the movie is 100% loaded and then again from the "last frame" of the movie, so you'd be getting the flash movie to say "show me" and then later "hide me".

Answer 2

Have the HTML and Flash in one div. Since you can't hide a SWF. This trick is to shove it off screen:

<div id="wrapper">
    <div id="flashWrapper" style="position:relative; left:-2000px;">
        <object>flash embed code</object>
    </div>
    <div id="loading">Flash is loading...</div>
</div>

It's more fool-proof to have the SWF call a JS function with the ExternalInterface when it's finished. But you can check it via JS:

<script>
    var v = setInterval(function(){
        if(flashMovie.PercentLoaded() == 100){
            document.getElementById("flashWrapper").style.left = "0px";
            document.getElementById("loading").style.display = "none";
            clearInterval(v);
        }
    });
</script>

If you are inserting the SWF dynamically be sure to wait a millisecond before accessing it.