サイズの大きめな正方形サムネイル画像の-30度方向立方体回転&滑り効果をカスタムエフェクトで定義しました。

540x300pxのFlash表示枠中に、サムネイル画像(640x640px)をzoom_mode:0(オリジナルサイズ)で動作させています。
『正方形サムネイル画像を使った効果(その3)』の定義を流用しています。基本的な考え方は同等ですので参考にして下さい。

座標計算は『移動量と角度で座標算出(JavaScript版)』を利用します。

登場画像の座標は入力値として『移動量:320(横幅の1/2) 角度:-30 補正値X:270(中心点) 補正値Y:150(中心点)』とします。開始座標が(-7,310)になることがわかります。

退場画像の座標は入力値として『移動量:320(横幅の1/2) 角度:60(-30度に対する直角方向) 補正値X:547(-30度状態の画像の右端のX座標) 補正値Y:-10(-30度状態の画像の右端のX座標)』とします。終了座標が(707,267)になることがわかります。

少しややこしいのが退場画像の座標計算を行う際の補正値の考え方です。
-30度に傾いた画像に対して直角に移動させるので60度方向への座標を算出する必要があります。
補正値で指定する(X:547,Y:-10)という値は、中心点(X:270,Y:150)から-30度方向へ320px(640/2:画像サイズ半分)移動した座標となります。
計算はややこしいですが、登場画像の傾きに合わせて退場画像が右下(60度方向)へ滑り落ちます。


サムネイル画像は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>64</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  xs="31,100,0" x="31,270,-7" y="31,150,310"  bright="101,0,-100" rot="0,-30" />
    <out xs="31,0"     x="31,707"    y="31,267"      bright="1,-100" />
</effect>

</pagedata>