Pex Textbook 1.1.0 documentation

アニメーション演出待ち

«  SWF の初期化を行う   ::   Contents   ::   再生スピードをコントロールする  »

アニメーション演出待ち

Pex を使ったコンテンツを作成していると、タイムラインアニメーション演出の終了を待つような JavaScript コードを 書く事が頻繁に出てくるのではないかと思います。 ここでは、その際に注意すべき点などを見ていきます。

アニメ終了コールバック

アニメーション終了のタイミングを SWF から Javascript に伝えるには fscommand2 か frameCallbackの仕組みを使えばいいでしょう。

(参考:SWF と JavaScript の連携)

下記サンプルでは、Pex 1.0.7 から実装されたラベル名での frameCallback 指定を使っています。

_images/animation_wait.jpg

動作サンプル: animation_wait.html

flaファイル: animation_wait.fla

このサンプルで注目して欲しいのは、タイムライン上に ActionScript の stop 命令を(1フレーム目を除いて)記述していない事です。 タイムラインの移動/停止/再生は JavaScript 側で制御しています。 ( Fla ファイルを開いて確認してみてください。)

Flash コンテンツ作成の経験があると、アニメーションの終わったフレームに stop 命令を書きたくなってしまうと思いますが、 余計な問題にあたりたくないのなら、フレーム位置を制御する ActionScript は書かない事をおすすめます。 JavaScript 側のタイムライン制御と ActionScript 側のタイムライン制御がぶつかって、意図しない挙動をする事があるからです。

まず、fscommand2 と frameCallback では呼び出されるタイミングが異なるので、不具合が起こった際の対応方法がかわります。 ここで混乱が生じます。どちらを使うにしろ、アニメーションの終了通知をもらう前に、フレーム移動操作を 微妙なタイミング で行うと フレーム移動後に(そこにないはずの) ActionScript が実行されてしまう事があります。

具体的に言えば、次のアニメーション再生を始めたつもりが、前のアニメーション終了フレームにある stop 命令などが 次のアニメーションのフレーム位置に移動してから実行され 結果、次のアニメーション再生が開始されない、というような事が起こります。 それでも大抵の場合はうまく動くだけに、修正コストが高い状態となってしまいます。

もしも ActionScript 側でもタイムライン制御を行わなくてはいけない場合は、 MovieClip の階層をわけ、 Javascript から操作するのは親 MovieClip 、 ActionScript から操作するのは、子 MovieClip と構造から分離してしまうのが良いでしょう。 (その際、親階層の操作は gotoFrame ではなく gotoAndStop になるかと思われます。)

JavaScript 側で一定時間待つ

アニメーション演出が終わるまで単純にきまった尺の長さを待てばいいだけ、というように単純な状況の場合は、 上記のようにコールバックを扱う制御を書く必要はありません。 対応指針としては、setTimeoutを使う処理が最初に考えつくことかと思います。

var api = pex.getAPI();
api.gotoFrame("mc","opening");
setTimeout(handleOpeningEnd,1000*5);
function handleOpeningEnd() {
   //演出後の処理
}

ですが、実際は端末の性能によって何ミリ秒後にアニメーション演出が完了するかは異なります。 余裕をもった秒数を待つという方法でも大きな支障はないでしょうが、 時間ベースではなく、フレーム数ベースでタイミングを制御できると、より間違いの無い処理が書けます。

Pex 1.0.7 からは、enterframeのイベントが受け取れるようになりました。実際のFlash と同様に、フレームが1つ進むごとに発行されるイベントです。 このイベントを利用すれば、タイムラインが指定フレーム数だけ進むまで待っている、というような処理を書く事もできます。

サンプル例

下記は、enterframeイベントを扱ったサンプルです。 SWF は上のサンプルと同じ物ですが、 frameCallback を待つ代わりに”21フレーム待つ”という処理が書いてあります。 ソースコードを確認してみてください。

_images/waitframe.jpg

動作サンプル: waitframe.html

«  SWF の初期化を行う   ::   Contents   ::   再生スピードをコントロールする  »