Pex Textbook 1.1.0 documentation

SWF の初期化を行う

«  画質、描画速度を最適化する   ::   Contents   ::   アニメーション演出待ち  »

SWF の初期化を行う

Pex で複雑なアプリケーションを構築する場合に SWF の初期化タイミングと画像や変数といった動的要素の更新タイミングが問題になることがあります。

ここでは、目的別に初期化の適切なタイミング判定や手法について見ていきます。

画像を埋め込みたい

こちらは特に初期化への配慮は不要です。 オプション指定も出来ますが、以下のように API を用いて置換する方がより汎用的に使えるでしょう。

var pex = new Pex(swfpath,canvas,oprion);
var api = pex.getAPI();
api.replaceMovieClip("インスタンス名",image,横幅,縦幅);

画像(上記サンプルコード内では image オブジェクト)は事前にロードしておく必要があります。 読み込みが完了していない場合は、置換がうまく反映されません。

MovieClip の変数を指定したい

Pex では setVariable や getVariable 等の API を使って SWF の内部変数を動的に書き換える・取得するといったことが可能です。

var pex = new Pex(swfpath,canvas,oprion);
var api = pex.getAPI();
api.setVariable("/","変数名","値");// 第一引数が空文字列または / の場合はルート階層の指定を意味します。

第一引数にパスを指定することでルート以外の任意の MovieClip に対して変数操作が可能ですが、 ルート以外の MovieClip では初期化タイミングの考慮が必要になります。

Pex のインスタンスを生成した直後のタイミングでは内部で非同期的な処理が走っており、 MovieClip が構築中であるためアクセスが出来ない場合があります。

var pex = new Pex(swfpath,canvas,oprion);
var api = pex.getAPI();
api.setVariable("mcパス","変数名","値"); // MovieClip が存在しないため、結果的に無視されます

そのため、API 等を用いて SWF に対する Pex 側の処理と変数操作の処理の同期を取る必要があります。

以下のように frameCallback を使い 1 フレーム目の処理を待って同期を取るのが良いでしょう。

option = {//これはOption引数の一部です
        "frameCallback": {
                "/": { // ルート MovieClip の
                "1": function(){ // 1 フレーム目に対するコールバックで
                        // 各 MovieClip に対する変数操作を行う
                        }
                }
        }
}

この処理が手間であると考える場合は、変数のやり取りはルート MovieClip に限定して行うのが良いでしょう。

SWF 側の初期化を終えてから各種 API を実行したい(Fscommand2 を使う)

上記のタイミングでは SWF 内の各 MovieClip のフレーム1に存在する ActionScript はまだ実行されていません。

ActionScript 側の実行を待ってから各種 API を実行したい場合であれば、 ActionScript 側から実際に準備ができたタイミングで fscommand2 を用いて js に通知を送り その通知を受け取ってから JS 側からAPI操作する方法が確実です。

//フレーム1
fscommand2("JavaScript","jsのグローバル関数名","その他引数"...);

ただし注意点があります。

各 MovieClip の ActionScript は浅い階層から順番に実行されていきます。つまりルートのフレーム1の一番最後の段階では、 子供の MovieClip の ActionScript 実行はまだ行われていないという事です。 (Adobe FlashPlayer で SWF を再生したときも同様の動きをします。)

確実に ActionScript の処理が終わった後に JavaScript に通知を行いたいのであれば、フレーム2で fscommand2 を用いるか frameCallback でフレーム2再生のイベントをもらって、そこから処理を続けるのがいいでしょう。

SWF 側の初期化を終えてから各種 API を実行したい(addEventListener を使う)

Pex 1.0.7 で addEventListner API が追加され、MovieClip が生成されたタイミングでイベントが受け取れるようになりました。

MovieClip の初期化処理を行う場合はこのイベントをフックすると良いでしょう。

api.addEventListener("movieclipcreate", onMcCreate, "/mcPath");
function onMcCreate(api, mcPath) {
        // 処理を記述
}

イベントハンドラの実行タイミングは Movieclip が生成され、その ActionScript が実行された後になります。

また、第三引数を与えて MovieClip を指定するようにしてください。 第三引数を省略すると全ての MovieClip で発生する movieclipcreate イベントで発火するようになり、 パフォーマンス低下の原因となり得ます。

サンプル例

_images/initialize.png

動作サンプル: waitingInitialize1.html

flaファイル: waitingInitialize1.fla

動作を眺めるだけでは分かりづらいサンプルですが、 上記で考察した各種タイミングでの変数アクセスと画像置換を行っており、 細かいタイミングの差異での挙動を確認する事ができます。

ソースコードを読み解きながら確認してみてください。

まとめ

以前は Fscommand2 や frameCallback を利用した初期化方法が用いられてきました。 これらは実績のある方法ですが、コードが複雑化する傾向があり、 Pex 1.0.7 以降であれば movieclipcreate イベントを利用するのが良いでしょう。

«  画質、描画速度を最適化する   ::   Contents   ::   アニメーション演出待ち  »