FlashCS6のスプライトシート出力 : ぴぽや旧ブログ

FlashCS6のスプライトシート出力

2012.09.03

アドビのFlashCS6にはスプライトシート出力という新機能が搭載されました。
スプライトシートや詳しいFlashCS6での操作手順はこちらの動画をご覧ください。

スプライトシートの作成とワークフロー | Learn Flash Professional CS6 | Adobe TV

要はウディタの戦闘エフェクトアニメーションのような、アニメーションのコマを１枚の画像にまとめた状態に出力してくれるわけです。
てことはFlashでエフェクトアニメを作ったりしたときの画像出力が超ラクチンになる！と思って、いじり始めてみましたが、いくつか注意が必要でしたので、簡単にまとめておきます。

まずは、FlashCS6でシンボルを作って、シンボル内でアニメーションを作っていきます。
今回は簡単にこんなかんじのを。

タイムラインやレイヤーはこんなかんじ。
上のレイヤー「アニメ」に丸が変化するアニメーションので、
下のレイヤー「ガイド」に青いグラデーションの四角枠があります。
下のレイヤーに置いてある四角枠がポイントになるのですが、あとで説明します。

シンボル内でアニメーションが完成したら、ライブラリパレットからそのシンボルを選択右クリックメニューから「スプライトシートを生成」を選択します。

「スプライトシートを生成」画面が表示されますので、いくつか項目を設定していきます。
まずは「画像のサイズ」、自動調整にすると勝手に余白をつけちゃうので、ギリギリの画像にするため、手動入力します。
今回は１コマの画像サイズ240×240pixelなので、その倍数で指定します。
あとは「出力ファイル名」を入力して、「書き出し」ボタンを押せばOKです。

※↓画像をクリックすると拡大されます。

出力されたファイルはこの２点。
PNG画像ファイルとXMLファイル。XMLファイルはHTML5やFlashのアクションスクリプトなどのプログラムで制御する際に、PNG画像中のどの位置にどのサイズのコマ画像があるといった情報が記述されています。
私には今のところ用がないのでXMLファイルはゴミ箱行きになってしまいます。

さて、すんなり出力できたじゃないか。というところですが、
予め問題に対処したタネを仕込んでおいたので、簡単でした。
そのタネは最初のシンボル内のレイヤーの説明で下のレイヤーに配置した青いグラデーションの四角枠です。

FlashCS6のスプライトシートの生成では、１コマの画像サイズをそのシンボル内の画像がある領域から判断してしまうため、普通にアニメーションを作った場合は明確に指定することができません。
というわけで、１コマのサイズを明確に指定するためにアニメーションを作ったレイヤーの下に青いグラデーションの四角枠を配置したわけです。
この四角枠のサイズが240×240pixelになっています。

今回はわかりやすく枠に色をつけてありますが、スプライトシートの生成を実用する場合には枠を透明や透明色にしちゃえばいいわけです。

今回は枠をシンボル化してあるので、「カラー効果」アルファを０％にしてやれば、出力されるスプライトシートは１コマのサイズを240×240pixelのままで、この枠が画像に出力されることはありません。

また、注意事項として、この１コマサイズを決める枠の「位置とサイズ」の数値に小数を含まないように調整しましょう。
少数を含んでしまうと、出力される１コマのサイズが微妙にずれてしまうことがあります。

おまけとして、「スプライトシートを生成」以外にも便利な機能が。
同じ手順でライブラリからシンボルを選択し、「PNGシーケンスを書き出し」を選択すると１コマ１コマのバラ画像を出力することができます。
こちらは「スプライトシートを生成」みたいに面倒なことはないので、出力サイズの数値を入力して書き出せばOKです。
１コマサイズを固定するための枠を用意する必要もないです。

私が普段使っているFlashCS3ではこの機能(シンボル単体でのシーケンス画像出力)はなかったので、CS4以降かCS6で追加されたものだと思います。

さて、これでFlashで作ったアニメーションを他プログラムで使用できる画像に出力するのがとても手軽になりました。
ちょっと工夫すればウディタのキャラクター歩行画像だってFlashで作って出力できちゃいますねぇ。
今までは出力がめんどくさかったので、FlashではAfterEffectsで使用するパーツを作るぐらいしかしてこなかったけど、Flash上だけで作る新たな素材を考えてみたいと思います。

関連記事