サイズの大きめな正方形サムネイル画像の上下左右移動効果をカスタムエフェクトで定義しました。

540x300pxのFlash表示枠中に、サムネイル画像(640x640px)をzoom_mode:0(オリジナルサイズ)で動作させています。
このサンプルでは大きめな画像の一部のみを常に表示枠内に残すように上下左右に移動します。

カスタムエフェクト定義ポイントは『時間差系変化種別』を利用していることです。以下にエフェクト時の動作を示します。

  • 登場エフェクト前半で『画像の右半分が表示できるx軸で下から上(画像の下部1/4が表示できるy軸)への移動』
  • 登場エフェクト後半で『左から右(画像の左半分が表示できるx軸)への移動』
  • 退場エフェクト前半で『上から下(画像の上部1/4が表示できるy軸)への移動』
  • 登場エフェクト後半で『右から左(画像の右半分が表示できるx軸)へ移動』

動作原理としてはとても単純です。サムネイル画像をこの様にスクロールさせるだけですがFlashループ素材として利用できます。

サムネイル画像はImageMagickのmontageコマンドを利用して作成しています。興味のある方は『montageの余白とボーダーの考え方』等を参考にして下さい。

カスタムプラグイン、カスタムエフェクトの詳しい利用方法はELZのFPEマニュアルを参照して下さい。

テロップ画像(Flash表示領域中央のタイトル用画像)

Flash表示領域中央のタイトル用画像

スライドショーで利用する画像の縮小イメージ

スライドショーで利用する画像の縮小イメージ

FPEに読み込ませる定義ファイル(xml)のサンプル 


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

<common>

    <copyright>elz.jp</copyright>

    <banner_align>3</banner_align>

    <image_max>2</image_max>
    <prefix>images/thumb</prefix>

    <effect_type>in,out</effect_type>
    <effect_time>128</effect_time>
    <stop_time>0</stop_time>

    <align_mode>5</align_mode>
    <base_mode>5</base_mode>

    <zoom_mode>0</zoom_mode>

    <plugin_url>images/title001.jpg</plugin_url>
    <plugin_effect_type>fe_none</plugin_effect_type>
    <plugin_align_mode>5</plugin_align_mode>
    <plugin_base_mode>7</plugin_base_mode>

    <plugin_blend_mode>hardlight</plugin_blend_mode>

    <play_mode>1</play_mode>

</common>

<effect>
    <in  x="201,590,-50" y="101,-170,470"  bright="141,0,-100" />
    <out x="201,-50,590" y="101,470"       bright="241,-100"   />
</effect>

</pagedata>