グラデーション画像を使った陰影効果(その2)
表示領域中央部は明るく、外周は暗くなるようにしています。
スライドショーで表示させる画像数枚と、陰影効果用フィルタ画像を用意します。
陰影効果フィルタとして利用する画像は、540x300の矩形画像にグレイスケールの円形グラデーションを描画したものです。
このサンプルでは3枚の画像を左から右へ若干回転させながら移動させることで浮遊感を出しています。このスライドショーに、『陰影効果』画像をブレンドモード『multiply』で重ねることで中央部のみ画像が明るくなる仕組みです。
カスタムプラグイン機能を使用しています。詳しい利用方法はELZのFPEマニュアルを参照して下さい。
円形陰影効果用フィルタ画像
スライドショーで利用する画像の縮小イメージ
FPEに読み込ませる定義ファイル(xml)の例
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>
<common>
<copyright>elz.jp</copyright>
<banner_align>3</banner_align>
<image_max>3</image_max>
<effect_type>in,out</effect_type>
<effect_time>60</effect_time>
<stop_time>0</stop_time>
<prefix>images/wave</prefix>
<zoom_mode>0</zoom_mode>
<base_mode>5</base_mode>
<plugin_effect_type>fe_none</plugin_effect_type>
<plugin_blend_mode>multiply</plugin_blend_mode>
<plugin_url>images/filter004.jpg</plugin_url>
</common>
<effect>
<in x="21,270,0" y="11,150,250" xs="11,100,0" ys="11,100,0" rot="1,0,-45" />
<out x="11,540" y="21,250" xs="21,0" ys="21,0" rot="1,45" />
</effect>
</pagedata>
