FPEのカスタムエフェクト機能を利用した任意角度への移動についてまとめました。複数の画像を連結した状態で任意角度へ移動させる方法です。ここで紹介する方法を応用すると、Flashの制限である2880ピクセルを超える画像を分割して1枚の画像がスクロールしている様にみせることもできます。

動作サンプル

横幅240x高さ180pxのFPE(Flash)表示枠中に160x120pxの画像が-37度方向へスライド移動します。-37度とは表示枠(240x180px)の対角線の角度となります。画像をカスタムエフェクトで-37度の状態に傾けることで対角線に沿って右斜め上へ移動するスライドショーを作成することができます。

対角線の角度や任意角度への移動先は通常三角関数を用いて算出します。『移動量と角度で座標算出(JavaScript版)』に『角度と移動量』の2つを入力することでブラウザ上で移動先を計算するスクリプトを組み込んでいますのでご利用下さい。

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

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

スライドショーで利用する画像の縮小イメージ
FPE(Flash)の座標と任意角度移動の概念図
座標
FPE(Flash)のステージは原点(0,0)が左上となります。x軸はマイナス方向が左、プラス方向が右になります。y軸はマイナス方向が上、プラス方向が下になります。
角度
上図の右下に角度に関するイメージがあります。角度は『-180から180』までの値で管理されています。270°等の値を指定することもできますが内部的には-45°へ変換されて画像の属性値として保持されます。
サンプルで指定されている-37度というのは表示枠の対角線の角度です。
基準点
FPEのデフォルト基準点は画像の左上です。左上基準の場合、回転角度(rot属性)を操作すると画像の左上を基準として回転します。ここで紹介しているサンプルは基準点を中心(base_mode:5及びalign_mode:5)としています。FPEのbase_modeについてはマニュアルを参照して下さい。
表示枠と画像
このサンプルでは横幅240px、高さ180pxの表示枠中に160x120pxの画像を表示させています。FPEのデフォルト設定では自動的に表示枠に合わせて画像が伸縮されてしまうためオリジナルサイズモード(zoom_mode:0)としています。
カスタムエフェクト
カスタムエフェクトは画像の登場及び退場時の動きを自由に設定できる機能です。
サンプルでは画像登場時のエフェクト『in』と退場時のエフェクト『out』を定義しています。
カスタムエフェクト定義部のみ抜粋します。

※alpha(透過度)も操作していますが説明簡略化の為省いています。

<effect>
    <in  x="1,120,-8" y="1,90,186"  rot="0,-37"  />
    <out x="1,248" y="1,-6"  />
</effect>
1.登場エフェクト『in』の動作
x="1,120,-8"は『X軸を-8から120まで等速移動(1:変化種別)』
y="1,90,186"は『Y軸を186から90まで等速移動(1:変化種別)』
rot="0,-37"は『回転角度を-37でリセット(0:変化種別)』
2.停止
登場エフェクトが完了すると『停止状態』になります。停止時間はstop_timeパラメータで指定された値によって決まります。
stop_timeを『0』とすることで常に画像が動いている状態にすることもできます。

指定停止時間を過ぎると退場エフェクトへ移行すると同時に次の画像の登場エフェクトが開始されます。つまり最初の1枚目の登場エフェクト完了以降は常に2つの画像が動いています。
3.退場エフェクト『out』の動作
x="1,248"は『X軸を現在の位置から248まで等速移動(1:変化種別)』
y="1,-6"は『Y軸を現在の位置から-6まで等速移動(1:変化種別)』

退場エフェクトが完了すると画像は非表示になり、次の画像の登場エフェクトが開始されます。
この様な動作が繰り返されます。
まとめ
サンプルでは表示枠(240x180px)より小さい画像を使っています。表示枠より大きい画像、横長、縦長等を利用すると面白い効果が作れると思います。
『移動量と角度で座標算出(JavaScript版)』には『角度と移動量』の2つを入力することでブラウザ上で移動先を計算するスクリプトを組み込んでいますのでご利用下さい。 参考までにサンプルで利用している定義ファイル(xml)を記述します。
※prefixパラメータはパス指定を含むため若干修正しています。ご自身の環境に合わせて修正して下さい。

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

<common>

    <copyright>elz.jp</copyright>

    <banner_align>3</banner_align>

    <image_max>3</image_max>
    <prefix>images/fpe</prefix>

    <effect_type>in,out</effect_type>
    <effect_time>30</effect_time>
    <stop_time>10</stop_time>

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

    <zoom_mode>0</zoom_mode>

</common>

<effect>
    <in  x="1,120,-8" y="1,90,186"  rot="0,-37" alpha="121,100,0" />
    <out x="1,248" y="1,-6" alpha="221,0" />

</effect>

</pagedata>