3分でフラッシュスライドショーを作成

上の様な単純なフラッシュスライドショー形式を3分程度で作成し、あなたのWEBページに組み込む方法を紹介します。

ここではSTEP1～STEP3迄の作業手順としてFPEイージーモードの具体的な設定例(xml)及び作成方法を説明します。

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

STEP 1

a.画像ファイル名の変更

準備した3枚の画像例

画像を3枚準備しましょう。
それぞれファイル名を001.jpg～003.jpgと変更します。

エキスパートモードでは任意の画像ファイル名を指定可能です。

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

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

・各画像ファイル(001.jpg～003.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とは

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

config.xmlをテキストエディタ等で開き、以下の4パラメータをcommonセクション(コモンセクション)中に指定して下さい。

commonセクションとはconfig.xml中の<common>から</common>までを指します。

config.xmlの内容: <?xml version="1.0" encoding="UTF-8" ?>
<pagedata>
<common>
<copyright>elz.jp</copyright>

<image_max>3</image_max>
<effect_type>31</effect_type>
<effect_time>10</effect_time>
<stop_time>30</stop_time>

</common>
</pagedata>

パラメータ説明

<image_max>画像枚数<image_max>: 表示する画像枚数を指定して下さい。
定義上1～999迄指定できますが、あまり多くの画像枚数を指定するとメモリ不足となります。
画像サイズにも関係しますが、1枚～30枚くらいが実用範囲でしょう。

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

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

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

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

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

STEP 3

a.JavaScriptでの組み込み

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

※UTF-8に対応したテキストエディタが必要です

以下の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',640,400,'config.xml','#ffffff');
//-->

</SCRIPT>
<!-- ここまでFPE組込定義 -->

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

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

パラメータ説明

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

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

第2引数で指定されている「001.jpg」は古いFlashPlayerがインストールされている環境で表示される代替イメージです。FPEをはじめて利用される方はあまり気にしないで下さい。

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

b.完成

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

Flash Presentation Engine (FPE) Online Manual