GIFアニメの作り方

こんにちわ&こんばんわ えこふぃるたぁ@tuyoです。

Web拍手を設置したい!
とブログを作っている最中に思いつきました。

でも普通のWeb拍手ボタンのフォームだと面白くないし
どうせなら動くGIFアニメを作って
さらにカーソルをGIFアニメの上にあわせた時に
GIFアニメが切り替わる
そんなWeb拍手を設置出来たらとても幸せな気分に
なれるのではないか!!

ということで早速、Web拍手を設置するに
チャレンジしてみました。

最初にGIFアニメを作った事が一度もないので、
まずはGIFアニメってどうやって作るのか?
を調べる必要がありました。

漠然と分かっている事はパラパラ漫画の要領で
最低でも画像が2枚必要だということ。
そうでないと動いてるように見えないですからね~

ということでまずは分かっていることから
やっつけてしまおうと言うことで

カーソルをGIF画像に重ねていない時の絵3枚と
カーソルをGIF画像に重ねている時の絵2枚を作成

こんな感じの待ちの絵3枚↓
20090826_mati

 
拍手時の2枚↓
20090826_clap

 これを順序よく画面を切り替えれば動いているように
見えるはず!

でもどうやって順序良く画像ファイルを切り替えれば
いいの??ということで詰まりました。。

と言うわけでグーグル先生でGIFアニメについて
調べていたところ、GIFアニメを作るツールがあること
を発見しました。

その名は「Giam」フリーのツールで窓の杜から
落とすことができます。

窓の杜→画像・映像・音楽→特殊画像製作→Giam

このステキツール「.jpg」「.png」からでもGIFアニメ
を作成できると言うすぐれもの!
もちろんGIFアニメにした時の色数は256になります。

画面はこんな感じです
20090826_Giam_1

 「View」ウインドウもあり、それでアニメーションの
動きを確認することもできます。

で先ほどの画像を合わせたてできたのがこれ
20090826_waitanime

  20090826_clapanime

 動いとるぅぅぅ!!!
感動の瞬間でしたwww

GIFアニメもできたところで今日のところはここまで
です。

次はいよいよWeb拍手設置です
ではでは


web拍手

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です