マウスロールオーバーイベントに連動して、大きめのオーバーレイ画像(640x400)を下から上へ移動させるフラッシュナビゲーションです。Flash表示領域は640x350pxですが、上部にメニューボタンを配置していますので、オーバーレイ画像表示領域は640x300pxとなります。オーバーレイセクションにbaseパラメータを指定し、scope属性を1することで640x300pxを超えた領域は隠蔽された状態になります。

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

定義例

sample001_normal.jpg
image_overlay/sample001_normal.
sample001_over.jpg
image_overlay/sample001_over.
c001.jpg
image_overlay/c001.
c002.jpg
image_overlay/c002.
c003.jpg
image_overlay/c003.
logo001.jpg
image_overlay/logo001.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

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

    <copyright>elz.jp</copyright>
    <banner_align>1</banner_align>

    <!-- ボタン個別定義モード宣言 -->
    <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>

    <!-- 背景初期表示エフェクト指定 -->
    <init_effect>2</init_effect>
    <init_time>6</init_time>

    <!-- 初期アクション指定 -->
    <init_action>init</init_action>

</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="init" target="logo1"  effect_type="in_logo,fe_none" effect_time="6" />
    <event group="act1" target="photo1" effect_type="in_photo,out_photo" effect_time="12" />
    <event group="act2" target="photo2" effect_type="in_photo,out_photo" effect_time="12" />
    <event group="act3" target="photo3" effect_type="in_photo,out_photo" effect_time="12" />
</action>


<!-- オーバーレイセクション設定 (画像登録)-->
<overlay>
    <base id="base1" scope="1" x="0" y="50" w="640" h="300" >
        <img id="photo1" base_mode="5" src="image_overlay/c001.jpg" />
        <img id="photo2" base_mode="5" src="image_overlay/c002.jpg" />
        <img id="photo3" base_mode="5" src="image_overlay/c003.jpg" />
    </base>
    <img id="logo1" blend_mode="hardlight" src="image_overlay/logo001.jpg" />
</overlay>


<!-- エフェクトセクション設定 (カスタムエフェクト登録)-->
<effect>
    <in_photo  layer="1" x="0,320" y="11,150,200" alpha="101,100,0" />
    <out_photo                     y="11,100" />
    <in_logo  x="0,0" y="15,50,100" alpha="101,100,0" />
</effect>

</pagedata>