極意(50)PhotoScapで作るGIFアニメーション

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

画像の説明

後記のオンマウス画像の表(おもて)画像となる1枚目の画像です。
ファイル名:20170210_fujisaki.png

 

画像の説明

後記のオンマウス画像の裏(うら)画像となる2枚目の画像です。
ファイル名:20170210_fujisaki
_onmouse.png


先ずは2枚でオンマウス画像を作成

画像の説明

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

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

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


GIFアニメーションを作成・その1

画像の説明

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

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

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


GIFアニメーションを作成・その2

画像の説明

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


GIFアニメーションを作成・その3

画像の説明

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


GIFアニメーションを作成・その4

画像の説明

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


オンマウス画像とGIFアニメーションの違いは?

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

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

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

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

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


ご意見箱