Flex-Ajax Bridgeを使ってみる

今までJavaScriptとActionScript間の処理をさせるには、ExternalInterface を使って呼び出せるメソッドをわざわざ作らないといけなかった。この場合、作業が増えてしまう。

ここで、Adobe Labsからつい最近卒業したばかりのFlash-Ajax Bridgeがすばらしく役に立つ。

１．Flex側の手順
まず、FABridge.asをFlexにimportする
メインのmxmlに<fabs:FABridge xmlns:fabs="bridge.*" />と入力してFABridgeを読み込む

２．HTML側の手順
HTML側でFABridge.jsをimportする
１番で作成したSWFファイルをEmbedする

<object id="flexApp" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,5,0,0" height="240" width="320">
 <param name="flashvars" value="bridgeName=presentationLive"/>
 <param name="src" value="PresentationLive.swf"/>
 <embed name="flexApp" pluginspage="http://www.macromedia.com/go/getflashplayer" src="PresentationLive.swf" height="240" width="320" flashvars="bridgeName=presentationLive"/>
</object>

JavaScriptで下記のように書いたら、SWF内のメソッド、変数などにアクセスできてしまう

<script language="Javascript" type="text/javascript">
  function sendAuthRequest(){
　flexApp = FABridge.presentationLive.root();
　var authCallback = function(event){
        alert(event.getData().status+" : "+event.getData().session+" : "+event.getData().id);
          session = event.getData().session;
        host_id = event.getData().id;

        startLive(); //start broadcasting live
   }
   flexApp.getAuth().addEventListener("LoginResult", authCallback);
   flexApp.login(document.getElementById("email").value,document.getElementById("password").value);
　}
    
　function startLive(){
        flexApp.enterRoom('create',host_id,session);
  }
</script>

詳細はAdobeのFABridgeページへ