正方形サムネイル画像を使った効果(その3)
サイズの大きめな正方形サムネイル画像を-30度方向へ立方体回転させる効果をカスタムエフェクトで定義しました。
540x300pxのFlash表示枠中に、サムネイル画像(640x640px)をzoom_mode:0(オリジナルサイズ)で動作させています。単純な任意角度への移動に拡大縮小エフェクトを加えたものです。
任意角度への移動の考え方はは『-60度方向への移動効果』と同様ですので参考にして下さい。
このサンプルでは『移動量と角度で座標算出(JavaScript版)』の入力値として『移動量:320(横幅の1/2) 角度:-30 補正値X:270(中心点) 補正値Y:150(中心点)』とすることで座標計算を行っています。また、xs(水平拡大縮小率)変化属性を『41:減速&加速』とし、エフェクトの中間地点で回転が一旦停止します。
カスタムプラグイン、カスタムエフェクトの詳しい利用方法はELZのFPEマニュアルを参照して下さい。
テロップ画像(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>60</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>7</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="41,100,0" x="1,270,-7" y="1,150,310" bright="101,0,-100" rot="0,-30" />
<out xs="41,0" x="1,547" y="1,-10" bright="1,-100" />
</effect>
</pagedata>