次へ

極意（27）GIFアニメにオンマウスする

オンマウス画像と言うと、表と裏の２枚の静止画像をオンマウスで切り替えるのが普通ですが、切り替えた後、GIFアニメーションが動くオンマウス画像もあります。


今回作成の最終目的画像です

以下のオンマウス画像を作成する方法を明らかにしたいと思います。
下記の画像にマウスを持って行くとアニメーションが動きます。

オンマウス画像

左記のおまじないです。

&show(NewBnr901.gif,change,オンマウス画像);


前記のオンマウス画像を作成するためのスキル

[check]前記の「オンマウスGIFアニメ画像」を作るには、それなりのスキル（下記）が必要です。

  1. バナー画像を作れるか？
    ⇒バナー画像の作成には、フリーソフト「簡単バナー」を使用します。
  2. GIFアニメーションを作れるか？
    ⇒GIFアニメーションの作成には、フリーソフト「PhotoScape」を使用します。
  3. オンマウス画像を作れるか？
    ⇒オンマウス画像の詳細についてはコチラを参照して下さい。


先ず、オンマウス用のバナー画像を作成する

フリーソフト「簡単バナー」を使用して以下の２枚の画像を作成します。

オンマウスの表画像 オンマウスの裏画像

[check]解説します。

  1. 左の画像がオンマウス用の表画像です。（ファイル名：NewBnr001.png）
  2. 右の画像がオンマウス用の裏画像です。（ファイル名：NewBnr001_onmouse.png）
    ⇒「簡単バナー」の詳細についてはコチラを参照して下さい。


その２枚でGIFアニメーションを作成する

「PhotoScape」を起動してメニューの「GIFアニメ」を選択します。
前記の２枚の画像を選択してGIFアニメーションを作成します。

画像の説明

[check]アニメーション効果を設定します。

  1. 画面の切り替え時間を設定します。（今回は１秒を選択）
  2. 画面の切り替え効果を設定します。（今回は「上に移動」）

画像の説明

[check]その結果、以下のようなアニメーションになりました。

GIFアニメ

左記のおまじないです。

&show(NewBnr001ani.gif,,GIFアニメ);


GIFアニメにオンマウスする画像を設定する

最後に、マウスを持って行った時にアニメーションがスタートするようにオンマウス画像を設定します。

画像の説明 画像の説明

[check]解説します。

  1. 左の画像がオンマウスの表画像です。（ファイル名：NewBnr901.gif）
    1. 冒頭の静止画「NewBnr001.png」を拡張子GIFに変更したもの
  2. 右の画像がオンマウスの裏画像です。（ファイル名：NewBnr901_onmouse.gif）
    1. 前記で作成したGIFアニメ「NewBnr001ani.gif」をリネームしたもの

[check]その結果、以下のようなオンマウス画像になりました。

オンマウス画像

左記のおまじないです。

&show(NewBnr901.gif,change,オンマウス画像);



戻る

上記の関連記事はお役に立ちましたか？

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 1  
    役に立たなかった 1  


ご意見箱