右図の様に画像別にエフェクト(特殊効果)を変えたい場合はエキスパートモードを使用します。

ここではSTEP1~STEP3迄の作業手順としてFPE(Flash Presentation Engine)エキスパートモードの具体的な設定例を説明します。

それではSTEP1から始めましょう。

図1.完成イメージ(画像毎にエフェクトを設定した例)

3分でフラッシュスライドショーを作成を御覧になっていることを前提に記述されていますのでご注意下さい。
STEP 1

a.加工済み画像で効果的なコンテンツを

準備した3枚の画像例

ここでご紹介する例では加工済み画像を3枚使用します。

イージーモードでの設定と異なり、ファイル名は任意で構いません。

1枚目の画像は「若干ボケた感じの文字」です。
2枚目の画像は「くっきりした感じの文字」です。
3枚目の画像は「文字とサムネイルの合成画像」です。

b.ファイル設置場所の確認

同一フォルダに移動しましょう

・各画像ファイル(fpe01.jpg,fpe02.jpg,fpe03.jpg)
・定義ファイル(config.xml)
・HTMLファイル(misfpe.html)
・FPE本体(misfpe.swf)
フラッシュプレイヤーチェック関数(flash_check.js)
FPE制御関数(flash.js)

適当なフォルダを作成し画像ファイル、定義ファイル、HTMLファイル、FPE本体、JavaScirptファイル(flash.js,flash_check.js)を全て同一のフォルダに移動します。

JavaScriptファイル郡(flash.js,flash_check.js)は配布ファイル中の「jsフォルダ」に格納されています。

STEP 2

a.画像別にエフェクトを定義するには?

config.xmlはFPE起動時に読み込まれ、FPE自身を制御するための定義ファイルです。

config.xml(定義ファイル)をテキストエディタ等で開き、画像別のエフェクト定義をexpertセクション(エキスパートセクション)中に指定して下さい。
※UTF-8に対応したテキストエディタが必要です

expertセクションはimageセクション(イメージセクション)が複数含まれて構成されます。

expertセクションを定義した場合commonセクションへの定義を行わなくても動作します。

エキスパートモードの定義方法は?
定義内容説明

1枚目の画像定義箇所は

  • fpe01.jpgという画像を
  • 1.2秒 (effect_time:12) かけて
  • 中心点へ縮小 (effect_type:5) させ
  • その後0.3秒(stop_time:3) 停止する

2枚目の画像定義箇所は

  • fpe02.jpgという画像を
  • 0.3秒 (effect_time:3) かけて
  • クロスフェード (effect_type:3) させ
  • その後0.3秒(stop_time:3) 停止する

3枚目の画像定義箇所は

  • fpe03.jpgという画像を
  • 0.6秒 (effect_time:6) かけて
  • フェードイン (effect_type:31) させ
  • その後3秒(stop_time:30) 停止する

4枚目の画像定義箇所は

パラメータ説明
<image_url> 画像ファイル名 <image_url>

画像ファイル名を指定して下さい。
「../images/photo01.jpg」や「./001/photo01.jpg」等の相対指定も可能です。

属性値(image_urlに対する属性)説明
effect_type=" エフェクト種別 "

エフェクト種別を指定して下さい。
エフェクト種別は50種類&カメラ移動モードを搭載しています。
Version 1.2.0からユーザさんが独自でエフェクトを作成できるカスタムエフェクト機能が追加されました。
詳しくはp_parameter : [存在しないリンクです]をご覧下さい。

effect_time=" エフェクト時間 "

エフェクト時間を0.1秒単位で指定して下さい。

1秒間エフェクトさせたい場合は、10と指定します。

stop_time=" 停止時間 "

画像停止時間を0.1秒単位で指定して下さい。

1秒間停止させたい場合は、10と指定します。

STEP 3

a.JavaScriptでの組み込み

HTMLソース(misfpe.html)を開いて編集します。

以下の2つの記述を行います。

1.外部JavaScriptファイル(FPEを制御する為のopenFPE関数等が含まれます)読み込み定義を記述して下さい。

2.FPEを組み込みたい個所へopenFPE関数(JavaScript)を記述して下さい。

※JavaScriptファイル郡(flash.js,flash_check.js)は配布ファイル中の「jsフォルダ」に格納されています。

1.外部JavaScriptファイルの組込み
<!-- ここから外部JavaScriptファイルの読込定義 --> 
<SCRIPT language="JavaScript" type="text/javascript" src="flash_check.js"></SCRIPT>

<SCRIPT language="JavaScript" type="text/javascript" src="flash.js"></SCRIPT>
<!-- ここまで外部JavaScriptファイルの読込定義 --> 

※上記コードをHTMLソース先頭の<HEAD>から</HEAD>の間に記述(コピー&ペースト)します。

2.openFPE関数での組み込み(例)
<!-- ここからFPE組込定義 -->
<SCRIPT language="JavaScript" type="text/javascript">

<!--
openFPE('misfpe.swf','001.jpg',310,310,'config.xml','#ffffff');
//-->
</SCRIPT>
<!-- ここまでFPE組込定義 --> 

※FPEを組み込みたい箇所へ、上記コードをHTMLソースに記述(コピー&ペースト)します。
後述するパラメータ説明を参考に、画像サイズ等のパラメータを修正して下さい。

※ここでは理解し易くするためにJavaScript無効の環境下での代替イメージ表示定義は省いています。
JavaScript無効の環境で代替イメージを表示させる方法はHTMLへの組込み手順からご覧下さい。

パラメータ説明

openFPE('FPE本体ファイル名','代替イメージ',横幅,高さ,'定義ファイル名','背景色')

openFPE関数の書式は上記内容となります。
当説明に沿ってファイル郡を準備されている場合は
第3引数の「横幅」と第4引数の「高さ」のみを用意した画像サイズへ変更してください。

第2引数で指定されている「001.jpg」は古いFlashPlayerがインストールされている環境で表示される代替イメージです。FPEを初めて利用される方で、まず動かしてみたい場合は適当な値を設定して下さい。組み込みのコツを掴んだところで代替イメージの指定を行いましょう。

openFPE関数の詳細はHTMLへの組込み手順からご覧下さい。

b.完成

HTMLファイルをブラウザで開いてみましょう。