Pex Textbook 1.1.0 documentation

制作のコツなど

«  フロントエンド合成で高画質化と起動高速化を実現する   ::   Contents   ::   FAQ  »

制作のコツなど

細かい制作のテクニックや注意点をここにまとめます。

(API ドキュメントの Know-how の項目にも便利な tips が書かれていますので、あわせて確認してみてください。)

開発のコツ

複雑なコンテンツを開発する際はロジックを JavaScript に寄せて SWF と分離し、 SWF はアニメーションに対してのみ責任を持つといった、ビューとロジックを分離した構造を持たせることをお勧めします。

Pex にはその為の API 群がふんだんに用意されており、また上記のように JavaScript 側に寄せた開発を意図して設計されています。

複雑なコンテンツであればタッチイベントの処理も含めて、JavaScript 側でコンテンツをフルコントロールできるようにしておくのが良いでしょう。

メンテナンス性だけでなく、例えばドラッグ操作を組み込むといった従来は難しかった方法も、JavaScript で実現可能な様々なことを取り入れることも出来るようになります。

ログを表示する

Pex 1.0.7 から option の compileAction が false に設定している場合でも、 ActionScript の trace 命令が利用できるようになりました。JavaScript コンソールに内容が表示されます。

trace の出力を行いたくない場合は、 Flash から swf を書き出す際に、 trace を無効とするよう、設定して下さい。

逆に今までのコンテンツで trace 関数を swf 内に記述してある場合、 Pex のバージョンをあげると、コンソールに内容が自動的に表示されてしまいますので、注意してください。

効率の良いデバッグ

Pex に用意されている API の中には開発・デバッグに有効な物がいくつかあります。

api.getMovieClipNames("mcパス");//そこに存在するMovieClip一覧を得る
api.getFrameLabelMap("mcパス");//タイムライン上のラベル一覧を得る
api.getVariable("mcパス","変数名");//変数値を得る

適時、 console.log() で表示してみたり、コンソール上で直接命令を実行してみたりして 開発の役に立ててください。

下記は、 Safari の Web インスペクタで直接命令を実行した例です。

_images/inspector.png

SWF を JavaScript から操作・確認する

API を叩くことで SWF の様々な内部状態を確認でき、また操作が可能です。

JavaScript Developer が Flash Developer と共に作業を行う場合は、この機能が大変便利に働きます。

Flash Developer が一部のアニメーションを新しく組み込んだ、または変更を入れて変数を増やした等、 新たな SWF をパブリッシュした場合には、 エディタ上で JavaScript コードを組み替える前に、まずブラウザのコンソールを開いて API 経由で SWF にアクセスしてみるのが良いでしょう。

setVariables で変数をセットし、gotoFrame や gotoAndStop でアニメーションの再生をキックすることで JavaScript Developer の期待通りに Flash コンテンツがオーサリングされているかどうかをさくっと確認できます。

また、SWF の構造を確認したい場合、 ある MovieClip に対するパスを確認したい場合は getMovieClipNames が使えます。 引数により特定の MovieClip を指定することで階層を掘り下げて構造の確認が可能です。

gotoFrame や gotoAndStop で指定すべきラベル名を確認する場合は、getFrameLabelMap が使えます。

getVariables も、内部変数の状態を確認できる強力な味方です。

swf の読み込みエラーをハンドリングする

Pex の option の設定に onerror というものがあり、ここにコールバック関数を設定すると、 swf の読み込み時に問題があった際にエラーメッセージを引数として呼び出しを受ける事ができます。

Pex 1.0.7 にてこのコールバック関数が呼び出されるのは、以下のタイミングです。

  • XHR による swf 読み込みに失敗した
  • 読み込んだファイルが swf ではない
  • 読み込んだ swf のバージョンに対応していない
  • swf バイナリが途中で壊れている

なお、不正な API 呼び出しなどによりランタイムエラーが起きる事がありますが、 そちらは onerror でハンドリングする事はできません。

MovieClip のインスタンス名設定の指針

Pex のいくつかの API (イメージの入れ替えや shapeDetail の設定など)では、引数に MovieClip のインスタンス名を取る物があります。

ここで、注意したいのはタイムラインで見て(時間的に)異なる場所、または、Movieclip の違う階層にある MovieClip でも、 インスタンス名称が同じであれば API の命令の影響を受けてしまうという事です。

予期しない動作を避けるために、 API で操作する特別な MovieClip には同じ物が使われていない唯一の名前をつけるようにしましょう。

«  フロントエンド合成で高画質化と起動高速化を実現する   ::   Contents   ::   FAQ  »