2008.11.18

FBE(Flash Button Engine)でドロップダウンメニューを作成する方法を紹介します。

当サンプルは640x240のベースとなるFBEコンテンツに、別途用意した3つのメニューをFBEオーバーレイ画像表示機能で読み込みドロップダウンメニューとして機能させます。3つのメニューは識別し易い様に『赤、緑、青』と背景色を変えています。

幅210px,高さ120pxのFBEコンテンツをFBEに組み込む場合、以下の様な記述を オーバーレイセクションへ定義します。 src属性値でFBE本体(misfbe.swf)と定義ファイル名をクエリストリングで渡し ます。xmldata=???となっている個所がFBE定義ファイル名となります。

組み込みたいFBEコンテンツの横幅(width)高さ(height)も指定必須となります。

<overlay>

    <img id="sub001" width="210" height="120" x="5"   base_mode="7" src="misfbe.swf?xmldata=config/submenu001.xml" />

</overlay>
  1. FBEオーバーレイ画像表示機能を利用するにはカスタムエフェクトの知識が必須になります。
    カスタムエフェクトビューアはFPEとFBEで共通です。オリジナルエフェクト作成時にご活用下さい。

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

menu_normal001.jpg
/media/fbe/dropdown/menu_normal001.
menu_over001.jpg
/media/fbe/dropdown/menu_over001.
001.jpg
media/fbe/dropdown/001.
002.jpg
media/fbe/dropdown/002.
003.jpg
media/fbe/dropdown/003.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

<common>

    <copyright>elz.jp</copyright>
    <stage_width>640</stage_width>
    <stage_height>240</stage_height>
    <banner_align>4</banner_align>

<!-- 1x4のボタン定義 -->
    <col_max>3</col_max>
    <row_max>1</row_max>

<!-- ボタン画像指定 -->
    <button_normal>/media/fbe/dropdown/menu_normal001.jpg</button_normal>
    <button_over>/media/fbe/dropdown/menu_over001.jpg</button_over>

<!-- エフェクト指定 -->
    <over_effect>4512</over_effect>
    <over_time>6</over_time>

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

<!-- 余白指定 -->
    <padding_left>5</padding_left>
    <padding_right>5</padding_right>
    <padding_top>5</padding_top>
    <padding_bottom>205</padding_bottom>

</common>

<expert>

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

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

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

</expert>

<action>
    <!-- アクション1定義 -->
    <event group="act1"  target="photo1"  effect_type="photo_in,photo_out"   effect_time="6" />
    <event group="act1"  target="sub001"  effect_type="sub_play,sub_stop"    effect_time="6" />

    <!-- アクション2定義 -->
    <event group="act2"  target="photo2"  effect_type="photo_in,photo_out"   effect_time="6" />
    <event group="act2"  target="sub002"  effect_type="sub_play,sub_stop"    effect_time="6" />

    <!-- アクション3定義 -->
    <event group="act3"  target="photo3"  effect_type="photo_in,photo_out"   effect_time="6" />
    <event group="act3"  target="sub003"  effect_type="sub_play,sub_stop"    effect_time="6" />
</action>

<overlay>
    <!-- 土台(base)定義 -->
    <base id="slide" scope="1" x="0" y="35" base_mode="7" width="640" height="210">

        <!-- 写真定義 -->
        <img id="photo1"  base_mode="7" blend_mode="normal" src="media/fbe/dropdown/001.jpg" />
        <img id="photo2"  base_mode="7" blend_mode="normal" src="media/fbe/dropdown/002.jpg" />
        <img id="photo3"  base_mode="7" blend_mode="normal" src="media/fbe/dropdown/003.jpg" />

        <!-- サブメニュー定義 -->
        <img id="sub001" width="210" height="120" x="5"   base_mode="7" src="media/misfbe.swf?xmldata=media/xml/fbe/dropdown/submenu001.xml" />
        <img id="sub002" width="210" height="120" x="215" base_mode="7" src="media/misfbe.swf?xmldata=media/xml/fbe/dropdown/submenu002.xml" />
        <img id="sub003" width="210" height="120" x="425" base_mode="7" src="media/misfbe.swf?xmldata=media/xml/fbe/dropdown/submenu003.xml" />

    </base>
</overlay>

<effect>
    <!-- SubMenuエフェクト定義 -->
    <sub_in   layer="1" func="loop" y="51,120,0"  bright="1,0,100" />
    <sub_play layer="1" func="loop" y="11,0,-120" bright="1,0" />
    <sub_stop layer="1" func="stop" y="11,-120"   bright="1,100" />

    <!-- 写真エフェクト定義 -->
    <photo_in   layer="1" x="0,0"  y="12,-80,0" alpha="1,100,0" />
    <photo_out  layer="1"          y="22,-160"  alpha="1,0" />
</effect>

</pagedata>

サブメニュー1定義ファイル(???.xml)

sub001_normal001.jpg
media/fbe/dropdown/sub001_normal001.
sub001_over001.jpg
media/fbe/dropdown/sub001_over001.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

<common>

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

<!-- 1x4のボタン定義 -->
    <col_max>1</col_max>
    <row_max>4</row_max>

<!-- ボタン画像指定 -->
    <button_normal>media/fbe/dropdown/sub001_normal001.jpg</button_normal>
    <button_over>media/fbe/dropdown/sub001_over001.jpg</button_over>

<!-- エフェクト指定 -->
    <over_effect>4512</over_effect>
    <over_time>6</over_time>

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

</common>

<expert>
    <button>
        <link_url>http://elz.jp/fpe_outline.html</link_url>
    </button>
    <button>
        <link_url>http://elz.jp/fpe_function.html</link_url>
    </button>
    <button>
        <link_url>http://elz.jp/fpe_tutorial.html</link_url>
    </button>
    <button>
        <link_url>http://elz.jp/fpe_faq.html</link_url>
    </button>
</expert>

</pagedata>

サブメニュー2定義ファイル(???.xml)

sub002_normal001.jpg
media/fbe/dropdown/sub002_normal001.
sub002_over001.jpg
media/fbe/dropdown/sub002_over001.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

<common>

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

<!-- 1x4のボタン定義 -->
    <col_max>1</col_max>
    <row_max>4</row_max>

<!-- ボタン画像指定 -->
    <button_normal>media/fbe/dropdown/sub002_normal001.jpg</button_normal>
    <button_over>media/fbe/dropdown/sub002_over001.jpg</button_over>

<!-- エフェクト指定 -->
    <over_effect>4512</over_effect>
    <over_time>6</over_time>

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

</common>

<expert>
    <button>
        <link_url>http://elz.jp/fbe_outline.html</link_url>
    </button>
    <button>
        <link_url>http://elz.jp/fbe_function.html</link_url>
    </button>
    <button>
        <link_url>http://elz.jp/fbe_tutorial.html</link_url>
    </button>
    <button>
        <link_url>http://elz.jp/fbe_faq.html</link_url>
    </button>
</expert>

</pagedata>

サブメニュー3定義ファイル(???.xml)

sub003_normal001.jpg
media/fbe/dropdown/sub003_normal001.
sub003_over001.jpg
media/fbe/dropdown/sub003_over001.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

<common>

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

<!-- 1x4のボタン定義 -->
    <col_max>1</col_max>
    <row_max>4</row_max>

<!-- ボタン画像指定 -->
    <button_normal>media/fbe/dropdown/sub003_normal001.jpg</button_normal>
    <button_over>media/fbe/dropdown/sub003_over001.jpg</button_over>

<!-- エフェクト指定 -->
    <over_effect>4512</over_effect>
    <over_time>6</over_time>

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

</common>

<expert>
    <button>
        <link_url>http://elz.jp/fze_outline.html</link_url>
    </button>
    <button>
        <link_url>http://elz.jp/fze_function.html</link_url>
    </button>
    <button>
        <link_url>http://elz.jp/fze_tutorial.html</link_url>
    </button>
    <button>
        <link_url>http://elz.jp/fze_faq.html</link_url>
    </button>
</expert>

</pagedata>