明けましておめでとうございます!! ども、amo-kです。 2009年最初の投稿は、JavaScript / ActionScript についての内容です。 個人的にはRIA大好物ですので、この辺りは興味深いジャンルです。 では、本題に入ります。 JavaScript と ActionScript で相互に会話ができることを知った。 ...ということは、 ブラウザ操作をトリガーにFlashを操作、 Flash操作をトリガーにブラウザを操作できるということだ。 これは面白い!! ※厳密には、FlashもブラウザのFlashプレイヤで動作している訳だがそこはおいておこう。 という訳で早速動作確認がてら、簡単なjs, as(Flex用mxml)を書き相互会話サンプルアプリを作ってみた。 サンプルアプリ概要
1.JavaScript(白色部分)からActionScriptの関数を実行 サンプルアプリ上部のボタン「js2as」クリックで ActionScript側の関数を実行、実行時刻をFlash上に表示。 2.ActionScript(黒色部分)からJavaScriptの関数を実行 サンプルアプリ下部のボタン「as2js」クリックで JavaScript側の関数を実行、実行時刻をブラウザ上に表示。 ※勿論いずれも何度押してもかまわない。


処理概要
上記サンプルアプリは、flash.externalパッケージのExternalInterfaceクラスを利用している。 JavaScriptからActionScriptの関数を実行するには、ExternalInterface.addCallback()メソッドを利用する。このメソッドでは、JavaScriptから呼び出すActionScript関数を定義する。 また、ActionScriptからJavaScriptの関数を実行するにはExternalInterface.call()メソッドを利用する。このメソッドでは、ActionScriptからJavaScriptの関数名を指定する。 サンプルソース ブラウザ側のサンプルソースコードは、サンプルアプリ白色部分を右クリックしてソースを確認できますので サンプルソースはFlash側のみ記載します。
import flash.external.ExternalInterface;
import mx.controls.*

// as2jsボタンクリック時実行
private function callFunction():void {
    if (ExternalInterface.available) {
        try {
            ExternalInterface.call("as2js");
        }
        catch(e: Error) {
            Alert.show("error : " + e);
        }
    }
}

// JavaScriptイベントのコールバック関数定義
private function setCallbackFunction():void {
    if (ExternalInterface.available) {
        try {
            //JavaScript から実行
            ExternalInterface.addCallback("js2as", function(): void {
                var date: Date = new Date();
                var dateTime: String = date.getFullYear().toString();
                dateTime += "-" + (date.getMonth() + 1).toString();
                dateTime += "-" + date.getDate().toString();
                dateTime += " " + date.getHours().toString();
                dateTime += ":" + date.getMinutes().toString();
                dateTime += ":" + date.getSeconds().toString();
                myLabel.text = "JavaScript => ActionScript: " + dateTime;
            });
        }
        catch(e : Error) {
            Alert.show("error : " + e);
        }
    }
}
参考情報