アニメーションGIFの作成

これから、HTMLやCSSの各種要素について練習していきますが、 まずは、練習するためのテンプレートファイルをダウンロードしましょう。

1. まず、「week09」というフォルダを作成してください
2. ＞ここ＜をクリックし、 「template1.zip」 というファイル名でテンプレートの圧縮ファイルを保存します。
3. 保存した「template1.zip」 のアイコンをダブルクリックすると、 「template1.html」のアイコンが見えますので、 そのアイコンを右クリックして「切り取り」を選び、 「week09」のフォルダに「week09\ex1.html」として貼り付けます。

「アニメーションGIF」は、 複数の素材画像データをパラパラマンガのように順番に表示する仕組をもったファイルです。 例えば、下図が簡単なアニメーションGIFの例です。

このアニメーションファイルは、以下の3つの画像を順に表示しているものです。

ですから、アニメーションGIFを作るためには、以下の２つのステップが必要です。

1. アニメーション化する素材画像ファイルを必要な枚数作成する。
2. 作成した複数の画像ファイルを、 GIFアニメーション作成用ソフトウェアに取りこみ、 それらをまとめて一つのアニメーションGIFファイルに変換する。

それでは、具体的な例を使いながら作り方を説明しますので、 説明を読みながらオリジナルのアニメーションGIFファイルを作って下さい。

Copyright (C) Eri Hayashi 2005, All Rights Reserved

GIMP等の画像作成アプリケーションを用いて、 1コマ1コマの表示に必要なすべての画像ファイルを作成します。 保存形式は、アプリケーション専用のものではなく、 「GIF」、「JPEG」、「PNG」などの汎用画像ファイルとして保存しておきます。 このとき、画像の大きさをそろえておくと、 アニメーション化したときに見やすいものとなります。

作成した画像を、StarSuite Impress (プレゼンテーション)に全部読みこみます。 読みこむには、StarSuite Impress (プレゼンテーション) を起動後、 「挿入」メニューから「画像」を選択し、 作成した画像ファイルをひとつひとつ読みこみます。

例えば、下図はGIMPで作成した手書数字を、 StarSuite Impress (プレゼンテーション)に3枚読みこんだところです。 これで、アニメーションGIFを作る準備ができたことになります。

ところで、画像ファイルの代わりに StarSuite Impress (プレゼンテーション)/ Draw (ドロー) で描いた図 (描画オブジェクト) も利用できます。 これなら、わざわざ別のアプリケーションを起動したり、 画像ファイルを何個も保存することなく、アニメーションGIFができますので、 今回の演習では、描画オブジェクトを使うことにしましょう。

まず、StarSuite Impress (プレゼンテーション) を起動し、 描画オブジェクトを3つ (3つ以上でも可) 作成し、 アニメーションGIFを作る準備をして下さい。

下図は、描画オブジェクトを3つ作った例です。

これ以降が、アニメーションGIFを作る２つのステップのうちの、 第二番目のステップ(画像のアニメーション化)になります。

StarSuite Impress (プレゼンテーション)の 「スライドショー」メニューから「アニメーション」を選択して、 アニメーション・フレームの構成を行うアニメーション・ウィンドウを開きます。

アニメーション・ウィンドウを開いたら、 まず「ビットマップ オブジェクト」を選択しておきます。

以下の手順で表示する順番に画像を登録し、 これを最終フレーム(アニメーションの最後の画像)が登録されるまで繰り返します。

1. 次に表示する画像(描画オブジェクト)を ドラッグして囲むかクリックして選択します。 選択されると、 画像(もしくはオブジェクト)のまわりが緑のアンカーで囲まれます。 (下図では、「3」の文字が選択されています。)
2. アニメーション・ウィンドウの「オブジェクトを適用ボタン」 をクリックします。
3. このフレーム(画像)の表示時間を設定します。 (下図では、1.00秒が設定されています。)
4. 手順 1. へ戻り、次に表示する画像に対しても同じ操作を繰り返します。

最初のフレームを登録

最終フレームを登録

「最初のイメージ画像」ボタンをクリックして巻き戻し、 「再生」ボタン をクリックしてアニメーションを再生し表示を確認します。

ここで、各フレーム(画像)の表示時間の調整やフレームの順番入れ替えを行います。

フレームの構成が完了したら、「作成」ボタンをクリックして、 アニメーション・オブジェクト(アニメーション画像)を作成します。

できたアニメーションオブジェクトを、 以下の手順にしたがって gifファイルとして保存しましょう。

アニメーション再生するのを確認したら、 このオブジェクトをクリックして再び選択状態にします。

次に、このアニメーション オブジェクトをアニメーションGIFファイルとして保存するために、 「ファイル」メニューから「エクスポート」を選択して次の手順を行います。

1. 「ファイルの種類」として 「GIF - Graphics Interchange Format (.gif)」を選択します。
2. 「選択範囲」チェックボックスにチェックを入れます。
3. 「week09」フォルダに移動し、「animation.gif」 など自分の好きなファイル名で保存します。 ただし、拡張子は、「.gif」にして下さい。

   

4. 「GIFオプション」の設定ダイアログが現われますので、 「OK」をクリックします。(設定変更が必要なら、 「OK」をクリックする前に変更して下さい。)

   

サンプルHTML

<p> これが、アニメーションGIFのサンプルです。<br>
  <img src="./animation.gif" alt="アニメーションGIFファイル">
</p>

Webブラウザでの表示結果

これが、アニメーションGIFのサンプルです。