初心者の、初心者による、初心者のためのWebPage作り講座

GIF Animationの作り方

基本的には「パラパラマンガ」です。

・データ量が少なく、フロッピーディスクの上でも作業できる。
・「再生」がほとんどのコンピュータで可能
・WebPageでもバナー等に多く利用されている。

作業の大きな流れ
Windows95添付の「Paint」で何枚かの画像を作る。
「bmp」形式で保存する。
Windows98添付の「Paint」で何枚かの画像を作る。
「gif」形式で保存する。
「イメージコンバーター(ベクターからダウンロード可能)」(注意1)
を使って「bmp」形式の画像を「gif」形式に変換する。
作っておいた画像を「はっとりワールド(Animation Gif Makerの作者のページ)」からダウンロード可能を使ってパラパラとつなげてアニメーションにする。

(注意1):後述の「透過」を使う場合、イメージコンバーターを使うと透過色の指定がなかなかうまくいきませんでした。
私は解決策として表の右列の“Windows98添付の「Paint」”で「gif」に保存するという方法をとりました。
原因はよくわからないのですが・・・・・。
透過を使うとしたらむしろ“Windows98添付の「Paint」”を使い「gif」で保存をお勧めします。
その他は問題ありません。

このようなものが出来ます。

準備:以下のプログラムを用意しておきましょう。

1、絵を描くプログラム:グラフィックソフト。できたら「gif形式」で保存できるものが望ましい。Windows98のペイントで基本的な絵は描けます。

Windows95のペイントは「bmp形式」でしか保存できませんが、次の「イメージコンバーター」で「gif」に変換できます。

2、「イメージコンバーター」(ベクターからダウンロード可能):グラフィックソフトが「gif形式」で保存できるならば不要です。(注意1:先述)

3、Animation Gif Makerをダウンロード。「はっとりワールド(Animation Gif Makerの作者のページ)」から。

取扱説明書

それぞれの詳しい使い方は、ヘルプメニュー等を参考にして下さい。「Animation Gif Maker」については画面左の「映写機のマーク」をクリックするととても詳しい説明書が出てきます。

「Animation Gif Maker」の中の「パラメーター」の中の「消去法」を使いこなすと、かなりおもしろいものが出来ます。試してみて下さい。

ここでは基本をということで3つほど例を紹介します。

例1

1.gif 2.gif 3.gif

という3枚の絵を描いて「Animation Gif Maker」でパラパラとつなげると・・・・・

kemuri.gif

というようなアニメーションが出来ます。

例2

止めておきたい部品(発射台)、移動したい部品(ロケット)、変形させたい部品(噴射炎)等がある場合以下のようにして作れます。

01.gif 02.gif 03gif
最初に基本的な絵を描き
それを01.gifと「名前をつけて保存」
01.gifを元にして絵を描きかえ
それを02.gifと「名前をつけて保存」
更に02.gifを元にして絵を描きかえ
それを03.gifと「名前をつけて保存」

この調子で以下のような 04.gif から 11.gif までの画像を描きました。

これらをつなげると・・・・・

の様なアニメーションを作ることが出来ます。

例3

以上の技やパラメーターの中の「ディレイ」「消去法」「透過」を工夫すると

のようなアニメーションも作ることが出来ます。

サイズについて

あまり大きなサイズにするとデータの量が大きくなり、重たいものとなってしまいます。このページのロケットの例は「150ピクセル×150ピクセル」のキャンパスに描いてあります。

またバナーとしてはリンク集等に登録できるものとして「88ピクセル×31ピクセル」のキャンパスに作っておくと何かと役に立ちます。
(「32ピクセル×88ピクセル」でもいいそうです)


本文にもどる

Last update Feb.1,2002