50.GIFアニメーション - 藤心HAIKクラブです。（QHMクラブの別館です）

極意（50）PhotoScapで作るGIFアニメーション

下記の２枚の画像は、簡単バナーで作成した 420x140px のバナーもどきの画像です。
この画像を使って、一つはオンマウス画像を、もう一つがGIFアニメーションを作ってみました。

画像の説明

後記のオンマウス画像の表（おもて）画像となる１枚目の画像です。
ファイル名：20170210_fujisaki.png

画像の説明

後記のオンマウス画像の裏（うら）画像となる２枚目の画像です。
ファイル名：20170210_fujisaki
_onmouse.png

画像の説明

前記の表裏画像２枚で作成したオンマウス画像です。
画像の上にマウスをもっていくと画像が切り替わります。

[check] 上記のおまじないです。

&show(20170210_fujisaki.png,change,画像の説明);

画像の説明

前記の表裏画像２枚で作成したGIFアニメーションです。画像の切り替え間隔の時間は３秒に設定してあります。

[check] 上記のおまじないです。

&show(fujisaki_logo2.gif,,画像の説明);

画像の説明

前記のGIFアニメーションで右から左への画像切り替え効果を設定してみました。

画像の説明

前記のGIFアニメーションで下から上への画像切り替え効果を設定してみました。

画像の説明

前記のGIFアニメーションで画像切り替えの間に黒いフレームを挿入してみました。

GIFアニメーションは、拡張子gifの動画です。
それに対してオンマウス画像は拡張子jpgやpngの静止画です。
静止画の上にマウスを持って行くと画像が切り替わるのがオンマウス画像です。
それに対してGIFアニメーションはマウスに無関係に動画が表示されています。

オンマウス画像は２枚の静止画で構成される画像表示方法を実現しています。
最初に表示される画像を表（おもて）画像と呼び、その表画像にマウスを持って行って表示される画像を裏（うら）画像と呼び、常に２枚の画像がペアでオンマウス画像を構成しています。

表画像と裏画像のファイル名にある決まった規則があります。
即ち、表画像のファイル名を abcd1234.jpg として保存した場合、
裏画像のファイル名を abcd1234_onmouse.jpg で作成保存します。

そして、その表画像と裏画像の２枚の画像を予めサーバーにアップロードしておきます。
オンマウス画像を表示したいページで、以下のようなおまじないでオンマウス画像が表示されることになります。

&show(abcd1234.jpg,change,画像の説明);