2008.04.11

FPEで作成したスライドショー等をFBEに組み込むことで、より凝ったFlashコンテンツを構築可能です。当サンプルは単純なフラッシュスライドショーをFBEオーバーレイ画像表示機能を利用して組み合わせたものです。

当サンプルはプラグインダウンロードより入手可能です。

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

<img id="id_slideshow" width="640" height="350" base_mode="5" src="misfpe.swf?xmldata=config%2Fcustom002.xml" />
  1. FBEのオーバーレイ画像表示機能を利用してJPG等の画像の代替としてFPE(misfpe.swf)を読み込ませます。
  2. srcパラメータでFPE本体(misfpe.swf)を指定します。その際FPE用の定義ファイルをクエリストリングで指定します。よってsrc="misfpe.swf?config/test.xml"等と指定することになりますが実際には引数をエスケープしなければなりませんのでsrc="misfpe.swf?config%2Ftest.xml"となります。(%2F)はスラッシュのエスケープ文字です。
  3. FPEのサイズをwidthとheightで指定する。指定しない場合、正確な位置に表示されなくなります。(隠し機能の為マニュアルには記載されていません)
  4. FBEオーバーレイ画像表示機能を利用するにはカスタムエフェクトの知識が必須になります。
    カスタムエフェクトビューアはFPEとFBEで共通です。オリジナルエフェクト作成時にご活用下さい。

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

sample001_normal.jpg
media/common/sample001_normal.
sample001_over.jpg
media/common/sample001_over.
b001.jpg
media/common/b001.
b002.jpg
media/common/b002.
b003.jpg
media/common/b003.
fe_top.jpg
media/common/fe_top.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

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

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

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

    <!-- ボタン画像指定 -->
    <button_normal>media/common/sample001_normal.jpg</button_normal>
    <button_over>media/common/sample001_over.jpg</button_over>

    <!-- エフェクト指定 -->
    <over_effect>3212</over_effect>
    <over_time>3</over_time>

    <init_action>act_slideshow</init_action>

</common>


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

    <!-- ボタン1定義 -->
    <button x="10" y="10"  w="200" h="30">
        <!-- ロールオーバー時のアクション指定 -->
        <over_action>act1</over_action>
        <link_url>http://elz.jp/fpe_outline.html</link_url>
    </button>

    <!-- ボタン2定義 -->
    <button x="220" y="10" w="200" h="30">
        <!-- ロールオーバー時のアクション指定 -->
        <over_action>act2</over_action>
        <link_url>http://elz.jp/fbe_outline.html</link_url>
    </button>

    <!-- ボタン3定義 -->
    <button x="430" y="10" w="200" h="30">
        <!-- ロールオーバー時のアクション指定 -->
        <over_action>act3</over_action>
        <link_url>http://elz.jp/fze_outline.html</link_url>
    </button>

</expert>


<!-- アクションセクション設定 (画像とエフェクトの関連付け)-->
<action>
    <event group="act1" target="photo1" effect_type="in_photo,out_photo" effect_time="3" />
    <event group="act2" target="photo2" effect_type="in_photo,out_photo" effect_time="3" />
    <event group="act3" target="photo3" effect_type="in_photo,out_photo" effect_time="3" />
    <event group="act_slideshow"  target="id_slideshow"    effect_type="in_slideshow,fe_none" effect_time="12,1" />
    <event group="act_slideshow"  target="id_logo"         effect_type="in_logo,fe_none" effect_time="24,1" />
</action>


<!-- オーバーレイセクション設定 (画像登録)-->
<overlay>
    <img id="photo1"       src="media/common/b001.jpg" />
    <img id="photo2"       src="media/common/b002.jpg" />
    <img id="photo3"       src="media/common/b003.jpg" />
    <img id="id_slideshow" width="640" height="350" base_mode="5" src="media/misfpe.swf?xmldata=media%2Fxml%2Ffpe%2Fslide0001.xml" />
    <img id="id_logo"      base_mode="5" blend_mode="hardlight" src="media/common/fe_top.jpg" />
</overlay>


<!-- エフェクトセクション設定 (カスタムエフェクト登録)-->
<effect>
    <in_photo x="14,0,640" y="0,50" />
    <out_photo x="14,-640" />
    <in_slideshow  x="0,320" y="11,170,640" alpha="11,100,0" />
    <in_logo       x="0,320" y="11,170,640" alpha="11,100,0" />
</effect>

</pagedata>

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

c001.jpg
media/common/c001.
c002.jpg
media/common/c002.
c003.jpg
media/common/c003.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>
<common>

    <copyright>elz.jp</copyright>

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

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

<!-- エフェクト指定 -->
    <effect_type>in,out</effect_type>
    <effect_time>30</effect_time>
    <stop_time>0</stop_time>

<!-- 画像プレフィックス -->
    <prefix>media/common/c</prefix>
    <image_max>3</image_max>

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

<!-- ループ制御 最終画像表示後1番目の画像へ戻る -->

    <loop_no>1</loop_no>

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

</common>


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

    <in  x="0,320,0" y="21,200,125" ys="11,100,0" bright="11,0,-100" />
    <out             y="11,275"    ys="21,0"     bright="21,-100"   />

</effect>

</pagedata>