flash as 与js通信

刚开始学习flash as3编程，一些学习笔记也丢上来吧，现在还都是些初级的话题～

Flash已经提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback，call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。下面是官方文档对call和addCallback的说明：

利用 ActionScript，可以在 HTML 页上执行以下操作：

调用任何 JavaScript 函数。?
　　传递任意数量、具有任意名称的参数。?
　　传递各种数据类型（Boolean、Number、String 等等）。?
　　接收来自 JavaScript 函数的返回值。?
　　通过在 HTML 页上使用 JavaScript，可以：

调用 ActionScript 函数。?
　　使用标准的函数调用表示法传递参数。?
　　将值返回给 JavaScript 函数。?
　　实际使用的时候，需要注意以下两点：

一、调用时机。js调用flash对象提供的函数时，可能swf还没有完全加载完，此时调用会失败。类似的，flash调用js函数时，也存在js函数还没load到的情况。所以adobe官方示例里采用了一种比较绕的逻辑来避免这种问题：

页面上有一个变量_isJSReady，初始为false。还有一个isJSReady函数用来返回_isJSReady的值，供flash调用。在合适的时机（例如：window.onload），将_isJSReady设置为true，表示flash可以使用js里的函数了；?
　　flash里有一个定时器，定期（例如：100ms）去调用页面上的isJSReady方法，直到isJSReady返回true，就可以addCallback，调用页面上的flashReadyHandler方法，通知页面可以跟flash交互了。?
　　二、如何获取flash对象。将flash插入到页面有很多方法，例如swfobject.js或者AC_RunActiveContent.js类似的库。我们来看一种最原始的方法，直接在html插入标记来插入flash：

  
  

<object?classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"? ?
   
   

codebase="http://download.macromedia.com/pub/shockwave/cabs ?

   
   

/flash/swflash.cab#version=10,0"?width="730"?height="520"? ?

   
   

id="test"?align="middle">　 ?

   
   

<param?name="allowScriptAccess"?value="sameDomain"?/>　 ?

   
   

<param?name="allowFullScreen"?value="false"?/>　 ?

   
   

<param?name="movie"?value="test.swf"?/>　 ?

   
   

<param?name="quality"?value="high"?/>　 ?

   
   

<param?name="bgcolor"?value="#ffffff"?/>　　　 ?

   
   

<embed?src="test.swf"?quality="high"?bgcolor="#ffffff"?

   
   

width="730"?height="520"?name="test"?align="middle"?allowScriptAccess="always"?

   
   

allowFullScreen="false"?type="application/x-shockwave-flash"　　?

   
   

pluginspage="http://www.adobe.com/go/getflashplayer_cn"?/>　 ?

   
   

</object>?

  
  

假设test.swf提供了hello的方法，我们来在js里调用这个方法，代码如下：

document.getElementById("test").hello();
　　结果，除了IE之外，其他浏览器都不会工作，会提示找不到hello这个方法。这个问题困扰了我比较久。最后发现：在非IE浏览器里，flash提供的方法是加在embed上的，我们要得到object下的embed对象，调用embed上的方法才会成功！

官方示例是采用下面方法获取flash对象的：

  
  

function?getFlashMovieObject(movieName){ ?
   
   
　　if?(window.document[movieName]){ ?
   
   
　　　return?window.document[movieName];　　 ?
   
   
}else?if?(navigator.appName.indexOf("Microsoft")==-1){ ?
   
   
　　　if?(document.embeds?&&?document.embeds[movieName])? ?
   
   
　　?return?document.embeds[movieName];　? ?
   
   
?}else{　　? ?
   
   
?return?document.getElementById(movieName);　 ?
   
   
　}　
  
  

这里罗列出所有情况，当然不会有问题。其实，没必要弄得这么复杂，我们给object和embed取不同名称，例如一个test1，一个test2，如果是IE就getElementById(“test1”)，其它浏览器getElementById(“test2”)就行了。另外，如果使用js插入swf的话，很可能js里就已经做过判断，根据不同浏览器来输出object和embed其中一种。总之，如果调用失败，首先检查得到的flash对象是不是[object HTMLEmbedElement]。

最后，放上一个例子，是我参照官方文档写的。

补充一个细节：在傲游里，刷新页面后js调用flash里的方法可能会失败。这篇文章有提到这个问题，解决方法是给swf地址加上随机数，让浏览器每次都重新加载flash。不过这样swf就不能被浏览器缓存，很无语～下面是一段判断傲游的js代码，建议只针对傲游加随机数。

  
  

var?isMaxthon?=?false;? ?
   
   
?try?{ ?
   
   
　　　if?(external.max_language_id?!=?undefined){ ?
   
   

　　　　　　isMaxthon?=?true; ?

   
   
　　　}　 ?
   
   
}catch?(e){}? ?
   
   
?alert(isMaxthon);?
  
  

package {
    import flash.display.Sprite;
    import flash.events.*;
    import flash.external.ExternalInterface;
    import flash.text.TextField;
    import flash.utils.Timer;
    import flash.text.TextFieldType;
    import flash.text.TextFieldAutoSize;

    public class ExternalInterfaceExample extends Sprite {
        private var input:TextField;
        private var output:TextField;
        private var sendBtn:Sprite;

        public function ExternalInterfaceExample() {
            input = new TextField();
            input.type = TextFieldType.INPUT;
            input.background = true;
            input.border = true;
            input.width = 350;
            input.height = 18;
            addChild(input);

            sendBtn = new Sprite();
            sendBtn.mouseEnabled = true;
			sendBtn.useHandCursor=true;
			sendBtn.buttonMode=true;
            sendBtn.x = input.width + 10;
            sendBtn.graphics.beginFill(0xCCCCCC);
            sendBtn.graphics.drawRoundRect(0,80,18,10,10);
            sendBtn.graphics.endFill();
            sendBtn.addEventListener(MouseEvent.CLICK,clickHandler);
            addChild(sendBtn);

            output = new TextField();
            output.y = 25;
            output.width = 450;
            output.height = 325;
            output.multiline = true;
            output.wordWrap = true;
            output.border = true;
            output.text = "Initializing...n";
            addChild(output);

            if (ExternalInterface.available) {
                try {
                    output.appendText("Adding callback...n");
                    ExternalInterface.addCallback("sendToActionScript",receivedFromJavaScript);
                    if (checkJavaScriptReady()) {
                        output.appendText("JavaScript is ready.n");
                    } else {
                        output.appendText("JavaScript is not ready,creating timer.n");
                        var readyTimer:Timer = new Timer(100,0);
                        readyTimer.addEventListener(TimerEvent.TIMER,timerHandler);
                        readyTimer.start();
                    }
                } catch (error:SecurityError) {
                    output.appendText("A SecurityError occurred: " + error.message + "n");
                } catch (error:Error) {
                    output.appendText("An Error occurred: " + error.message + "n");
                }
            } else {
                output.appendText("External interface is not available for this container.");
            }
        }
        private function receivedFromJavaScript(value:String):void {

            output.appendText("JavaScript says: " + value + "n");
			output.borderColor=0xffffff*Math.random();
        }
        private function checkJavaScriptReady():Boolean {
            var isReady:Boolean = ExternalInterface.call("isReady");
            return isReady;
        }
        private function timerHandler(event:TimerEvent):void {
            output.appendText("Checking JavaScript status...n");
            var isReady:Boolean = checkJavaScriptReady();
            if (isReady) {
                output.appendText("JavaScript is ready.n");
                Timer(event.target).stop();
            }
        }
        private function clickHandler(event:MouseEvent):void {
            if (ExternalInterface.available) {
                ExternalInterface.call("sendToJavaScript",input.text);
            }
        }
    }
}

  
  

   
   

html js

<!-- saved from url=(0014)about:internet --> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ExternalInterfaceExample</title> <script language="JavaScript">     var jsReady = false;     function isReady() {         return jsReady;     }     function pageInit() {         jsReady = true;         document.forms["form1"].output.value += "n" + "JavaScript is ready.n";     }     function thisMovie(movieName) {         		 if (navigator.appName.indexOf("Microsoft") != -1) {            			 return window[movieName];         } else {             alert(document[movieName]);			 return document[movieName];         }     }     function sendToActionScript(value) {         		 thisMovie("ExternalInterfaceExample").sendToActionScript(value);     }     function sendToJavaScript(value) {         document.forms["form1"].output.value += "ActionScript says: " + value + "n";     } </script> </head> <body onload="pageInit();">      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"             id="ExternalInterfaceExample" width="500" height="375"             codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">         <param name="movie" value="ExternalInterfaceExample.swf?id=<?php echo(rand());?>" />         <param name="quality" value="high" />         <param name="bgcolor" value="#869ca7" />         <param name="allowScriptAccess" value="sameDomain" />         <embed src="ExternalInterfaceExample.swf?id=<?php echo(rand());?>" quality="high" bgcolor="#869ca7"             width="500" height="375" name="ExternalInterfaceExample" align="middle"             play="true" loop="false" quality="high" allowScriptAccess="sameDomain"             type="application/x-shockwave-flash"             pluginspage="http://www.macromedia.com/go/getflashplayer">         </embed>     </object>      <form name="form1" onsubmit="return false;">         <input type="text" name="input" value="" />         <input type="button" value="Send" onclick="sendToActionScript(this.form.input.value);" /><br />         <textarea cols="60" rows="20" name="output" readonly="true">Initializing...</textarea>     </form>  </body> </html>