フラッシュメニューからスライドショーを制御

2008.08.11

現在開発中のFPE 1.4.0b1とFBE 1.4.0b1を組み合わせることでスライドショー制御が可能となります。例えば、特定ボタンのマウスロールオーバー発生時に、任意のスライド画像へジャンプさせるといったインタラクティブ要素を加えられます。当サンプルは単純なフラッシュスライドショーをFBEオーバーレイ画像表示機能を利用して組み合わせています。

当サンプルは関連ファイルダウンロードより入手可能です。

幅640px,高さ280pxのFPEコンテンツをFBEに組み込む場合、以下の様な記述をオーバーレイセクションへ定義します。src属性値でFPE本体(misfpe.swf)を指定。fe_vars属性値で定義ファイル名を渡します。

<overlay>

<!-- FPE組み込み定義 -->
<img id="fpe1" width="640" height="280" fe_vars="media/xml/fpe/slide0002.xml" src="media/misfpe.swf" />

</overlay>

effectセクションでFPEを制御するfuncパラメータを指定します。

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

    <!-- アクション1 FPE画像1枚目から再生 -->
    <play1 func="play,1" />

    <!-- アクション2 FPE画像2枚目から再生 -->
    <play2 func="play,2" />

    <!-- アクション3 FPE画像3枚目から再生 -->
    <play3 func="play,3" />

</effect>

FBEのオーバーレイ画像表示機能を利用してJPG等の画像の代替としてFPE(misfpe.swf)を読み込ませます。
srcパラメータでFPE本体(misfpe.swf)を指定します。
fe_varsパラメータで定義ファイルを指定します。
FPEのサイズをwidthとheightで指定する。指定しない場合、正確な位置に表示されなくなります。(隠し機能の為マニュアルには記載されていません)
FBEオーバーレイ画像表示機能を利用するにはカスタムエフェクトの知識が必須になります。
カスタムエフェクトビューアはFPEとFBEで共通です。オリジナルエフェクト作成時にご活用下さい。

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

640x20_normal001.jpg

640x20_rollover001.jpg

loading001.jpg

<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

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

    <copyright>elz.jp</copyright>

    <banner_align>6</banner_align>

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

    <!-- ボタン画像指定 -->
    <button_normal>media/common/20080811/640x20_normal001.jpg</button_normal>
    <button_over>media/common/20080811/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>

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

    <!-- ローディングマーク制御 -->
    <loading_mark_url>media/common/20080811/loading001.jpg</loading_mark_url>
    <loading_mark_align>5</loading_mark_align>
    <loading_mark_delay>0</loading_mark_delay>
    
    <!-- 初期表示アクション呼び出し -->
    <init_action>init</init_action>

</common>

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

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

        <!-- アクション1呼び出し定義 -->
        <over_action>act1</over_action>
        <over_sound>media/common/20080811/se_c001.mp3</over_sound>
        <link_url>http://elz.jp/fpe_outline.html</link_url>

    </button>

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

        <!-- アクション2呼び出し定義 -->
        <over_action>act2</over_action>
        <over_sound>media/common/20080811/se_c001.mp3</over_sound>
        <link_url>http://elz.jp/fbe_outline.html</link_url>

    </button>

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

        <!-- アクション3呼び出し定義 -->
        <over_action>act3</over_action>
        <over_sound>media/common/20080811/se_c001.mp3</over_sound>
        <link_url>http://elz.jp/fze_outline.html</link_url>

    </button>

</expert>

<!-- アクションセクション設定 (画像とエフェクトの関連付け)-->
<action>

    <!-- 初期表示アクション定義 -->
    <event group="init"  target="fpe1"       effect_type="init_in,fe_none"  effect_time="30,1" />

    <!-- アクション1定義 -->
    <event group="act1"  target="fpe1"    effect_type="play1,fe_none"    effect_time="6" />

    <!-- アクション2定義 -->
    <event group="act2"  target="fpe1"    effect_type="play2,fe_none"    effect_time="6" />

    <!-- アクション3定義 -->
    <event group="act3"  target="fpe1"    effect_type="play3,fe_none"    effect_time="6" />

</action>

<!-- オーバーレイセクション設定 (画像登録)-->
<overlay>
    <!-- 土台(base)定義 -->
    <base id="slide" scope="1" width="640" height="280">

        <!-- FPE組み込み定義 -->
        <img id="fpe1" width="640" height="280" fe_vars="media/xml/fpe/slide0002.xml" src="media/misfpe.swf" />

    </base>
</overlay>

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

    <!-- 初期表示エフェクト定義 -->
    <init_in  bright="1,0,100"/>

    <!-- アクション1 FPE画像1枚目から再生 -->
    <play1 func="play,1" />

    <!-- アクション2 FPE画像2枚目から再生 -->
    <play2 func="play,2" />

    <!-- アクション3 FPE画像3枚目から再生 -->
    <play3 func="play,3" />


</effect>

</pagedata>

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

001.jpg

002.jpg

003.jpg

<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>
<common>

    <copyright>elz.jp</copyright>

    <!-- バナー表示位置指定 -->
    <banner_align>1</banner_align>

    <prefix>media/common/20080811/</prefix>
    <image_max>3</image_max>

    <!-- エフェクト指定 -->
    <effect_type>in001,out001</effect_type>
    <effect_time>12</effect_time>
    <stop_time>90</stop_time>

    <!-- 表示位置関係のパラメータ指定 -->
    <align_mode>5</align_mode>
    <base_mode>5</base_mode>
    <zoom_mode>0</zoom_mode>

    <!-- プラグイン関係パラメータ指定 -->
    <plugin_url>media/plugin/mask_line1b.swf</plugin_url>

    <!-- CPU負荷制御 -->
    <stream_buffer>0</stream_buffer>
    <start_delay>5</start_delay>


</common>


<!-- カスタムエフェクト定義 -->
<effect>

    <!-- 登場エフェクト定義 -->
    <in001  x="0,320" y="1,160,220" />

    <!-- 退場エフェクト定義 -->
    <out001           y="1,100"   />

</effect>

</pagedata>

Flash Engine Series

フラッシュメニューからスライドショーを制御

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

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

ナビゲーション