GIFアニメーションを作ってみよう

GIFアニメーションを作ってみよう！

GIFアニメーションについて

　コツさえつかめれば、ShockwaveやJavaを使わずにあなたにも、
GIFフォーマットの画像ファイルを使ってGIFアニメーションが簡単に出来るのです。
GIFアニメーションの原理はパラパラ漫画と同じ仕組で複数の絵を連結させて次々と表示させる事で動いているようにみせるということです。これは、GIFファイルフ-マットに定義されていることなので、マクロを書いたり特別な再生ソフトを使う事もありません。

ここでは、Macintoshの場合での方法を例にして説明します。
Windows版の場合は使用するツ-ルソフトは違いますが、使い方の概念はかわりません。
（でもブラウザーがNetscape Navigatorは、2.0b3以降でないと使えない事は覚えておいてください。）

まず最初に必要なソフトをそろえる

　MacintoshでGIFアニメーションを作る場合「GifBuilder」というツ-ルソフトがあります。
mac.orgよりダウンロ-ドできます。アクセスしてGifBuilder 0.5という文字をみつけダウンロ-ドを行い解凍して下さい。（フリ-ソフトです。）
またこれは、最近のパソコン誌のCD付録にもよくついていますので探してみて下さい。
どうしてもみつからない場合、専門誌でエ-アイ出版「新・HTML&CGI入門」という本の中の付録CDにあります。
ちなみににWindows場合は「Microsoft Animator」というツ-ルソフトがあります。（フリ-ソフトです。）

つぎにアニメーションさせるGIF画像(パラパラ漫画の絵)を作る

　アニメーションさせるGIF画像(パラパラ漫画の絵)をグラフィックソフトで作ります。
（Photoshopや、Graphic Converter等）グラフィックソフトで作成された、PICT、GIF、TIFF、いずれかの形式のファイルであればなんでもかまいません。
Photoshopは市販ソフトでグラフィックソフトの定版です。
Graphic Converterはシェアウェアソフトです、ダウンロ-ドを行い解凍して下さい。シェアウェアソフトなので登録が必要です。

それでは、サンプルを使って説明していきます。

　例：左からC-1.GIF C-2.GIF C-3.GIFというファイル名で3つ(コマ絵)のGIF画像を用意しました。C-1.GIFから順に表示させてアニメーションしている様に見せるのです。

C-1.GIF C-2.GIF C-3.GIF

ここであまり大きな画像を作ったりコマ数を多くるすると、ブラウザーでの表示時間が遅くなります。

GifBuilderを使ってアニメーションする動画ファイルを作る

　GifBuilderを起動すると"Frames"というウィンドウが表示されます。このウィンドウに先ほど用意したC-1.GIF 、C-.GIF 、C-3.GIFをドラッグ&ドロップします。
"Frames"の中にC-1.GIF 、C-.GIF 、C-3.GIFのファィル名が表示されます。一番上の画像から順に表示されていきます。順番はファイル名をドラッグして移動できます。

表示される順番を確認したら、Animationメニュ-からStartを選んで、アニメーションする様子を確認します。

Optionsメニュ-でLoopingを選びループする回数を設定します。
Foreverにするとアニメ-ション連続表示になります。

Optionsメニュ-でDefault Interframe Delayを選びコマ間の表示時間を設定することができます。

設定が終わったら、Fileメニュ-のSave Asを選んで適当な名前(○○○○.gif)必ずGIFで保存します。
ここでは保存したファイル名をcatANIMEs1.gifとしています。

それから、色数の多いコマ絵を作成した時にちょっと気を付けるのは、場合により保存したアニメーションがもとのコマ絵の色表現を出来ない時があります。色数の多いコマ絵を作成する時は、GIFをドラッグ&ドロップした時にいったんコマ絵のカラ-パレットを保存しておいて、そのカラ-パレットを呼び出してカラ-指定（ロ-ドパレット）をすることにより防ぐことができます。

またGIFアニメ-ションの難点としてGIFアニメ-ションをおいているペ-ジ上でアクションをおこすと止まってしまう点があります。現在これはどうしようもありません。

HTMLファイルにタグを埋め込み確認する

　タグは普通の画像(GIFやJPEG)ファイルと同じ<IMG SRC="○○○○.gif">です。
うまくアニメーションしているかブラウザーで確認して見ましょう。

　うまくできましたか、これで講座の終了です。
「GifBuilder」には、他にもいろいろの機能がありますので、試してみるとさらに面白いものが出来ると思います。
応用編として透明GIF講座で学んだ方法と合わせるとどんな背景色のペ-ジでも一見透明に見えているようなアニメ-ション画像を表示できます。あとはみなさんの経験とセンスだけです。