ほんじゃら堂

めんどくさい仕事をラクにする作業自動化レシピ集

FlexとJavascriptの連携

Actionscript3で作成したSWFからActionscript2で
作成したSWFは呼び出せないようだ。


YoutubeAPIで提供される動画再生用のSWFがActionscript2で
作成されたものらしく、Flex2(Actionscript3)から呼び出しても
うまく動いてくれなかった。
(やり方がおかしかったのかな?)


そこで、YoutubeのJavascriptAPIを使って、Actionscript3-Javascript(-Actionscript2)
という形で連携させてみる。この方法をマスターすれば、Flexコンポーネント
Javascriptを組み合わせて使えるようになりそう。


Flex側からJavascriptを呼び出すには、flash.external.ExternalInterfaceクラスの
callメソッドを使用するのが簡単らしい。
引数も渡せるし、返り値も受け取れる。


Flex

import flash.external.*;
//引数なし返り値なしのJavascript関数を呼び出す
ExternalInterface.call("playVideo");
//引数ありのJavascript関数を呼び出す
var movieId:String = "aaaaa";
ExternalInterface.call("loadVideo", movieId);
//返り値ありのJavascript関数を呼び出す
var volume:String = ExternalInterface.call("getVolume");


Javascript

function playVideo() {
...
}
function loadVideo(movie_id) {
...
}
function getVolume() {
...
return volume;
}


Javascript側からFlexを呼び出す時はFABridgeを使用する。
http://labs.adobe.com/wiki/index.php/Flex_Framework:FABridge

Flex3の場合はライブラリに最初から含まれているのかな?
JavascriptファイルとActionscriptファイルが手に入るはず。


Javascript側で返り値を受け取れるかどうかは未テスト。


Flex

import bridge.*;
var bridge:FABridge = new FABridge();
bridge.rootObject = this; //Javascriptから呼び出し可能な関数を持つオブジェクトを指定する
public function handlePlayerReady():void {
...
}
public function handleVideoStateChange(status:String):void {
...
}


Javascript

<script type="text/javascript" src="FABridge.js"></script>
var flexApp = FABridge.flash.root();
flexApp.handlePlayerReady();
flexApp.handleVideoStateChange(state);


これだけ覚えておけば色々できそうだ。