Flash(Animate)で綺麗なアニメーションGIFの作り方

このサイトに載せているGIFアニメの作り方を紹介します。
2017/3/20追記:今は別の方法使ってます、詳しくはコチラ
 Flash(Animate)で綺麗なアニメーションGIFの作り方【改】

基本的に動きはFlash(最近名称がAdobe Animateに変わったけど、以下Flashと記述)で制作。Flash単体でGIFアニメ書き出し機能もありますが、画質が悪かったり、作り方によって動きが再現できなかったりするので、最終的な画像書き出しにはFireworksを使用しています。

Flash→(swf→SAC→)連番png→Fireworks→アニメーションgif

という流れ。以下詳細を説明します。

Flashでの作業

連番pngを出力するためのアニメーションを作成します。
注意点としてはルートのタイムランをそのままキャプチャするように画像出力されるため、ムービークリップ(グラフィックシンボルはOK)の入れ子をしない、ガイドレイヤーも書き出しされるのでレイヤーを非表示にしておく。
あとから位置や大きさの調整、全体を揺らす演出とかがしやすいように、自分の場合はルートに一つグラフィックシンボルを作り、全てその中で展開させています。
ルートのタイムラインがそのまま連番画像になるので、最後にフレーム数を調整すること。
ムービクリップの入れ子や、ActionScriptを使う場合は後述します。FlashからGIFアニメの作り方

アニメーションが出来上がったら、[ファイル>書き出し>ムービーの書き出し]で、『フォーマット』をPNGシーケンスに。普段このサイト用には『カラー』は24ビットですが、背景を透過する必要がある場合は24ビット(アルファチャンネル)を選択、これでアニメーションを連番pngで書き出せました。FlashからGIFアニメの作り方

ムービークリップの入れ子やActionScriptを使っている場合

この場合は一度通常のswfを出力して、SWF Animatin Converter というソフトを使うと連番pngに変換できます。公式サイトはコチラ
使い方はとても簡単で、swfをドラッグ&ドロップして、『Convert』ボタンを押す、『フォーマット』がpngになっていることを確認してOKを押すだけ。FlashからGIFアニメの作り方 FlashからGIFアニメの作り方 FlashからGIFアニメの作り方

唯一の注意点は、書き出すコマ数がルートタイムラインのフレーム数に連動しているため、例えば完全スクリプト制御で1フレームしか必要なくとも、書き出したい分だけフレームを伸ばしておく必要があります。

Fireworksでの作業

複数画像をステートに並べた状態で開く機能があります。
[ファイル>開く]で、上記で書き出した連番pngを複数選択、下のチェックボックス『アニメーションとして開く』にチェックして開きます。FlashからGIFアニメの作り方

開けたらあとは[ファイル>画像プレビュー]で、『形式』アニメーションGIFを選択。
コマ毎の表示時間やループ回数等を設定して『書き出し』ボタンを押せばアニメーションGIFの完成です。FlashからGIFアニメの作り方 FlashからGIFアニメの作り方

One thought on “Flash(Animate)で綺麗なアニメーションGIFの作り方”

Leave a Reply

Your email address will not be published. Required fields are marked *