![[UX]は投げ捨てろ！](https://cdn.slidesharecdn.com/ss_thumbnails/sendai-150131020702-conversion-gate01-thumbnail.jpg?width=560&fit=bounds)
Flashアニメーションの書き出し
- 1.
- 2. Flashが、アニメーションとして SWF以外に書き出せる主なもの • HTML5 Canvas •WebGL • ムービー（MOV） • アニメーションGIF • PNGシーケンス（JPEGシーケンス、GIFシーケンス） • スプライトシート
- 3. Flashアニメーションの みどころ • プログラミングされた動きの美しさとは対極に近い 位置にある、人の手が入った動きの面白さ • 比較的習得が容易な技術のため、裾野の広さ納品 レベルのクオリティの高さ • 書き割りアニメ（コマアニメ、パラパラアニメ）と トゥィーンとの親和性の高さ
- 4.
- 5.
- 6. 特徴 • Canvasが使える案件なら積極的に導入したい • Flash5∼MXあたりでつまずいた人でも使いこなせ る •Canvasは使えないがCSS3アニメーションが使え る案件なら、AdobeEdgeという選択肢も
- 7.
- 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/