ご依頼についてお問い合わせFlashCS6のスプライトシート出力2012.09.03アドビのFlashCS6にはスプライトシート出力という新機能が搭載されました。スプライトシートや詳しいFlashCS6での操作手順はこちらの動画をご覧ください。TV要はウディタの戦闘エフェクトアニメーションのような、アニメーションのコマを1枚の画像にまとめた状態に出力してくれるわけです。ことはFlashでエフェクトアニメを作ったりしたときの画像出力が超ラクチンになる!と思って、いじり始めてみましたが、いくつか注意が必要でしたので、簡単にまとめておきます。FlashCS6でシンボルを作って、シンボル内でアニメーションを作っていきます。今回は簡単にこんなかんじのを。タイムラインやレイヤーはこんなかんじ。下のレイヤー「ガイド」に青いグラデーションの四角枠があります。下のレイヤーに置いてある四角枠がポイントになるのですが、あとで説明します。シンボル内でアニメーションが完成したら、ライブラリパレットからそのシンボルを選択右クリックメニューから「スプライトシートを生成」を選択します。「スプライトシートを生成」画面が表示されますので、いくつか項目を設定していきます。「画像のサイズ」、自動調整にすると勝手に余白をつけちゃうので、ギリギリの画像にするため、手動入力します。今回は1コマの画像サイズ240×240pixelなので、その倍数で指定します。あとは「出力ファイル名」を入力して、「書き出し」ボタンを押せばOKです。※↓画像をクリックすると拡大されます。出力されたファイルはこの2点。PNG画像ファイルとXMLファイル。XMLファイルはHTML5やFlashのアクションスクリプトなどのプログラムで制御する際に、PNG画像中のどの位置にどのサイズのコマ画像があるといった情報が記述されています。私には今のところ用がないのでXMLファイルはゴミ箱行きになってしまいます。出力できたじゃないか。問題に対処したタネを仕込んでおいたので、簡単でした。そのタネは最初のシンボル内のレイヤーの説明で下のレイヤーに配置した青いグラデーションの四角枠です。FlashCS6のスプライトシートの生成では、1コマの画像サイズをそのシンボル内の画像がある領域から判断してしまうため、普通にアニメーションを作った場合は明確に指定することができません。いうわけで、1コマのサイズを明確に指定するためにアニメーションを作ったレイヤーの下に青いグラデーションの四角枠を配置したわけです。この四角枠のサイズが240×240pixelになっています。今回はわかりやすく枠に色をつけてありますが、スプライトシートの生成を実用する場合には枠を透明や透明色にしちゃえばいいわけです。今回は枠をシンボル化してあるので、「カラー効果」アルファを0%にしてやれば、出力されるスプライトシートは1コマのサイズを240×240pixelのままで、この枠が画像に出力されることはありません。注意事項として、この1コマサイズを決める枠の「位置とサイズ」の数値に小数を含まないように調整しましょう。少数を含んでしまうと、出力される1コマのサイズが微妙にずれてしまうことがあります。おまけとして、「スプライトシートを生成」以外にも便利な機能が。同じ手順でライブラリからシンボルを選択し、「PNGシーケンスを書き出し」を選択すると1コマ1コマのバラ画像を出力することができます。こちらは「スプライトシートを生成」みたいに面倒なことはないので、出力サイズの数値を入力して書き出せばOKです。1コマサイズを固定するための枠を用意する必要もないです。私が普段使っているFlashCS3ではこの機能(シンボル単体でのシーケンス画像出力)はなかったので、CS4以降かCS6で追加されたものだと思います。これでFlashで作ったアニメーションを他プログラムで使用できる画像に出力するのがとても手軽になりました。工夫すればウディタのキャラクター歩行画像だってFlashで作って出力できちゃいますねぇ。今までは出力がめんどくさかったので、FlashではAfterEffectsで使用するパーツを作るぐらいしかしてこなかったけど、Flash上だけで作る新たな素材を考えてみたいと思います。NEXT≫プロフィール管理人:ぴぽフリーのグラフィックデザイナーという傍ら、「ゲームを作りたいなぁ♪」と奮闘中です!ぴぽやブログは2018年9月に新サイトに移行しました。HiRoadminSEO対策:ウディタRPGツクール画像素材ゲームゲーム制作無料エフェクトドット絵PNG。