Flashアニメを、使い勝手のいいPNGシーケンスなどに書き出すための説明です。

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

2. Flashが、アニメーションとして
SWF以外に書き出せる主なもの
• HTML5 Canvas
• WebGL
• ムービー（MOV）
• アニメーションGIF
• PNGシーケンス（JPEGシーケンス、GIFシーケンス）
• スプライトシート

3. Flashアニメーションの
みどころ
• プログラミングされた動きの美しさとは対極に近い
位置にある、人の手が入った動きの面白さ
• 比較的習得が容易な技術のため、裾野の広さ 納品
レベルのクオリティの高さ
• 書き割りアニメ（コマアニメ、パラパラアニメ）と
トゥィーンとの親和性の高さ

4. 順番にみてみましょう

5. HTML5 Canvas

6. 特徴
• Canvasが使える案件なら積極的に導入したい
• Flash5∼MXあたりでつまずいた人でも使いこなせ
る
• Canvasは使えないがCSS3アニメーションが使え
る案件なら、AdobeEdgeという選択肢も

7. PNGシーケンス

8. 特徴
• いわゆる連番PNG
• とりあえずこれで書き出しておけば後はなんとでもなる程の汎
用性の高さ
• ムービークリップの入れ子はNG。アニメーションの階層構造は
グラフィックシンボルで
• アニメーションGIFも、いったんこれで書き出しておけばいい
（Flashでそのまま書き出すと色数が落ちて汚いので、いったん
PNGシーケンスで書き出しといて、PhotoShop経由などでGIF
アニ化させるのがセオリー）

9. スプライトシート

10. 特徴
• スプライトシート最強伝説が今始まると言っても過言では
ない
• 過言かもしれない
• スプライトシートは、PNGシーケンスで書き出しておいて
TexturePackerでスプライトシート化が最高だが、Flash
から直接作れる手軽さはあなどれない
• Androidなどでタイル上に並べるときに切れ目が見えちゃ
う場合は、「シェイプの余白」を5px前後にするといいよ

11. スプライトシートって？
• 複数の画像ファイルを一枚のファイルにまとめたも
の。読み込み、表示、いずれにおいても複数ファイ
ルのままより管理しやすい
• 別途、場所の情報が書かれたファイルが必要で、そ
の役割をXMLやJSONが担う
• 場所情報が書かれたXMLやJSONのフォーマットの
違いによって、いろんな種類がある

12. 番外
• CanvasもCSS3アニメも封じられた場合どうする
の？
• →jQueryでごりごりアニメーションします
• mach3さんがFlashのスプライトシートをjQuery
で使用するライブラリを公開されています
• http://mach3.github.io/flashspritejs/