スライドショーに日本語テロップ(透過PNG)

2011.01.16

透過PNGで作成した日本語テロップと写真をスライドショーにしました。透過PNGはFireWorksで別途製作しています。PNG32形式で保存することでテロップの影も階調を表現することができます。GIFも同様にテロップ画像として利用できますが、PNGとは異なりジャギーが目立ってしまいます。まずは画像を差し替えてお試し下さい。

このサンプルではテロップ登場エフェクト後にそのまま画像を残しています。パラメータ hide='0'(エフェクト後の表示/非表示の制御)を指定するのがポイントとなります。指定しない(デフォルト)場合、エフェクト終了後にテロップは非表示になります。また先頭のテロップ表示の際にin_action='clear'と指定することでテロップ画像を全てクリアすることができます。

ワイドテレビと同一の比率(16:9)の画面構成(640x360px)でフラッシュ表示領域を定義しています。表示させる画像は若干大きめな640x480pxとすることで、上下にゆっくりとパンさせることができます。

当サンプルの定義ファイル

telop001.png

p640x480_001.jpg

telop002.png

p640x480_002.jpg

telop003.png

p640x480_003.jpg

telop004.png

p640x480_004.jpg

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

<common>
    <copyright>elz.jp</copyright>
    <zoom_mode>0</zoom_mode>
    <!-- バナー表示位置指定 -->
    <banner_align>1</banner_align>
    <!-- エフェクト指定 -->
    <effect_time>30</effect_time>
    <stop_time>0</stop_time>
    <!-- 表示位置関係パラメータ指定 -->
    <align_mode>5</align_mode>
    <base_mode>5</base_mode>
    <zoom_mode>0</zoom_mode>
    <!-- プラグイン関係パラメータ指定 -->
    <plugin_base_mode>5</plugin_base_mode>
    <plugin_align_mode>5</plugin_align_mode>
    <!-- CPU負荷制御 -->
    <stream_buffer>0</stream_buffer>
    <start_delay>5</start_delay>
</common>

<!-- 画像個別定義(エキスパートセクション) -->
<expert>

    <image>
        <plugin_url in_action="clear" effect_type="logo1">media/fpe/telop001.png</plugin_url>
        <image_url  effect_type="in001,out001" >media/fpe/p640x480_001.jpg</image_url>
    </image>

    <image>
        <plugin_url effect_type="logo2">media/fpe/telop002.png</plugin_url>
        <image_url effect_type="in002,out002" >media/fpe/p640x480_002.jpg</image_url>
    </image>

    <image>
        <plugin_url effect_type="logo3">media/fpe/telop003.png</plugin_url>
        <image_url effect_type="in001,out001" >media/fpe/p640x480_003.jpg</image_url>
    </image>

    <image>
        <plugin_url effect_type="logo4">media/fpe/telop004.png</plugin_url>
        <image_url effect_type="in003,out003" effect_time='30' stop_time='50'>media/fpe/p640x480_004.jpg</image_url>
    </image>

</expert>
<effect>
    <!-- 上から下へパンニング -->
    <in001  x="0,320" y="1,180,120" alpha="111,100,0" bright="0,0" />
    <out001           y="1,240"     />
    <!-- 下から上へパンニング -->
    <in002  x="0,320" y="1,180,240" alpha="111,100,0"  bright="0,0"/>
    <out002           y="1,120"     />
    <!-- 最終画像は登場しながら若干暗めにし、ループで先頭に戻る際はコントラストを最大値まで上げる。 -->
    <in003  x="0,320" y="11,180,240" alpha="111,100,0"  bright="21,-25,0"/>
    <out003           bright="111,100" />
    <!-- 各種テロップエフェクト 先頭画像のみ3倍の拡大状態からオリジナルサイズまで縮小させる -->
    <logo1  hide="0" x="0,320" y="14,50,150"   xs="11,100,300" ys="11,100,300" alpha="111,100,0" />
    <logo2  hide="0" x="0,320" y="14,100,200"   alpha="111,100,0" />
    <logo3  hide="0" x="0,320" y="14,180,290"   alpha="111,100,0" />
    <logo4  hide="0" x="0,320" y="14,280,380"   alpha="111,100,0" />
</effect>

</pagedata>

Flash Engine Series

スライドショーに日本語テロップ(透過PNG)

当サンプルの定義ファイル

ナビゲーション