Pex Textbook 1.1.0 documentation

SWF と JavaScript の連携

«  operation (疑似ブレンド設定)を使う   ::   Contents   ::   画質、描画速度を最適化する  »

SWF と JavaScript の連携

ここでは、 SWF と JS ( JavaScript )でメッセージやイベントをやり取りする方法についてまとめます。

本機能も 画像の差し込み/置換を行う と並んで Pex では頻繁に用いられる重要な機能となります。

機能の必要性

今まで Flash コンテンツを開発する場合は、入力制御やゲームロジックなど、必要な処理を ActionScript に寄せて書いてきたと思いますが、 Pex を用いたコンテンツ開発ではデバッグの難易度、構造化の容易性、実行効率といった様々な観点から、JavaScript に寄せて 必要なロジック処理を記述することをお勧めしています。

勿論 Pex も ExGame に準じる高度な ActionScript VM を搭載しており、ActionScript 1 の機能を幅広くカバーしておりますが、 複雑なコンテンツになるほど、VM 上での実行性能やデバッグの難しさ、コードのメンテナンス性維持など様々な問題が発生する傾向があります。

おそらく Flash Developer の方も、複雑なアプリケーションであれば好んで ActionScript 1 で開発を行うよりは JavaScript など、より機能性の高い言語で書きたいと思う方が多いでしょう。 Pex ではその為の機能をふんだんに搭載しており、ここで紹介するものは JavaScript と SWF で相互にやりとりを行う上で基本となるものです。

Fscommand2

SWF から JS へ向けてのメッセージを伝える一番簡単な方法は ActionScript の fscommand2 命令を用いる事です。

書式は以下の通りです。(これは flash タイムライン上の記述です。)

//単純な呼び出しの場
fscommand2("JavaScript", "呼び出し関数名");

//引数を受け渡す場合
fscommand2("JavaScript", "呼び出し関数名","任意の引数","任意の引数","任意の引数"....);

呼び出し関数名は JavaScript のグローバル空間に設定されている関数の名前となります。

この関数名は何でもかまいませんが、未定義呼び出しのランタイムエラーをさけたり、 プロジェクトでの管理のしやすさなどを考慮して、統一した関数名を指定するようにします。

サンプル例

_images/jsSwfInteraction.png

タイムラインアニメが再生が終了した際にイベントを投げるサンプルは以下です。

動作サンプル: jsSwfInteraction.html

flaファイル: jsSwfInteraction1.fla

Fscommand2 の引数に何を渡すかについても、統一したルールを用いると良いでしょう。

このサンプル例では第一引数はどれも “swfend” というを文字列を取っており JavaScript 側に用意されたグローバル関数 swfend を呼び出し、 第二引数ではそのグローバル関数に渡す引数情報を指定しており、どのアニメーション再生が終わったかといった SWF 側の情報を送る形式を取っています。

FrameCallback

タイムラインアニメーションの再生が終了した際のイベント通知を行う場合は、FrameCallback を用いる事ができます。 ある Movieclip の指定位置にタイムラインの再生が到達した際に、指定した JavaScripi 側のコールバック関数を呼び出す仕組みです。

設定するには Pex のオプションに ”frameCallback” の項目を加え、対象の MovieClip 名、 フレーム指定(フレーム番号またはラベル名)、コールバック関数を登録します。

{//以下はPexのオプション内の一部
        "frameCallback": {
                "対象MovieClip名": {
                "フレーム指定": function(){
                        console.log("frame callback");
                }
        }
}

※またフレーム指定では “last” という最終フレームを意味する為の特別な文字列が使えます。 このため、”last” というラベル名は、フレーム指定では使えなくなっていることに注意してください (ラベル名に対応した特定のフレームではなく最終フレームが参照されます)。

サンプル例

実際に frameCallback を受けるサンプル例は以下です。 ルートや子ムービクリップへのファンクションひも付けの記述に注目してください。

動作サンプル: jsSwfInteraction2.html

flaファイル: jsSwfInteraction2.fla

«  operation (疑似ブレンド設定)を使う   ::   Contents   ::   画質、描画速度を最適化する  »