アニメーションGIFの作り方

1)お絵書きソフト
手持ちのものなら何でも構いません。
フォトショップ、カラーイット、ペイントイット、ペインター、アートスクールダブラー、スーパーペイントといったペイントソフトが作りやすいでしょうが、クラリスワークスのペイント機能でも十分です。またHyperCardでも作ることが出来ます。
カラーはいずれにしても256色までサポートしていれば十分です。

自分で絵を描く場合はマウスなりタブレットが必要ですが、余り絵心のない人はクリップアート集からイラストや写真をコピーしてそれをアニメーションにすることも出来ます。
セーブするファイル形式はTIFF、PICT、GIFのいずれかにします。これに対応していないソフトの場合は、GraphicConverter（シェアウェア）で変換する必要があります。

2)アニメーションGIF作成ソフト
複数のイメージファイルをひとつのGIFファイルにまとめるためのソフトです。この中で、ファイルの順序を変更したり、各ページをめくるスピードを設定します。
Macで動くソフトはいくつかありますが、スイスのYves Piguet氏が作成したフリーウェアのGifBuilderがよいでしょう。他にもいくつかGIFアニメ作成のソフトはありますが、このGifBuilderが機能も十分で、非常に使いやすくまとめられています。最新のバージョンは0.5でここ2年ほどアップデートされていませんが、機能的にはこれ以上のものは必要ないでしょう。
System7以上で動きますが、ドラッグ機能を使うためにはSystem7.5以上が必要です。当然のことながら32ビットColor QuickDrawが必要です。
同氏のホームページやInfoｰMacからダウンロードできるほか、Mac Fan Internetなど主要なインターネット雑誌の付録CDに入っています。
英語のメニューで操作は特別難しくありませんが、やはり英語ではというユーザーのために原作者の許可を得て、日本語版のパッチを作成しましたので、ご使用ください。当クリニックの「薬局」にありますが、ここから直接ダウンロードすることも出来ます。

アニメーションフレームを作る

・それをGifBulderで統合すると右のようにボールが点滅します。

・出来上がりは右のようにボールが回転して見えます。

・以前MacClinicの表紙にも登場した救急車もまったく同じ要領で同じ救急車の絵をずらしながらフレームを作っていっているだけです。

(例4）動く写真
・ともかく面倒が嫌いな人は、ただ単に数枚の写真や既存のイラストをめくるだけというのも出来ます。
・ここでは数枚のスナップ写真を集めて動画風にしてみます。
・写真画像を用意し、PhotoshopやColor It!等のフォトレタッチソフトを使い、サイズを調整し、さらに同じ大きさにカットします（定規を使います）。それぞれに「photo1.gif」「photo2.gif」...のファイルとします。GIF形式でセーブすることが要です。
・これをGifBuilderでまとめて表示すると、数枚の写真が連続して表示されます。この例では5枚の写真を使っていますが、同じ人のためちょっとビデオのように見えますね。

(c)Kristy

・全く違う写真を数枚ギャラリーのように見せてもよいのです。その場合は、一枚毎のスピードをもっとゆっくりした方がよいでしょう。

(例5）本格的なアニメーション
・絵心のある人はもっと本格的なアニメーションに挑戦してみましょう。ここでは、「ジャンプする人」を作ってみましょう。
・ペイントソフトでまず適当な大きなの用紙を作り、マウスかタッチペンで絵を書きます。枚数が大きいほど細かで複雑な動きが出来ますが、ホームページでちょっと人の目を引く程度であれば3、4枚でも結構効果があります。あまり細かなところを気にせずに大胆にいきましょう。ここでは4つのコマをつくりました。それを個別のGIFファイルとしてセーブします。

#1#2#3#4

・れをGifBuilderでまとめるときに、2枚目と3枚目をコピーして逆向きに5枚目と6枚目にします。それぞれの表示速度を少し変えて表示するとジャンプする人になります。

個々で作ったイメージファイルはそれぞれフォルダーを作って入れておけば、次の作業が容易になります。

GifBuilderの使い方

• Macの画像ファイルとして一般的なPICT、TIFF、GIFファイルを直接読み込めみ、自動的にGIF89aファイルに変換する。
• 個々のフレームの順序、スピード等の設定をフレームウィンドーの中で簡単にできる。その結果はリアルタイムにアニメーションウィンドーで見ることが出来る。
• 最適化オプションを使うとファイルの容量を小さく出来る。
• フレームの大きさが違う場合でも自動的に補正してくれる。
• どのブラウザーでも同じ色で表示できるようにカラーパレット機能が用意されている。
• さらに0.5からはフレームの切り替えにいろいろな効果を加えれるようになった

［使用手順］
1)GifBuilderにフレームを読み込む
GBを立ち上げる。このとき前回のアニメーションがフレームウィンドーに残っていないことを確かめる。ある場合は「新規」を選ぶ。フレームが入ったフォルダーからフレームのアイコンをフレームウィンドーにドラッグする。ファイルメニューの「フレームの追加」でやってもよい。

全部入れたことを確かめ、順序の整理をする。順序はフレームをドラッグする。不要なフレームは編集メニューのクリアを選択するか、デリートキーで消すことが出来る。「編集」メニューから全部を一度に番号順にソートしたり逆順にすることもできる。

2)オプションの設定
ここではグラフィック（ピクセル深度、カラーパレット、ディザー）、GIF（サイズ、インターレース、透明）、アニメーション（速度、排棄方法、位置、ループ）のパラメータが設定できる。
フレームをドラッグした場合、自動的に初期値が設定される。初期値は変更することが出来、オプションメニューの「オプションを保存」で保存できる。
フレームウィンドーに表示されるパラメータは全てそこを ダブルクリックすることで設定できる。

3)アニメーションのチェック
「アニメーション」メニューで「開始」を選択するとアニメーションが表示される。「連続」を選ぶと初めに選んだフレームから開始される。コマ送りはコマンド-Ｔでもよいが、矢印の上下キーでも動かすことが出来る。

4)アニメーションの作成
ファイルメニューから「別名で保存」を選ぶ。これでGifBuilderは自動的にフレームを結合し、マルチ画像を一枚のファイルであるGIF89a形式にコンバートする。

5)HTMLページにイメージタグとして加える
編集メニューから「HTMLイメージタグをコピーする」を選び、あなたのHTMLページにペーストする。
この部分は別にGifBuilderを使わないで、普通にHTMLでGIFファイルを設定するほうが簡単だ。必要なのはGifBuilderで作ったアニメーションGIF一つだけで、オリジナルのイメージファイルは捨ててしまっても構わない（後の修正のためにどこか別のところに保管しておいたほうが安全だろう）。

オプションについて

それでは、「オプション」メニューが分かりにくいので、詳しく説明しましょう。

インターレース(Interlace）
インターレースGIFファイル（ホームページで荒い画像から順に細かくなる描写法）に変更する。これはアニメーションGIFでは普通は使わない。

カラー
GIFファイルは256色以下しか扱うことが出来ないが、256色以下の色はそれぞれにインデックス（番号）がつけられ、その色はカラーパレットに保存される。このカラーパレットを選択するのがこのオプションだ。MacとWinodwsでは扱う色が若干異なっており、共通の色は216色しかない。そのため、Netscape Navigatorではこの216色を表示するパレットを持っている。これを6x6x6パレットという。通常GIFアニメを作る場合は、このカラーパレットを選ぶのがよい。

深度
正確にはピクセル深度という。画像は小さな点（画素とかピクセルという）の集まりで表示されるが、この一つのピクセルにどれだけのメモリをもたせるかをピクセル深度という。これが表示できる色の数を決める。通常フルカラーというのは深度24ビットで、RGB（赤緑青）それぞれが8ビットづつ、すなわち1600万色をいう。GIFファイルは256色以下と決められているので、最大が8ビットである。1ビットは2色、2ビットは4色である。白黒イメージの場合は1bit/pixelシステムテーブルかグレースケールテーブルを使う。深度は小さいほどファイルサイズが小さくなる。GIFファイルは複数のフレームを使うために、勢いファイルサイズが大きくなりがちだ。できる限り、色数を押さえたものを作るのがGIFアニメ制作のポイントだ。

ディザリング
GIFアニメの材料として写真を使うことも出来るが、フルカラーのものは256色以下に減色しなければならない。これを単純に色数を減らすと、縞模様やぶつぶつの色が出て非常に汚くなる。ディザというのは、減色するばあいに隣り合った色でなるべく近い色をシミュレートする方法である。ディザをかけたほうがきれいに行く場合と、反対に画質が悪くなる場合があるので、ためしてみるのがよい。

イメージサイズ
個々のフレームのサイズが異なる場合、ここで調整する。「最小のサイズ」が選択されている場合は角フレームの右下コーナーがアニメーションの右下コーナーになるように計算される。フレームは常にアニメーションの境界に入るよう調整される。

バックグラウンド色
バックグラウンドカラーはアニメーションウィンドーでフレームが表示されない部分の色である。これは透明か、表示するホームページのバックグランドカラーに合わせるのがよい。

ループ
このオプションではアニメーションの繰り返し回数を設定できる。ブラウザーによってはこのオプションを認識しないものもあるし、また1回以上であれば無限と認識するものもある。

透明化設定
透明というが、特定の色が透明になるのではなく、指定された色をもつピクセルが変化しない状態にする。色を「白」「始めのピクセル」「その他の色」から選び設定する。
ここの設定は分かりにくいので、自分で何回か見え方を試してみるしかない。

フレームの位置
それぞれのフレームは自由に位置を設定できる。アニメーションの左上隅を０、０として水平、垂直位置をピクセル単位で設定する。

フレーム速度設定
個々のフレームが次のフレームに描き変えられるまでの時間を100分の1秒単位で設定する。個々のフレームの速度を変えると同じフレームを使ったものでも異なるアニメーション効果を作ることが出来る。>始まりや終わりでポーズを取る場合は200とか300とかの数値に設定する。
但し、オンラインでは速度がもっと遅くなったり、反対に速くなったり、又一部の速度が変化したりすることがあるので、ある程度試行錯誤で設定するしかない。

フレーム排棄方法
このオプションの中で一番分かりにくい概念だが、それぞれのフレームが次のフレームに描き変えられるとき前のフレームをどうするかを設定する。
バックグラウンドが透明でなくかつ全部のフレームのサイズがアニメーションのサイズである表場合は「特定しない」を選ぶ。
前のフレームに一部だけを描き加えるために小さなフレームを用意した場合は、前のフレームは残さないといけないので「排棄しない」を選ぶ。
透明なバックグラウンドを物体を移動させるようなアニメーションの場合は、「バックグラウンドに戻す」。ただしこれをサポートしていないブラウザーがあるので注意。
初めに大きなフレームを描き、それをバックグランドとし小さな物体を移動させるようなアニメーションの場合は「前のフレームに戻す」を選択する。
ここも分かりにくく、普通は同じ大きさのイメージで作るので、ここの設定は特定しないを選んでおけばよい。
透明バックグラウンドの設定との組み合わせでいろいろな効果を出すことが出来る。

透明化なし/廃棄=特定しない透明化=白/廃棄=残像を残す

その他のメニューで分かりにくいところの説明をします。

フレームの最適化
これはフレームの画像の中で変化した部分だけを抽出して小さなフレームに描き変える。ファイルのサイズを小さくするのに非常に有効だが、排棄方法で「背景に残像を残さない」を選んでいるフレームがおかしくなることがあるので注意。

ファイルメニューの「変換」
QuickTimeムービーを直接アニメーションGIFに変換する。この方がメモリを節約できる。

編集メニューの「消去」
フレームウィンドーで特定のフレームを消去する場合、シフトキーを押しながら編集メニューを選択すると「消去」が「特殊消去」に変わっており、これを選ぶと消去したフレームの時間が合計して前のフレームに追加される。これはコマ落としをする場合には便利な機能。

●WWWサーバーにアップロードするときの注意
オフラインでNetscapeを立ち上げ、アニメーションGIFの見え方を確認してください。必要に応じ、オリジナルイメージやGifBuilderの設定を変更してください。
これでWWWサーバにアップロードするわけですが、転送中にファイルが壊れることがあります。Fetchの場合はデータ形式を必ず「Raw Data」にすることを忘れないようにしてください。それでもファイルがおかしくなることがあります。

●ブラザーでの見え方に関して
全てのブラウザーがアニメーションGIFの全ての機能をサポートしているわけではありません。Netscape2.0x以降のものであれば、基本的に全てのオプション設定が表示されます。しかし現実にはNetscape2.0xでの表示には問題があり、上の写真のループが止ったりする現象があります。Netscape3.0では問題ないようです。
しかし、現実にはブラウザーの上で見ると、オフラインで見たのとは違ってきます。速度も遅くなったり、フレーム毎の速度も設定が変わってしまったかも知れません。取りあえずは仕方ないと考えるしかないでしょう。
・現在のブラウザーではバックグランドでアニメーションGIFを置くことは出来ません。
・Netscapeで透明なアニメーションがきちんと表示されないことがあります。この場合は、全部のフレームの排棄方法を「バックグランドに戻す」にし、そこで使ったバックグランドをGIFファイルにしてホームページのバックグランドにしてみて下さい。

それではアニメーションGIFでユニークなホームページ作りに挑戦してみてください。

●JavaScripとのコンフリクト
私のホームページの初期画面に初めは救急車のアニメーションを入れていました。その後、現在の時刻を表示するJavaScriptを加えました。私はNetscape3.0で作業をしていたので、どちらもうまく機能していました。しかし、ある日、Netscape2.0.2で見てみるとJavaScript以下の本文が表示されないことに気づきました。色々と実験をしてみた結果次のことが分かりました。

• 問題は同じページ内にJavaScriptの現在の時刻を得る関数（getDate()等）とアニメーションGIFを混在させると発生する。
  
• HTMLでアニメーションGIFを先に、JavaScriptを後に配置するとJavaScript以下のHTMLが表示されない。
  
• 反対にJavaScriptを前に、アニメーションGIFを後ろに置くと表示されるが、Type11のエラーが起きやすくなる。
  
• これはNetscapeに含まれるアニメーションGIFのデコーダーの問題で、Netscape3.0より改善されている。

GifBuilder　(c)95-98 Yves Piguet