GIFアニメを作ろう! 「Giam」 | to be continued ~とあるプログラマーの実験的開発日誌~

to be continued ~とあるプログラマーの実験的開発日誌~

WEBデザイナー兼プログラマーである管理人が日々のトラブル解決に向けて奮闘する開発日誌。



別サイト宣伝用にGIFアニメを使ったバナーを作成してみたので、その製作過程を紹介しようと思う。


実はこれまでGIFアニメを利用する機会がほとんどなかったので(使用する場合はフリーで公開されているもので充分だった)、今回が初めての作成となる。使用したソフトはGoogleの検索で上位に表示された「Giam ver.2.09」。作者のホームページ(http://homepage3.nifty.com/furumizo/)からダウンロード。なお、今回作成するGIFアニメは文字が一定間隔で切り替わるだけのシンプルなもので、必要となる画像は予め用意しておいた。


とりあえずヘルプも何も読まずに、勘だけを頼りにやってみる。メイン表示と思われる左側に素材となる画像をドラッグアンドドロップすると、下のウィンドウに1コマと画像サイズが表示される。どうやらこれで良さそうだ。続けて2コマ目、3コマ目と同様にD&D。非常に簡単だ。


すべての画像をD&Dしたところで、上段の再生ボタンと思われる▲をクリック。別ウィンドウが現れて、恐ろしい速さで文字が入れ替わる。アニメーションさせるのだから、考えてみればこのスピードは当然だろう。どこかに入れ替えスピードを調整する機能があるはずだと思い、確認してみると右下にウェイトという項目が。どうやら1/100秒単位でコマ送りを調整できるようだ。各画像を300ミリ秒で再生するように設定する。あとはファイル→名前をつけて保存で完成。


ただ、画像の切替えでフェードインやフェードアウト、スクロールなどをするのもそれ用の画像を用意してアニメーションさせなければならないようで、その点は不便を感じた。ソフトウェア上でできると良かったんじゃないかと思う。


Giamの画面イメージ


to be continued ~とあるプログラマーの実験的開発日誌~


作成したバナー


to be continued ~とあるプログラマーの実験的開発日誌~