アニメIMGとは何か

アニメーション風見鶏 ←これ！
アニメーションGIFを利用せずにアニメーションする画像を使用することが出来ます。

最近、GIFというのは、著作権絡みの問題のせいで非常に利用しにくくなって来ています。
しかしGIFというのはPNGやJPEGには無い大きなメリットが二つあります。
１つは通過GIF、つまり画像の一部透明化。この技術がない限り画像は四角形しか利用できません。
もう１つはアニメーションGIF。
ホームページでアニメーションを表示する方法は意外と少なく、メジャーなのはGIFとFLASHぐらいでした。
しかし、作成に高価なソフトが必要となるFLASHと著作権がらみで使用しにくいGIF。
ホームページでアニメーションする画像が少ないのはこのためです。
このスクリプトセットでアニメーションを手軽に使用できるようになるでしょう。

アニメIMGのギャラリーへ行く。

使い方

アニメIMGが使用したいファイルと同じ場所にあるイメージ まずは下の“ダウンロード”からファイルを取得してください。 続いて、“anime_img（もしくはanime_img.js）”を アニメIMGを使用するファイルと同じフォルダに移動します。 つまり左の図の様な状態にします。

※同じフォルダに置いておかないと使用できないわけではありません。 “相対パス”を正確に指定することで使用することができます。

次にアニメIMGを使用するファイルの編集を行います。 下のHTMLを見てください。


<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="anime_img.js"></SCRIPT>
<TITLE>アニメIMGのテスト</TITLE>
 </HEAD>
<BODY onLoad="animation()">
<IMG src="test.png"  motion="test01.png | test02.png " > </BODY>
</HTML>
 青色の字がアニメIMGの動作用に書かれています。
青色の字は３つの固まりに分かれています。
１つ目が“<HEAD>～</HEAD>”の中に記述されている１行。
これは「ダウンロードしてきた“anime_img”に書かれている事を使用しますよ」という意味であり、
“<HEAD>”より後ろ、“</HEAD>”より前ならどこに記述していただいても構いませんし、
文章を変える必要もありません。

２つ目が“<BODY>”の中に記述されている１行です。
これはページの表示が完了するとアニメーションを動かし始めることを意味しています。
普通は“<BODY>”ですが、“<BODY onLoad="animation()">”と書き換えます。

３つ目が“<IMG>”の中に記述されている１行です。
これはアニメーションする画像を指定しています。
この場合、test.png→test01.png→test02.png→test.png…。
と、表示されます。


ダウンロード

anime_img.zip
anime_img.exe
両方とも同じファイルが圧縮されています。

    「取り敢えずクレ！！」という方は
  1. “anime_img.exe”をクリックし、
  2. “実行(R)”を押してください。
  3. “セキュリティの警告”画面が表示されると思います。自己判断の上、“実こうする(R)”を押してください。
  4. “展開先フォルダの選択”が表示されます。最上段にある“デスクトップ”を選択し、“OK”を押してください。
  5. これで“デスクトップ”に“anime_img”のフォルダができ、その中にファイルがあります。

リファレンス

motion="filename2 (|)(| filename3)"
アニメーション設定「２枚目のファイル名(|)(|３枚目のファイル名)」
重要度：必要（アニメーションさせない場合は不要）
初期値：なし
アニメーションするために画像を指定します。

２枚のアニメーションなら motion="filename2" となり、３枚ならファイルごとをバーティカルライン(|)で区切ります。
つまり motion="filename2 | filename3" となります。
ファイル名にスペースが含まれている場合は“%20”という字に置き換えてください。（しかし、置き換えなくても動作することがあるようです。）
４枚使用したアニメーションで１枚目と３枚目を５フレーム分表示させるには、 ファイルを指定した後に表示したいフレーム数たげバーティカルライン(|)を追加してください。
つまり motion="||||| filename2 | filename3 | ||||| filename4" となります。
気を付けなければいけないことは１枚目以外を５フレーム数表示するのに 必要なバーティカルライン(|)は６本であるということ。
flash="time"
１周するまでの時間「0.1秒」
重要度：不要
初期値：flash="10"（１秒で１周します）
アニメーションが１周するのに掛かる時間を0.1秒単位で指定します。
flash="1" とした場合、0.1秒で１周します。
flash="5" とした場合、0.5秒で１周します。
小数点は使用しないでください。
１秒間に10枚以上がアニメーションするような指定は避けてください。
論理的には１秒間に1000枚のアニメーションまで設定できますが、非常に高負荷になるためブラウザがフリーズする可能性があります。
インターネットはピンからキリまでパソコンの性能があります。あまり高負荷にならないように注意してください。

使用例

制作中

更新履歴

2003/04/10 AM 2:xx Version1.0.0：取り敢えず完成。
2003/04/12 AM 6:xx Version1.0.1：スクリプトエラーがでてしまうのを訂正。

＜戻る