2007.09.21

このサンプルでは3枚の画像(それぞれ320x200px)を、マウスロールオーバーイベント発生時に、横一列に整列させながらズームイン(拡大表示)しています。イベントが発生する度に3枚の画像を操作する定義が必要です。

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

fe_splash_normal002.jpg
/media/fbe/top/fe_splash_normal002.
fe_splash_rollover002.jpg
/media/fbe/top/fe_splash_rollover002.
p320x200_003.jpg
/media/fbe/fbe130/p320x200_003.
p320x200_002.jpg
/media/fbe/fbe130/p320x200_002.
p320x200_001.jpg
/media/fbe/fbe130/p320x200_001.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>
<common>

    <copyright>elz.jp</copyright>
    <stage_width>640</stage_width>
    <stage_height>420</stage_height>

    <button_mode>1</button_mode>

    <button_normal>/media/fbe/top/fe_splash_normal002.jpg</button_normal>
    <button_over>/media/fbe/top/fe_splash_rollover002.jpg</button_over>

    <over_plugin>/media/plugin/mask_box2l.swf</over_plugin> 

    <over_effect>1</over_effect>
    <over_time>6</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 label="take1" x="10" y="260" w="200" h="120">

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

        <link_url>fze_outline.html</link_url>
    </button>

    <button label="take2" x="220" y="260" w="200" h="120">

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

        <link_url>fbe_outline.html</link_url>
    </button>

    <button label="take" x="430" y="260" w="200" h="120">

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

        <link_url>fpe_outline.html</link_url>
    </button>

</expert>

<action>
    <!-- 初期表示用エフェクト関連付け -->
    <event group="init"  target="photo1"  effect_type="init_in1,fe_none" effect_time="24,1" />
    <event group="init"  target="photo2"  effect_type="init_in2,fe_none" effect_time="24,1" />
    <event group="init"  target="photo3"  effect_type="init_in3,fe_none" effect_time="24,1" />
    <event group="init"  target="logo"    effect_type="logo_in,telop_out" effect_time="9,1" />
    <event group="init"  target="logo2"   effect_type="logo_in2,telop_out2" effect_time="6,1" />

    <!-- アクション1定義 -->
    <event group="act1"  target="photo1"  effect_type="photo_in1a,fe_none" effect_time="3" />
    <event group="act1"  target="photo2"  effect_type="photo_in1b,fe_none" effect_time="3" />
    <event group="act1"  target="photo3"  effect_type="photo_in1c,fe_none" effect_time="3" />
    <event group="act1"  target="telop1"  effect_type="telop_in,telop_out" effect_time="3" />
    <event group="act1"  target="telop1b" effect_type="telop_in2,telop_out2" effect_time="3" />

    <!-- アクション2定義 -->
    <event group="act2"  target="photo1"  effect_type="photo_in2a,fe_none" effect_time="3" />
    <event group="act2"  target="photo2"  effect_type="photo_in2b,fe_none" effect_time="3" />
    <event group="act2"  target="photo3"  effect_type="photo_in2c,fe_none" effect_time="3" />
    <event group="act2"  target="telop2"  effect_type="telop_in,telop_out" effect_time="3" />
    <event group="act2"  target="telop2b" effect_type="telop_in2,telop_out2" effect_time="3" />

    <!-- アクション3定義 -->
    <event group="act3"  target="photo1"  effect_type="photo_in3a,fe_none" effect_time="3" />
    <event group="act3"  target="photo2"  effect_type="photo_in3b,fe_none" effect_time="3" />
    <event group="act3"  target="photo3"  effect_type="photo_in3c,fe_none" effect_time="3" />
    <event group="act3"  target="telop3"  effect_type="telop_in,telop_out" effect_time="3" />
    <event group="act3"  target="telop3b" effect_type="telop_in2,telop_out2" effect_time="3" />
</action>

<overlay>

    <!-- 土台(base)定義 -->
    <base id="slide" scope="1" x="320" y="125" base_mode="5" width="640" height="250">
        <img id="photo1"  base_mode="5" src="/media/fbe/fbe130/p320x200_003.jpg" />
        <img id="photo2"  base_mode="5" src="/media/fbe/fbe130/p320x200_002.jpg" />
        <img id="photo3"  base_mode="5" src="/media/fbe/fbe130/p320x200_001.jpg" />

        <!-- テロップ定義 -->
        <img id="telop1"  base_mode="5" src="/media/plugin/mistelop_sharp.swf?telop=FLASH%20ZOOM%20ENGINE&amp;font_size=24" />
        <img id="telop1b" base_mode="5" src="/media/plugin/mistelop_sharp.swf?telop=ELZ.JP&amp;font_size=10" />
        <img id="telop2"  base_mode="5" src="/media/plugin/mistelop_sharp.swf?telop=FLASH%20BUTTON%20ENGINE&amp;font_size=24" />
        <img id="telop2b" base_mode="5" src="/media/plugin/mistelop_sharp.swf?telop=ELZ.JP&amp;font_size=10" />
        <img id="telop3"  base_mode="5" src="/media/plugin/mistelop_sharp.swf?telop=FLASH%20PRESENTATION%20ENGINE&amp;font_size=24" />
        <img id="telop3b" base_mode="5" src="/media/plugin/mistelop_sharp.swf?telop=ELZ.JP&amp;font_size=10" />

        <!-- ロゴ定義 -->
        <img id="logo"    base_mode="5" src="/media/plugin/mistelop_sharp.swf?telop=FLASH%20ENGINE%20SERIES&amp;font_size=24" />
        <img id="logo2"   base_mode="5" src="/media/plugin/mistelop_sharp.swf?telop=ELZ.JP&amp;font_size=10" />
    </base>
</overlay>

<effect>

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

    <!-- テロップBエフェクト定義 -->
    <telop_in2  layer="1" x="0,320"  y="13,90,250" alpha="201,100,0" />
    <telop_out2 layer="1"            y="23,-80"    alpha="101,0" />

    <!-- 画像1エフェクト定義 -->
    <photo_in1a  layer="1" x="11,160" xs="11,100"  ys="11,100" alpha="1,100"/>
    <photo_in1b            x="11,400" xs="11,50"   ys="11,50"  alpha="101,50"/>
    <photo_in1c            x="11,560" xs="11,50"   ys="11,50"  alpha="101,50"/>

    <!-- 画像2エフェクト定義 -->
    <photo_in2a            x="11,80"  xs="11,50"   ys="11,50"  alpha="101,50"/>
    <photo_in2b  layer="1" x="11,320" xs="11,100"  ys="11,100" alpha="1,100"/>
    <photo_in2c            x="11,560" xs="11,50"   ys="11,50"  alpha="101,50"/>

    <!-- 画像3エフェクト定義 -->
    <photo_in3a            x="11,80"   xs="11,50"  ys="11,50"  alpha="101,50"/>
    <photo_in3b            x="11,240"  xs="11,50"  ys="11,50"  alpha="101,50"/>
    <photo_in3c  layer="1" x="11,480"  xs="11,100" ys="11,100" alpha="1,100"/>

    <!-- 初期表示ロゴエフェクト定義 -->
    <logo_in  layer="1"  x="0,320"  y="12,100,250" alpha="201,100,0" />
    <logo_in2  layer="1" x="0,320"  y="12,130,250" alpha="201,100,0" />

    <!-- 初期表示画像エフェクト定義 -->
    <init_in1 x="0,160"  y="11,125,-125" xs="11,50,0" ys="11,50,0" alpha="101,50,0"/>
    <init_in2 x="0,320"  y="12,125,-125" xs="12,50,0" ys="12,50,0" alpha="101,50,0"/>
    <init_in3 x="0,480"  y="13,125,-125" xs="13,50,0" ys="13,50,0" alpha="101,50,0"/>

</effect>

</pagedata>