2007.09.25

当サンプルはFlash Button EngineへFLVを読み込み再生させています。FLV再生用プラグインを経由して動画を読み込みます。右下の小さめなナビゲーションボタン黄色へのロールオーバーで3つの動画が再生されます。緑で停止、青はその場で回転となります。回転はちょっとした遊びですが、複数の動画を画像と同等にカスタムエフェクトで操作できるのは面白いと思います。

FLV再生用プラグインはプラグインダウンロードより入手可能です。

当サンプルの定義ファイル(???.xml)

640x20_normal001.jpg
/media/fbe/top/640x20_normal001.
640x20_rollover001.jpg
/media/fbe/top/640x20_rollover001.
tutorial_p.jpg
/media/fze/top/tutorial_p.
logo_fbe2.jpg
/media/fbe/fbe130/logo_fbe2.
logo_fze2.jpg
/media/fbe/fbe130/logo_fze2.
logo_fpe2.jpg
/media/fbe/fbe130/logo_fpe2.
logo_fes1.jpg
/media/fbe/fbe130/logo_fes1.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>
<common>

    <copyright>elz.jp</copyright>

<!-- Flash表示領域定義 -->    
    <stage_width>640</stage_width>
    <stage_height>220</stage_height>

    <banner_align>6</banner_align>

    <button_mode>1</button_mode>

    <button_normal>/media/fbe/top/640x20_normal001.jpg</button_normal>
    <button_over>/media/fbe/top/640x20_rollover001.jpg</button_over>

    <over_effect>2</over_effect>
    <over_time>3</over_time>

    <init_effect>3</init_effect>
    <init_time>12</init_time>

    <bg_effect>2</bg_effect>
    <bg_time>3</bg_time>

    <scope>0</scope>

    <align_mode>1</align_mode>

    <debug_mode>0</debug_mode>

    <over_sound>/media/sound/se_c001.mp3</over_sound>

    <!-- 初期表示用エフェクト呼び出し定義 -->
    <init_action>init</init_action>

</common>

<expert>

    <button x="575" y="205" w="10" h="10">

        <!-- アクション1呼び出し定義 -->
        <over_action>act1</over_action>

    </button>

    <button x="595" y="205" w="10" h="10">

        <!-- アクション2呼び出し定義 -->
        <over_action>act2</over_action>

    </button>

    <button x="615" y="205" w="10" h="10">

        <!-- アクション3呼び出し定義 -->
        <over_action>act3</over_action>

    </button>

</expert>

<action>
    <!-- 初期表示用エフェクト関連付け -->
    <event group="init"  target="thumb"   effect_type="thumb_in,fe_none"     effect_time="24,1" />
    <event group="init"  target="logo"    effect_type="logo_in,telop_out2"   effect_time="6,1" />
    <event group="init"  target="flv1"    effect_type="flv_in,fe_none"       effect_time="6,1" />
    <event group="init"  target="flv2"    effect_type="flv_in,fe_none"       effect_time="9,1" />
    <event group="init"  target="flv3"    effect_type="flv_in,fe_none"       effect_time="12,1" />

    <!-- アクション1定義 -->
    <event group="act1"  target="telop1"  effect_type="telop_in,telop_out"   effect_time="6" />
    <event group="act1"  target="flv1"    effect_type="flv_play,fe_none"    effect_time="6" />
    <event group="act1"  target="flv2"    effect_type="flv_play,fe_none"    effect_time="6" />
    <event group="act1"  target="flv3"    effect_type="flv_play,fe_none"    effect_time="6" />

    <!-- アクション2定義 -->
    <event group="act2"  target="telop2"  effect_type="telop_in,telop_out"   effect_time="6" />
    <event group="act2"  target="flv1"    effect_type="flv_stop,fe_none"    effect_time="6" />
    <event group="act2"  target="flv2"    effect_type="flv_stop,fe_none"    effect_time="6" />
    <event group="act2"  target="flv3"    effect_type="flv_stop,fe_none"    effect_time="6" />

    <!-- アクション3定義 -->
    <event group="act3"  target="telop3"  effect_type="telop_in,telop_out"   effect_time="6" />
    <event group="act3"  target="flv1"    effect_type="flv_rot,fe_none"      effect_time="6" />
    <event group="act3"  target="flv2"    effect_type="flv_rot,fe_none"      effect_time="6" />
    <event group="act3"  target="flv3"    effect_type="flv_rot,fe_none"      effect_time="6" />
</action>

<overlay>
    <!-- 土台(base)定義 -->
    <base id="slide" scope="1" x="320" y="100" base_mode="5" width="640" height="200">

        <!-- 背景定義 -->
        <img id="thumb"   base_mode="5" src="/media/fze/top/tutorial_p.jpg" />

        <!-- FLV定義 -->
        <img id="flv1" x="120" width="160" height="120" base_mode="5" fe_vars="/media/flv/001.flv" src="/media/fe_flvmini.swf" />
        <img id="flv2" x="320" width="160" height="120" base_mode="5" fe_vars="/media/flv/002.flv" src="/media/fe_flvmini.swf" />
        <img id="flv3" x="520" width="160" height="120" base_mode="5" fe_vars="/media/flv/003.flv" src="/media/fe_flvmini.swf" />

        <!-- テロップ定義 -->
        <img id="telop1"  base_mode="5" blend_mode="overlay" src="/media/fbe/fbe130/logo_fbe2.jpg" />
        <img id="telop2"  base_mode="5" blend_mode="overlay" src="/media/fbe/fbe130/logo_fze2.jpg" />
        <img id="telop3"  base_mode="5" blend_mode="overlay" src="/media/fbe/fbe130/logo_fpe2.jpg" />

        <!-- 初期表示ロゴ定義 -->
        <img id="logo"  base_mode="5" blend_mode="overlay" src="/media/fbe/fbe130/logo_fes1.jpg" />

    </base>
</overlay>

<effect>

    <!-- FLVエフェクト定義 -->
    <flv_in   layer="1"                      y="12,50,100" xs="11,50,0" ys="11,50,0" alpha="0,50" />
    <flv_play layer="1"          func="loop" y="51,100"     xs="11,100"  ys="11,100"  alpha="1,100" />
    <flv_stop layer="1" hide="0" func="stop" y="51,50"      xs="11,50"   ys="11,50"   alpha="1,50" />
    <flv_rot  layer="1"                      rot="11,-360"  />

    <!-- テロップエフェクト定義 -->
    <telop_in   layer="1" x="0,320"  y="12,100,180" alpha="201,100,0" />
    <telop_out  layer="1"            y="22,0"       alpha="101,0" />

    <!-- 初期表示ロゴ及び背景エフェクト定義 -->
    <thumb_in  layer="1" x="0,320"  y="0,100"      xs="11,100,150" ys="11,100,150" alpha="131,100,0" r2ot="11,-720,0" />
    <logo_in   layer="1" x="0,320"  y="12,100,150"                              alpha="201,100,0" />

</effect>

</pagedata>