マウスロールオーバーイベント発生時に任意の画像を表示させるサンプルです。オーバーレイセクションに任意の画像を登録し、アクションセクションで画像とエフェクトの関連付けを行います。当サンプルはイベントに応じて任意の画像を表示させる為の1番簡単な定義例です。オーバーレイセクション、アクションセクション、エフェクトセクションを深く理解することで、高度な動きも可能です。

最初は配布ファイルに含まれるサンプル中の定義ファイルを変更したり、画像を差し替えて試してください。慣れてきたらオリジナルのフラッシュコンテンツ作成を行うと良いでしょう。

当サンプルを作成するにあたっての定義に必要なセクションは以下の通りです。

  1. 全体の動作を決定する『コモンセクション(common)』
  2. ボタン領域を定義する『エキスパートセクション(expert)』
  3. 画像とエフェクトを関連付けする『アクションセクション(action)』
  4. 任意の画像を登録する『オーバーレイセクション(overlay)』
  5. 登場、退場時のエフェクトを定義する『エフェクトセクション(effect)』

サンプルで利用している画像ファイル

定義例

sample001_normal.jpg
image_overlay/sample001_normal.
sample001_over.jpg
image_overlay/sample001_over.
b001.jpg
image_overlay/b001.
b002.jpg
image_overlay/b002.
b003.jpg
image_overlay/b003.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

<!-- コモンセクション設定 -->
<common>

    <copyright>elz.jp</copyright>

    <!-- ボタン個別定義モード宣言 -->
    <button_mode>1</button_mode>

    <!-- ボタン画像指定 -->
    <button_normal>image_overlay/sample001_normal.jpg</button_normal>
    <button_over>image_overlay/sample001_over.jpg</button_over>

    <!-- エフェクト指定 -->
    <over_effect>3212</over_effect>
    <over_time>3</over_time>

</common>


<!-- エキスパートセクション設定 -->
<expert>

    <!-- ボタン1定義 -->
    <button x="10" y="10"  w="200" h="30">
        <!-- ロールオーバー時のアクション指定 -->
        <over_action>act1</over_action>
    </button>

    <!-- ボタン2定義 -->
    <button x="220" y="10" w="200" h="30">
        <!-- ロールオーバー時のアクション指定 -->
        <over_action>act2</over_action>
    </button>

    <!-- ボタン3定義 -->
    <button x="430" y="10" w="200" h="30">
        <!-- ロールオーバー時のアクション指定 -->
        <over_action>act3</over_action>
    </button>

</expert>


<!-- アクションセクション設定 (画像とエフェクトの関連付け)-->
<action>
    <event group="act1" target="photo1" effect_type="in_photo,out_photo" effect_time="6" />
    <event group="act2" target="photo2" effect_type="in_photo,out_photo" effect_time="6" />
    <event group="act3" target="photo3" effect_type="in_photo,out_photo" effect_time="6" />
</action>


<!-- オーバーレイセクション設定 (画像登録)-->
<overlay>
    <img id="photo1" src="image_overlay/b001.jpg" />
    <img id="photo2" src="image_overlay/b002.jpg" />
    <img id="photo3" src="image_overlay/b003.jpg" />
</overlay>


<!-- エフェクトセクション設定 (カスタムエフェクト登録)-->
<effect>
    <in_photo x="31,0,640" y="0,50" />
    <out_photo x="11,-640" />
</effect>

</pagedata>