在flash跟javascript間互相傳值

417564_3083396293676_1811794047_n

因為flash跟javascript都是前端的script language,所以會有機會遇到需要兩邊互傳資料的情況,研究了一下把他整理出來。

Flash的ExternalInterface就是用來與外部溝通的,他有兩個重要的方法:
這個是把值丟給javascript。
ExternalInterface.call("jsMethod", value);
這個則是接收javascript的值。
ExternalInterface.addCallback("jsCallMethod",asCallback);
所以我們在flash內新增一個getInput_txt的文字框來接收js傳來的值,一個sendInput_txt去輸入要丟給js的值,然後一個sendToJS_btn的按鈕把值給送出去。

接下來在actionscript輸入以下程式碼:
  1. sendToJS_btn.addEventListener(MouseEvent.CLICK,onSendButtonClicked);   
  2. ExternalInterface.addCallback("sendToActionScript",getFromJavaScript);   
  3.   
  4. function onSendButtonClicked(e){   
  5.     ExternalInterface.call("getFromActionScript", sendInput_txt.text);   
  6.     sendInput_txt.text="";   
  7. }   
  8.   
  9. function getFromJavaScript(data){   
  10.     getInput_txt.text="JS say: "+String(data);   
  11. }  

然後準備這樣的html:
<div id="jsContent">
<div id="getInput">Flash say:</div>
<input id="setInput" style=" border:1px solid #666"; />
<button id="sendToFlash">send</button>
</div>

  1. $(document).ready(function(){   
  2.     //send infomation to flash   
  3.         function sendToActionScript(data){   
  4.         var flashTarget=swfobject.getObjectById("flashContent");   
  5.         flashTarget.sendToActionScript(data);   
  6.     }   
  7.     $("#sendToFlash").click(function(){   
  8.         var setInput=$("#setInput").val();   
  9.         sendToActionScript(setInput);   
  10.         $("#setInput").val("");   
  11.     });    
  12. });   
  13. //get information from flash   
  14. function getFromActionScript(data){   
  15.     $("#getInput").empty().append("Flash say: "+data);   
  16. }  

這樣就可以在flash跟javascript間互相溝通了。

Demo

參考資料:
關於ExternalInterface.addCallback
ActionScript与JavaScript通信
搭配網頁容器使用外部 API
[AS3][JavaScript] Facebook 發佈訊息的方法

留言