マウスロールオーバーイベントに連動して、大きめの横長サムネイル画像(1920x150px)をスクロールさせるフラッシュナビゲーションです。ターゲットとなる画像のX座標、拡大縮小率をイベントに応じて操作することで浮遊感を演出しています。

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

定義例

fe_splash_normal003.jpg
image_overlay/fe_splash_normal003.
fe_splash_rollover003.jpg
image_overlay/fe_splash_rollover003.
t1920x150_001.jpg
image_overlay/t1920x150_001.
logo_fes1.jpg
image_overlay/logo_fes1.
logo_fes2.jpg
image_overlay/logo_fes2.
logo_fze1.jpg
image_overlay/logo_fze1.
logo_fze2.jpg
image_overlay/logo_fze2.
logo_fbe1.jpg
image_overlay/logo_fbe1.
logo_fbe2.jpg
image_overlay/logo_fbe2.
logo_fpe1.jpg
image_overlay/logo_fpe1.
logo_fpe2.jpg
image_overlay/logo_fpe2.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

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

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

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

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

    <!-- エフェクト指定 -->
    <over_effect>1</over_effect>
    <over_time>6</over_time>
    <over_plugin>../plugin/mask_box2bl.swf</over_plugin> 

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

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

    <!-- ボタン画像表示位置指定 -->
    <align_mode>1</align_mode>

</common>


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

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

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

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

</expert>


<!-- アクションセクション設定 (画像とエフェクトの関連付け)-->
<action>
    <event group="init"  target="small"    effect_type="in_init,fe_none"    effect_time="30,1" />
    <event group="init"  target="logo_fes1" effect_type="in_logo,out_logo"   effect_time="6" />
    <event group="init"  target="logo_fes2" effect_type="in_logo2,out_logo2" effect_time="6" />

    <event group="act1"  target="small"    effect_type="in_fze,fe_none"     effect_time="6" />
    <event group="act1"  target="logo_fze1" effect_type="in_logo,out_logo"   effect_time="12" />
    <event group="act1"  target="logo_fze2" effect_type="in_logo2,out_logo2" effect_time="6" />
    <event group="act1"  target="thumb1"    effect_type="in_thumb1,fe_none"    effect_time="12,1" />

    <event group="act2"  target="small"    effect_type="in_fbe,fe_none"     effect_time="6" />
    <event group="act2"  target="logo_fbe1" effect_type="in_logo,out_logo"   effect_time="12" />
    <event group="act2"  target="logo_fbe2" effect_type="in_logo2,out_logo2" effect_time="6" />
    <event group="act2"  target="thumb1"    effect_type="in_thumb1,fe_none"    effect_time="12,1" />

    <event group="act3"  target="small"    effect_type="in_fpe,fe_none"     effect_time="6" />
    <event group="act3"  target="logo_fpe1" effect_type="in_logo,out_logo"   effect_time="12" />
    <event group="act3"  target="logo_fpe2" effect_type="in_logo2,out_logo2" effect_time="6" />
    <event group="act3"  target="thumb1"    effect_type="in_thumb1,fe_none"    effect_time="12,1" />
</action>


<!-- オーバーレイセクション設定 (画像登録)-->
<overlay>
    <base id="base1" scope="1" x="0" y="0" width="640" height="250">
        <base id="thumb1" x="320" y="125" base_mode="5" width="640" height="250">
            <img id="small"    base_mode="5" src="image_overlay/t1920x150_001.jpg" />
            <img id="logo_fes1" base_mode="5" blend_mode="hardlight" src="image_overlay/logo_fes1.jpg" />
            <img id="logo_fes2" base_mode="5" blend_mode="hardlight" src="image_overlay/logo_fes2.jpg" />
        </base>

        <img id="logo_fze1" base_mode="5" blend_mode="hardlight" src="image_overlay/logo_fze1.jpg" />
        <img id="logo_fze2" base_mode="5" blend_mode="hardlight" src="image_overlay/logo_fze2.jpg" />

        <img id="logo_fbe1" base_mode="5" blend_mode="hardlight" src="image_overlay/logo_fbe1.jpg" />
        <img id="logo_fbe2" base_mode="5" blend_mode="hardlight" src="image_overlay/logo_fbe2.jpg" />

        <img id="logo_fpe1" base_mode="5" blend_mode="hardlight" src="image_overlay/logo_fpe1.jpg" />
        <img id="logo_fpe2" base_mode="5" blend_mode="hardlight" src="image_overlay/logo_fpe2.jpg" />

    </base>
</overlay>


<!-- エフェクトセクション設定 (カスタムエフェクト登録)-->
<effect>

    <!-- ロゴエフェクト(英字) -->
    <in_logo   x="12,320,420"  y="0,120" alpha="201,100,0" />
    <out_logo  x="22,220"                alpha="11,0" />

    <!-- ロゴエフェクト(カナ) -->
    <in_logo2  x="12,320,470"  y="0,150,250" alpha="201,100,0" />
    <out_logo2 x="22,170"                    alpha="11,0" />

    <!-- 初期エフェクト -->
    <in_init x="12,320,640"  y="0,180" xs="11,20,200" ys="11,20,200" />

    <!-- スクロールエフェクト -->
    <in_fze x="31,960"  y="11,125" xs="222,100" ys="222,100" />
    <in_fbe x="31,320"  y="11,125" xs="222,100" ys="222,100" />
    <in_fpe x="31,-320" y="11,125" xs="222,100" ys="222,100" />

    <!-- 土台(base)エフェクト -->
    <in_thumb1 y="302,100" xs="301,-90,100" ys="301,-90,100" />

</effect>

</pagedata>