サイズの大きめな正方形サムネイル画像のズームアウト効果をカスタムエフェクトで定義しました。

540x300pxのFlash表示枠中に、サムネイル画像(640x640px)をzoom_mode:0(オリジナルサイズ)で動作させています。

『正方形サムネイル画像を使った効果(その14)』の定義を流用しています。前者は『ズームイン効果』ですが、このサンプルはその逆の『ズームアウト効果』です。相違点はズームアウト定義への変更と、右上基準(base_mode: 9 align_mode:9)とし、登場画像と退場画像の表示優先順位を変更しています。

単純な右上へのズームアウトですが登場画像と退場画像が同調しています。
ズーム動作の同調には若干の工夫が必要です。

登場画像は400%サイズから100%(オリジナルサイズ)まで等速縮小します。これは面積比1/16の縮小になります。
退場画像は100%サイズから25%へ等速縮小します。これも面積比1/16です。
登場エフェクト、退場エフェクトともに同比率の縮小率にすることで、同調したズームアウト動作になります。

さらにサムネイル画像は25%サイズ(160x160px)へ縮小された状態で、オリジナルサイズ(640x640px)の右上に配置しても違和感が無いように構成されています。
この様な条件を満たせばシームレスなズームアウト表現ができます。

サムネイル画像は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>60</effect_time>
    <stop_time>0</stop_time>

    <align_mode>9</align_mode>
    <base_mode>9</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>9</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  layer="0" alpha="0,100" xs="1,100,400"  ys="1,100,400" x="0,540" />
    <out           alpha="231,0" xs="1,25"       ys="1,25" />
</effect>

</pagedata>