最近、多くのホームページ（HP）でアニメーションを使用しているのを見かける。これらは、前回に解説した「Ｊａｖａ」を使うものが多いが、Ｊａｖａでオリジナルのアニメを作るには高度なプログラミング知識が必要で、初心者の手に余る。しかし、だれにでも簡単にアニメが作れる「GIFアニメーション」というものもある。

◆基本はパラパラ漫画

GIFアニメとは、簡単にいうと、何枚かの静止画像を用意し、それらを一定の順番、間隔で次々に表示していくもの。紙芝居や「パラパラ漫画」のようなものだ。名前の通り、GIF画像を使用する。

GIFアニメを作るためのソフトは、インターネット上でいくつかのシェアウェア、フリーウェアが公開されている。今回は、シェアウェアの「GIF　Construction Set」（以下、GIFCON）を使ってみる。

　「http://www.mindworkshop.com/alchemy/gifcon.html」にアクセスし、「GIFCON32.EXE」をダウンロード。自分ののパソコンにインストールする。

◆まずは絵をかこう！

次に、アニメーションの元となる画像を用意する。これは、ウィンドウズ95付属のソフト「ペイント」で、好きな絵をBMP形式でかき、ホームページ作成講座の第７回で使用した画像変換ソフト「GIX」（http://www.tocka.com/indexj.html）を使ってGIF画像に変換する。

最初は静止画三枚からなるアニメを作ってみよう。「ペイント」を起動して、ツールバーから「変形」「キャンバスの色とサイズ」と進み、画像サイズは、幅、高さともに200と入力し、単位はピクセルを選ぶ＝写真１。

続いて、写真２のように連続して表示すると動きが出てくるような絵をかき、それぞれ表示順に「gazou1.bmp」「gazou2.bmp」「gazou3.bmp」の名前で保存。さらにこれらを、GIXを使ってGIF形式に変換しておこう。

◆画像の表示する間隔

画像の準備ができたら、GIFCONを起動し、ツールバーの「File」から「New」を選ぶ。すると、白いウィンドウの中に画像のサイズが入力される。最初の状態では640X480ピクセルになっているので、200X200ピクセルに指定し直そう。ツールバーの「Edit」をクリックして、現れたウインドウの「Screen width」と「Screen depth」にそれぞれ200と入力し、「OK」をクリックする。

次に、画像をどのように表示するか指定する。ツールバーの「Insert」から「LOOP」を選択。これは、この後指定する画像表示を何回も繰り返すという意味だ。

次に、「Insert」から「CONTROL」をクリック。次に「Edit」を選んでひとつの画像の表示時間を指定する。

「Delay」の部分で100分の1秒単位で指定できるが、ここではひとつの画像を一秒間表示させるので、100と入力。「Remove　by」の部分は「Background」を選ぶ＝写真３。

◆使う画像を指定

次に、表表示する画像を指定する。「Insert」→「Image」と進み、さきほど作成した「gazou1.GIF」を選択。続いて現れるウインドウでは、「Remap this image to the global palette」をチェックして「OK」をクリックする。

この段階で、画面は写真４のようになっている。「CONTROL」と「IMAGE〜」の行は組になっており、一対で、どの画像をどれだけの長さ表示するかを指定できるわけだ。続いて、「IMAGE」の行をクリックして反転表示させたまま「Insert」を選択し、「CONTROL」をクリック。この部分も、「Edit」でさきほどと同様に指定。続いて「Insert」で「gazou2.GIF」を指定する。以下、「gazou3.GIF」も同様に指定。画面は写真５の状態になった。

◆アニメを表示できた！

　表示方法の指定を終えたら、ツールバーの「File」から「Save　as」を選び、「anime.GIF」と名前をつけて保存。ネットスケープで表示してみると、このように紙芝居風のアニメーションが表示される。ファイルとしては「一枚のGIF画像」なのだが、実は何枚かの画像をまとめて、動画を表示できるわけだ。あとは、通常のGlF画像と同様に、HTML文書で表示位置などを指定すればいい。

また、さらに画像を増やして動きを細かくし、画像ごとに表示時間を変えてみたりすると、このようにもっと多彩な表現が可能になる。ただし、あまり画像を細かくしすぎると、データ量が多くなって転送に時間がかかってしまうので注意しよう。

GIFアニメを使うと、かなり手軽にHPに動きを取り入れられる。さまざまな表現方法を工夫してみてほしい。

＝毎週月曜日掲載