Flash Professional CS6 と CreateJS の連携と言えば Toolkit for CreateJS ですが、その他にも Flash Pro CS6 のスプライトシート生成機能を使って、Flash Pro CS6 から CreateJS 用にコンテンツを書き出すという手があります。
その際、アニメーションがビットマップ化されるため (スプライトシートになるので当然ですが)、Toolkit を使用した場合と比べて、ファイルサイズや実行時のメモリ使用量は増えそうです。また、ベクタ図形のような、自由な拡大縮小も難しいでしょう。
その代わり、「XX が再現されない」といった互換性に関する心配は減りそうです。また、フレームごとに描画を行う必要がない (フレームに対応するビットマップ領域を表示するだけでよい) ため、CPU の負荷が減ることも期待できます。
ということで、上手に Toolkit とスプライトシートを組み合せると、CreateJS を使った表現の幅を広げることができるかもしれません。
CreateJS 用のスプライトシート生成方法
前回の記事では、Starling 用のデータを生成するために、スプライトシート生成ダイアログの「データ形式」のプルダウンから "Starling" を選択しました。
このプルダウンのリストの一番下には "easeljs" という項目があります。CreateJS 用に書き出したい場合は、この easeljs を選んだ状態で生成を実行します。すると、スプライトシートと一緒に、同名の JS ファイルが生成されます。
なぜ easeljs の場合は XML ファイルではなくて JS ファイルかというと、ファイル内には、スプライトシートのデータだけでなく、生成されたデータと画像を読み込んでアニメーションを再生するクラスが JavaScript で記述されているからです。
そのため、後は、クラスのインスタンスを生成してステージに追加するだけで、スプライトシートとして書き出したアニメーションを表示できます。Starling の場合だと、これらのコードは自分で書かなければなりませんでした。
ということで、スプライトシートを使う場合、CreateJS の方が、一手間少ないことになります。
下は生成される JS ファイルの例です。
(function(window) { mySym = function() { this.initialize();
} // スプライトシートとデータの読み込み
mySym._SpriteSheet = new SpriteSheet({ images: ["mySymbol.png"], frames: [[0,0,257,85,0,127.35,41.35]] }); // アニメーション再生用のクラスを初期化 var mySym_p = mySym.prototype = new BitmapAnimation(); mySym_p.BitmapAnimation_initialize = mySym_p.initialize; mySym_p.initialize = function() { this.BitmapAnimation_initialize(mySym._SpriteSheet); this.paused = false; } window.mySym = mySym; }(window));
コード内では大きく 2 種類の作業が行われています。スプライトシートの読み込みと、それをアニメーションとして再生するクラスの初期化です。
上の例には含まれていませんが、シンボルのタイムラインにラベルがあれば、ラベルにジャンプして再生するためのコードも生成されます。
ちなみに、生成されるクラスの名前は、Flash Pro 内でのシンボル名と同じです。上の例だと、mySim という名前のシンボルがライブラリ内にあったことになります。
なお、複数のシンボルを選択して、スプライトシート生成を行った場合は、それぞれのシンボルに対応するクラスが生成されます。
SpriteSheet クラスと BitmapAnimation クラスの紹介は次回以降に続きます。
コメントする