波型サムネイル画像を使った効果(その2)
横長の大きめな波型サムネイル画像の上昇効果をカスタムエフェクトで定義しました。
540x300pxのFlash表示枠中にサムネイル画像(1280x320px)を下枠外から上枠外へ移動させています。
zoom_mode:0(オリジナルサイズ)としてエフェクト定義を行うのがポイントです。
カスタムエフェクト定義の考え方は単純です。-90度に回転させた横長の波型サムネイル画像を下から上へ移動させます。
座標計算は、別記事『移動量と角度で座標算出(JavaScript版)』で計算すると簡単です。『移動量:1280 角度:-90 X補正値:270 Y補正値150』と指定すると『等速移動でのエフェクト定義記述』が表示されると思います。これをコピーして若干手を加えます。x軸は往復系変化種別に変更し、ys(垂直拡大縮小率)も往復系変化種別を追加します。
x軸とys(垂直拡大縮小率)を少し操作するだけで、単純な下から上への移動効果の印象がかわります。
サムネイル画像はImageMagickのmontageコマンドを利用して作成しています。興味のある方は『montageの余白とボーダーの考え方』等を参考にして下さい。
カスタムプラグイン、カスタムエフェクトの詳しい利用方法は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>32</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="302,40,270" y="1,150,1430" ys="302,25,75" rot="0,-90" />
<out x="302,40,270" y="1,-1130" ys="302,25" />
</effect>
</pagedata>
