Photoshop＋FlashでGIFアニメーションを作るレシピ
今では猫も杓子もFlashアニメーションばかりになってしまいましたが、GIFアニメーションも枯れた技術として静かなブームになっています（ほんとか？）。
そこで今回は贅沢にもAdobe製品であるFlashとPhotoshopを使ってGIFアニメーションを作ってみましょう。 ある意味、最強のGIFアニメーション作成ツールと言えるのではないでしょうか。笑
用意するもの
- Flash CS3 Professional (CS2, CS4, CS5でも可）
- Photoshop CS3 (CS2, CS4, CS5でも可）
- Illustrator CS3（お好みで）
Flashでの作業
素材画像をFlashでアニメーション
まず、用意した素材画像をFlash内に読み込んで、コマ送りアニメーションでもモーショントゥイーンでも良いのでアニメーションを作りましょう。
Adobe製品を揃えているなら、素材画像作りには迷わずIllustratorを選びたいところです。 Illustratorのベクター形式であればFlash内での変形や拡大縮小もお手のもの。 Flash内で修正も簡単ですし、強くオススメしておきます。
アニメーション作成で注意することは、ActionScriptを使わないこと。 ActionScriptはアニメーションを書き出す際に動作してくれませんので。
アニメーションの書き出し
できたらFlashの書き出しからエレガントにGIFアニメーション画像に… と考えてしまいますが、ちょっと待って！
FlashのGIFアニメーション書き出しは画質が酷い
書き出してみると分かりますが、Flashの書き出し機能で書き出したGIFアニメーション画像はとても見られた画質ではありません。 キメも粗く、色も変わっていて明らかに悪く書き出されてしまいます。
調べてみるとどうやらFlash8から悪くなっているようで、Adobeがこの機能についてはあまり熱心ではないようなのです。
※GIFアニメーションの書き出しは「パブリッシュ」機能で可能になっていました。
通常はFlashとhtmlファイルが書き出される設定ですが、ここに「GIF」の箇所があり、オプションで画像の大きさやループの頻度までちゃんと指定して綺麗に書き出すことができます。
というわけで、この後は特に必要ないのですが、イメージシーケンスを利用したGIFアニメーションの作り方について書いてありますので、興味のある方は続けて御覧下さい。
イメージシーケンスとして書き出しておく
というわけで、Flash単体ではいきなりGIFアニメーションにできないので、一旦連続画像の集まり（イメージシーケンス）として書き出すようにしましょう。
フォーマットはPNGが透過もフルカラーもサポートしているので良いと思います。 保存先に任意のフォルダを新規作成して、そこを保存先に指定してイメージシーケンスとして保存してください。
ちなみにイメージシーケンスとして保存すると、大量の画像ファイルが連番で書き出されるので、保存先を「デスクトップ」にしてしまうとデスクトップが画像ファイルだらけになってしまうので注意！
Photoshopでの作業
では、Photoshopでの作業に移ります。
イメージシーケンスを開く
先ほどFlashで書き出したイメージシーケンスの１番目のファイルを「開く…」で指定しましょう。 その際に「画像シーケンス」のチェックを付けておくのを忘れないように。
画像シーケンスとして開くとフォルダ内の全てのファイルを認識し、フレームレートを決めるようにダイアログに尋ねられます。 ここはFlashアニメーションで設定したフレームレートを入力してOKを押します。（デフォルトではFlashアニメーションのフレームレートが自動で設定されています）
すると、レイヤーウィンドウにムービーレイヤーとして登録されます。 ここで書き出しサイズを決めるために解像度変更を行おうとすると以下のようにスマートオブジェクトに変換する旨のメッセージが表示されます。
ただ、スマートオブジェクトに変換してもちゃんとアニメーション情報は維持されているので、心配しなくても大丈夫です。
ビデオレイヤーのままにしたいのであれば、Flashでアニメーションを作成する時点で実際書き出したい大きさにしておくのが良いでしょう。
GIFアニメーションとして書き出し！
あとは書き出すだけです。 「ファイル」→「Web およびデバイス用に保存…」を選んで、フォーマットをGIFにすると、右下（GIFカラーパレットの下部）でアニメーションを繰り返す設定を決めることができます。
１度だけ繰り返すか、無限に繰り返すか、一定回数繰り返すかを指定することができます。
全ての設定が完了したら保存ボタンを押して書き出しましょう。
確認
できた画像はブラウザにドラッグ＆ドロップすれば動きを確認することができます。
最初はカクカクするよ
確認時に最初のループアニメーションで動きが期待したようなものにならない場合がありますが、これはブラウザがGIFアニメーションを構成する全てのフレームを読み込んでいないことが原因で起こるものです。 一度全て読み込まれればスムーズに再生されるでしょう。
表示する場合にはプリロードしておく
このような動きの不具合を出さないようにするためには、Webページで表示させる場合に次のように事前にブラウザに読み込ませておく（プリロード）ようにすると良いと思います。
<!-- animation.gifを事前に読み込み(HTMLのなるべく上に配置) --> <div stlyle="width:0;height:0;display:inline;background-image:url(path/to/animation.gif);"></div>
まとめ
いかがだったでしょうか。 「Flashだけで作れるじゃん」と思っていたら意外な落とし穴がありましたね。 よく使うソフトの中にも、知っているつもりになっているだけで実際やってみると手こずることってよくありますよね。
しかし実際GIFアニメーションを作ってみましたが、さすがはAdobe製品。 機能や柔軟性を総合的に判断して、GIFアニメーションを作る環境を構築する上でも最強のツールであると再認識しました。
2010-03-15