FlashのPNGシーケンスとスプライトシート を使ってみたよ

Flashが、アニメーションとしてSWF以外に書き出せる主なもの• HTML5 Canvas

• WebGL

• ムービー（MOV）

• アニメーションGIF

• PNGシーケンス（JPEGシーケンス、GIFシーケンス）

• スプライトシート

Flashアニメーションの みどころ

• プログラミングされた動きの美しさとは対極に近い位置にある、人の手が入った動きの面白さ

• 比較的習得が容易な技術のため、裾野の広さ≠納品レベルのクオリティの高さ

• 書き割りアニメ（コマアニメ、パラパラアニメ）とトゥィーンとの親和性の高さ

順番にみてみましょう

HTML5 Canvas

特徴

• Canvasが使える案件なら積極的に導入したい

• Flash5～MXあたりでつまずいた人でも使いこなせる

• Canvasは使えないがCSS3アニメーションが使える案件なら、AdobeEdgeという選択肢も

PNGシーケンス

特徴• いわゆる連番PNG

• とりあえずこれで書き出しておけば後はなんとでもなる程の汎用性の高さ

• ムービークリップの入れ子はNG。アニメーションの階層構造はグラフィックシンボルで

• アニメーションGIFも、いったんこれで書き出しておけばいい（Flashでそのまま書き出すと色数が落ちて汚いので、いったんPNGシーケンスで書き出しといて、PhotoShop経由などでGIFアニ化させるのがセオリー）

スプライトシート

特徴• スプライトシート最強伝説が今始まると言っても過言ではない

• 過言かもしれない

• スプライトシートは、PNGシーケンスで書き出しておいてTexturePackerでスプライトシート化が最高だが、Flashから直接作れる手軽さはあなどれない

• Androidなどでタイル上に並べるときに切れ目が見えちゃう場合は、「シェイプの余白」を5px前後にするといいよ

スプライトシートって？• 複数の画像ファイルを一枚のファイルにまとめたもの。読み込み、表示、いずれにおいても複数ファイルのままより管理しやすい

• 別途、場所の情報が書かれたファイルが必要で、その役割をXMLやJSONが担う

• 場所情報が書かれたXMLやJSONのフォーマットの違いによって、いろんな種類がある

番外• CanvasもCSS3アニメも封じられた場合どうするの？

• →jQueryでごりごりアニメーションします

• mach3さんがFlashのスプライトシートをjQueryで使用するライブラリを公開されています

• http://mach3.github.io/flashspritejs/