2013.04.28

このサンプルはFPEで作成されたシンプルなスライドショーに、再生開始、一時停止ボタンをFBEで実装し連携させたものです。

当ページからサンプル(ZIP形式)をダウンロードして適当なフォルダに展開してください。そしてsample.htmlをブラウザで表示させて下さい。画像ファイルをお手持ちの画像(できれば小さめ640x400程度)と差し替えてお楽しみください。もちろん流用OKです。

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

button_normal.jpg
media/fbe/navigation/button_normal.
button_rollover.jpg
media/fbe/navigation/button_rollover.
loading001.jpg
media/common/20080811/loading001.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

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

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

    <banner_align>6</banner_align>

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

    <!-- ボタン画像指定 -->
    <button_normal>media/fbe/navigation/button_normal.jpg</button_normal>
    <button_over>media/fbe/navigation/button_rollover.jpg</button_over>

    <!-- エフェクト指定 -->
    <click_effect>2</click_effect>
    <click_time>3</click_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="010" y="410" w="30" h="20">

        <!-- アクション1呼び出し定義 -->
        <click_action>act1</click_action>
        <click_sound>media/common/20080811/se_c001.mp3</click_sound>

    </button>

    <button x="40" y="410" w="30" h="20">

        <!-- アクション2呼び出し定義 -->
        <click_action>act2</click_action>
        <click_sound>media/common/20080811/se_c001.mp3</click_sound>

    </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="play_start,fe_none"    effect_time="6" />

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

</action>

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

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

    </base>
</overlay>

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

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

    <!-- 再生開始 -->
    <play_start func="play" />

    <!-- 再生一時停止 -->
    <play_pause func="pause" />



</effect>

</pagedata>

組み込むスライドショー(FPEで作成)

スライドショーのFPE定義ファイル(???.xml)

001.jpg
http://elz.jp/media/images/001.
002.jpg
http://elz.jp/media/images/002.
003.jpg
http://elz.jp/media/images/003.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

<common>
    <copyright>elz.jp</copyright>
    <stage_width>640</stage_width>
    <stage_height>400</stage_height>
    <prefix>http://elz.jp/media/images/</prefix>
    <!-- 画像枚数指定。images_001 jpg から images_003 jpgまで -->
    <image_max>3</image_max>
    <!-- エフェクト種別 31:フェードイン -->
    <effect_type>31</effect_type>
    <!-- エフェクト時間 1秒 -->
    <effect_time>10</effect_time>
    <!-- 停止時間指定 3秒 -->
    <stop_time>30</stop_time>
</common>


</pagedata>

解説

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

<overlay>

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

</overlay>

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

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

    <!-- 再生開始 -->
    <play_start func="play" />

    <!-- 再生一時停止 -->
    <play_pause func="pause" />

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