<< 6.1 アニメを作って張り付ける >>


  1. アニメの原理
  2. 画像を作る
  3. 画像を繋げて保存する

アニメの原理

アニメの原理は、すこしづつ変化した複数の画像を早コマ送りのように連続して表示することによって、人間の目には動いているように見せるというものです。

例えば、次の3つの画像を連続して表示してみます。

まるでコーヒーから湯気が出ているように見えませんか?

画像を作る

これは「3。『絵』、『画像』を作る」を参照して下さい。

上記をもとに、連続して表示することを想定して、何枚かの画像を作成してみて下さい。同じ大きさの画像にする必要があります。

画像を繋げて保存する

複数作成した画像を連続して表示させるような仕組みを作る道具として、この演習室には「アニメGIFメーカー」というソフトウエアがあります。それを用いて作成する手順を簡単に説明しておきます。

  1. 「アニメGIFメーカー」を呼び出す。
    【スタート】 --> 【プログラム】 --> 【SUPER KiD インターネットキット】 --> 【アニメGIFメーカー】

    すると、次のような画面が表示されます。

  2. 画像の大きさを指定する。
    左の「Header」をクリックすると、右側に「スクリーンのサイズ」が表示されますので、作成した画像の幅と高さをピスセル数で入力します。ピクセル数は、画像を作成する場合、最初「新規作成」で用紙の大きさを設定した時に明示されます。必ずその数値と等しいか大きい値を指定して下さい。

  3. 画像の繰り返し回数を指定する。
    左画面の「Loop」をクリックすると、画面右側が「ループ回数」の画面に変わります。そこにループ回数を数値で入力して下さい。ループ回数とは、画像を繰り返し表示する回数です。既定値として10000回が入っていますから、そのままでも構いません。

  4. 画面切り替えの制御項目を設定する。
    左画面の「control」をクリックすると、画面の右側が「表示コントロールの設定画面」に変わります(上記)。ここはそのままで、一度作成してみて下さい。

  5. 画像を挿入する。
    「control」の次に画像を挿入します。 画像挿入は、メニューバーの【ブロック挿入】をクリックし、表示されたサブメニューから【イメージを挿入】をクリックします。すると、画像ファイルのファイル名を入力するウインドウが表示されますので、挿入する画像ファイルの名前を選択して入力します。

    すると、その画像が「control」の次に表示されます。

  6. 「control」を挿入する。
    メニューバーの【ブロック挿入】をクリックし、表示されたサブメニューから【コントロール】をクリックします。すると、左画面の画像ファイルの後に「control」が挿入されます。

  7. 次の画像を挿入する。

  8. 「control」を挿入する。

  9. 次の画像を挿入する。

  10. 「control」を挿入する。

    上記のように繰り返す画像の枚数ほど、画像と「control」を交互に挿入して行きますと次のようになります。

    上記は2枚分しか表示されていませんが、3枚ある場合は、この下にさらに画像と「control」が続きます。

  11. ファイルにまるごと保存する。

    【ファイル】 --> 【名前を付けて保存】 --> ディレクトリを選択し、ファイル名を入力 --> 【保存】

    ここで保存されたファイルは、ファイル名として「ファイル名.GIF」という名前が付けられます。

作成したアニメ画像をホームページに表示する前にその出来栄えをみるには、上記画面にある【再生】を左クリックします。するとanimation というウインドウが現れて連続表示をしてくれます。

あとは、保存したファイル名を、画像表示のタグ付きでHTMLファイルに記述するとホームページの中で表示されます。


講座「とりあえずホームページ」
連絡先:egi@cs.ube-c.ac.jp