ExternalInterface, frames loading delay

[lexCA]

Hello everyone,

I have a flash movie which is embedded into a webpage. The webpage fetches data via RPC CGI and uses ExternalInterface plus Javascript to control the movie.

The movie consists of 3 screens which are realized through 3 keyframes (each followed by 9 empty frames just so I can see the full names of the keyframes).
- the initial screen: features a logo which doesn't change
- the second screen contains some movieclips which are controlled through EI
- the third screen is like the second screen but with different movieclips

The control code (AS2) for each screen is in the respective keyframe. There is also screen switching code in a separate actions layer (above the main actions layer) in a single keyframe.

When I test the movie through a simple HTML page on my local machine (no webserver) and provide arguments for the AS code through a form it works fine, so the ActionScript code is correct. When the webpage is running on a webserver and JavaScript interacting with ActionScript, I get into trouble with "...not a function" errors.

Here's the HTML page:

...
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

<script type="text/javascript">

// make sure flash is loaded before calling actionscript from here
var flashReady = false;
var screenNr = -1;


function flashIsReady() {
    window.alert("flash is ready, called from actionscript");
    flashReady = true;
    return "this is javascript";
}



// this is the XMLHttpRequest that will be used for async HTTP requests
var xmlhttp = new XMLHttpRequest();

function doQuery() {
       
    if (flashReady) {
        var flashMovie = document.getElementById('ampel_v8');
    } else {window.alert("flash not ready yet");}
        
    xmlhttp.open("GET", "rpc.cgi");
    xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState == 1) {
            }
            else if(xmlhttp.readyState == 2) {
            }
            else if(xmlhttp.readyState == 3) {
        }
               else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
               
                   // parse the response
                   var lines = xmlhttp.responseText.split("\n");
                   for(var i = 0; i < lines.length; i++) {
                       var line = lines[i];
                       if(line == "") {
                           continue;
                       }
                       var key = line.slice(0, line.indexOf(": "));
                       var value = parseInt(line.slice(line.indexOf(": ")+2));
                       
        WORKS IF ALERT UNCOMMENTED                
//alert("key = '"+key+"' value = '"+value+"'");

          
            if (flashReady) {
    
                     //window.alert(key + ": " + value );
                if( key == "SCREEN" ) {
                    // switch screens
                    var newScreen = parseInt(value);
                    if ( (screenNr == -1) || (screenNr != newScreen) ) {
                        
                        screenNr = newScreen;
                        // WORKS IF UNCOMMENTED
                        //window.alert("screenNr switching;
                    }
                    
                    
                }
                if( key == "TL_STATUS" ) {
                    
                    if( screenNr == 2 ) {
                        flashMovie.sendTLPhase(value);
                    }
                    if( screenNr == 1 ) {
                        flashMovie.sendTLPhaseFT(value);
                    }
                    
                    //window.alert("called send TL phase");
                }
                //window.alert(key == "DIST" && screenNr == 1);
                if ( (key == "DIST") && (screenNr == 1) ) {
                    //window.alert("screenNr wert:" + screenNr);
                    flashMovie.sendDist(value);
                    
                
                }
                if( key == "FOA_STATUS" && screenNr == 1  ) {
                    flashMovie.setFoa(value);
                    //window.alert("called setFoa");
                
                }
                // send countdown time to flash
                if( key == "C_TIME" && screenNr == 2) {
                    flashMovie.sendTime(value);
                    //window.alert("called sendTime");
                }
                if ( key == "E_STATUS" && screenNr == 2) {
                   
                    flashMovie.sendEn(value);
                    //window.alert("called sendEn");
                }
                if(  key == "AC_STATUS" && screenNr == 2) {
                    // send ac status
//                    window.alert("key is " + key);
                    flashMovie.sendAC(value);
                    flashMovie.sendEn(value);
                    //window.alert("called AC and sendEn");
                }
            } else { window.alert("flash not ready yet") }// end if (flashReady)
                    }
                     // call again!
                     doQuery();
               }
               
               else {
                       
                     doQuery();
               }
          }
    xmlhttp.send(null);
}
                                                    
</script>
</head>
<body onload="window.setTimeout('doQuery()', 2000)">

<embed src="ampel_v8.swf" id="ampel_v8" quality="high" bgcolor="#000000" width="800" height="400" name="ampel_v8" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</body>
</html> 

In the code there is two alert messages marked with "WORKS IF ALERT UNCOMMENTED". If both the alerts are commented out, I still get a "...not a function" error!!!

If I am in screen 1, the error message is "flashMovie.sendTLPhaseFT() is not a function". If I am in screen 2, I get a message "sendEn() is not a function". TL_PHASE and EN_STATUS are the first messages that will match in the respective screen, so the two functions mentioned above are the first ones to be called in the respective frame. The screen switches (from the initial screen) but then it just freezes and nothing happens.

The thing I don't understand: how on earth does a window.alert() make a difference??? It looks to me as if the Flash movie isn't loaded completely at all, but it loads frames separately. Without an alert, once the screen is switched, it doesn't manage the load the frame on time and that's why the first function call fails at all. How? Why???

Thanks,

Lex

PS I apologize for double posting, I couldn't get rid of the resolved icon for some reason. I kindly ask the admin to delete the previous post.

[nunomira]

hi lexCA,

Welcome to FlashKit.

From what I understand, your code fails because the swf hasn't completely loaded and flashIsReady() is called before it should.

In order to do make sure that the swf file has loaded completely, you have to use a preloader.
You can have the swf preload itself or you can use another swf for that.
I'm not fond of having swf file preloading themselves, but in this case I guess it's acceptable.

You just need something like:

this.onEnterFrame = function()
{
    var bl = this.getBytesLoaded();
    var bt = this.getBytesTotal();

    if (bt > 4 && bl >= bt)
    {// the movie has finished loading
        // call flashIsReady()
        trace("finished!");
        
        delete this.onEnterFrame;// delete the method
    }
}; 

[lexCA]

Hey Nunomira,

thanks for your reply. I tried a preloader as well, without bt > 4 in the if clause though - didn't help.

The question is if the code really fails because Flash didn't load, or what I would like to know is how does a javascript alert affect flash loading, as the whole thing worked fine when the alerts were on...

[nunomira]

Hi,

What about with bt > 4 ?


Without testing, it's kind of hard, but my understanding is that when you use alert() the rest of the code doesn't run until you click ok, which is enough for the flash movie to become completely available.

So, if you can, upload a simple example with the problem so it can be tested...