Flash(FPE)とPHPでシンプルスライドショー
Flash(FPE)とPHPで動作するシンプルなスライドショーです。
指定したディレクトリ中の画像をスライドショーとして表示させることができます。
FTPで画像をアップするだけでFlashスライドショーとして利用できるのでお手軽です。
既存のHTMLに組込可能で且つ無駄な余白等がないことから汎用性は高いと思います。
スライドショーサンプル
- 『利用条件』
- 特に制限はありません。個人利用、商用利用、改変、再配布は自由です。
- 利用した事によるいかなる損害も、作者は一切の責任を負いません。
- ダウンロード
- Flashシンプルスライドショー
- FPE1.2.0バージョンアップに伴い以前配布していたスクリプトとは互換性がありません。
- カスタムエフェクト、カスタムプラグイン等の新機能に対応しました。
- XML出力時の文字種別をshift_jisからUTF-8へ変更。
- HTMLへの組込みをObjectタグ方式からJavaScript版へ変更。
動作サンプル
サンプル中の『Yaibeenロゴ』はJPEG画像です。もちろん変更して利用していただいて構いません。ロゴが不要であれば定義から削除して下さい。
サンプルの使用方法
PHP Version 4.4.4で動作確認していますが4.4.x系以降であれば動作すると思います。
FPE(フラッシュ プレゼンテーション エンジン)が必要です。
FPEはELZで配布されているものを入手して下さい。
※広告バナーが表示されますが機能制限無しのフリー版があります。
ダウンロードしたファイルを適当なディレクトリに展開後、misfpe.swf(FPE本体)とflash.js,flash_check.js及び必要なプラグインを同一ディレクトリに設置しサーバにアップして下さい。
sample*.htmlにアクセスすることでシンプルスライドショーサンプルを御覧になれると思います。
必要なファイル及び構成
misfpe.swf (FPE本体 ELZのFPE配布ファイルからコピーしてください)
js (FPE組込み用外部JavaScriptファイル格納ディレクトリ)
flash_check.js (ELZのFPE配布ファイルからコピーしてください)
flash.js (ELZのFPE配布ファイルからコピーしてください)
plugin (プラグインファイル格納ディレクトリ)
mask_???.swf (マスクプラグインファイル ELZのFPE配布ファイルからコピーしてください)
filter_???.swf (フィルタプラグインファイル ELZのFPE配布ファイルからコピーしてください)
***.jpg (カスタムプラグインファイル テロップやオリジナルフィルタ画像)
***.png (フィルタプラグインファイル テロップやオリジナルフィルタ画像)
fpe_xml.php (特定ディレクトリ中の画像ファイル一覧をFPE定義ファイル(XML)として出力するもの)
sample001.html (スライドショーサンプル1)
sample002.html (スライドショーサンプル2)
sample003.html (スライドショーサンプル3)
sample004.html (スライドショーサンプル4)
no_image.jpg (画像が存在しない場合に表示する代替イメージ)
css (スタイルシート格納ディレクトリ)
style.css (スタイルシート)
config (設定ファイル格納ディレクトリ)
common.php (スライドショーの動作を決める設定を記述)
background (背景画像格納ディレクトリ)
gallery (画像格納ディレクトリ)
xxxxx01 (適当なディレクトリ1)
config.php (設定ファイル:省略可能)
xxx.jpg (スライドショーに表示する画像)
xxx.jpg (スライドショーに表示する画像)
xxx.jpg (スライドショーに表示する画像)
......
......
......
......
xxx.jpg (スライドショーに表示する画像)
xxxxx02 (適当なディレクトリ2)
config.php (設定ファイル:省略可能)
xxx.jpg (スライドショーに表示する画像)
......
......
xxx.jpg (スライドショーに表示する画像)
仕組みについて
- FPEの仕組み
-
FPEはXML形式の定義ファイルに記載されたパラメータで動作します。
PHP等のサーバサイドスクリプトと連携させない場合は、テキストエディタ等でconfig.xmlを作成し画像やプラグインの動きを定義します。
・misfpe.swf(FPE本体)がconfig.xmlをサーバにリクエストし、その定義内容によって動作が決まります。
・動きや表示画像を変更したい場合はconfig.xmlをテキストエディタ等で変更し、サーバにアップする必要があります。
- PHPで動的に定義ファイル(XML)を作成する
-
「Flash(FPE)とPHPでシンプルスライドショー」は上述したconfig.xmlをPHPサイドで動的に作成するものです。
fpe_xml.phpで動的に定義ファイルを作成しFPEに読み込んでもらうということになります。
アクセスする度に指定ディレクトリ中の画像ファイル一覧を取得し、その結果をXMLとしてFPEに渡します。
よって画像をFTP等でアップ後、すぐにスライドショーとして画像が取り込まれますので、毎回config.xmlをテキストエディタ等で更新する手間が省けますね。
設定方法
- common.phpの変更
-
common.phpには全てのスライドショーで利用する共通設定を行います。
定義を変更することでスライドショーで使用されるエフェクトや時間等を変更できます。
ディレクトリ単位でエフェクト情報の変更を行うこともできます。その際は該当ディレクトリにconfig.phpを設置して下さい。
エフェクト種別等についてはELZからFPEマニュアルをダウンロード、もしくはオンラインで参照して下さい。
<?php
////////////////////////////////////////////////////////////////
//
// 共通設定ファイル(common.php)
//
// ディレクトリ別にエフェクト等を変更したい場合は、該当ディレクトリに
// config.phpを設置して下さい。
// 該当ディレクトリにconfig.phpが存在しない場合は当ファイルの設定
// が有効になります。
//
//
////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
// 画像格納ディレクトリ設定
////////////////////////////////////////////////////////////////
$gallery_dir = "gallery";
////////////////////////////////////////////////////////////////
// 読み込み対象拡張子の設定(通常変更する必要はありません)
//
////////////////////////////////////////////////////////////////
$read_ext = "\.(jpe?g|swf)$";
////////////////////////////////////////////////////////////////
//ディレクトリに画像が存在しない場合の代替イメージファイル名
//misfpe.swfと同一ディレクトリに設置します。
////////////////////////////////////////////////////////////////
$fpe_no_image = "no_image.jpg";
////////////////////////////////////////////////////////////////
// FPE定義ファイル用パラメータ(お好みで設定して下さい)
////////////////////////////////////////////////////////////////
//バナーアラインモード(1-9迄:表示位置)
$fpe_banner_align = "3";
////////////////////////////////////////////////////////////////
// メイン画像エフェクト定義部
////////////////////////////////////////////////////////////////
//エフェクト種別(1-50,1100-2699迄)
$fpe_effect_type = "1250";
//エフェクト時間(1/10秒単位)
$fpe_effect_time = "30";
//ストップ時間(1/10秒単位)
$fpe_stop_time = "0";
//アラインモード(1-9迄:表示位置)
$fpe_align_mode = "5";
//ベースモード(1-9迄:基準点)
$fpe_base_mode = "5";
//ズームモード(0-3迄)
$fpe_zoom_mode = "0";
//プレイモード(0-2迄)
$fpe_play_mode = "1";
//ブレンドモード(画像合成方法)
$fpe_blend_mode = "normal";
////////////////////////////////////////////////////////////////
// プラグインエフェクト定義部
//misfpe.swfと同一ディレクトリにpluginディレクトリを設置て下さい
////////////////////////////////////////////////////////////////
//プラグインを指定します(fpe_xml.phpを設置する場所を基準にパス指定します)
$fpe_plugin_url = "plugin/mask_line1b.swf";
//プラグインを利用しない場合は以下の様に(空白に)して下さい。
//$fpe_plugin_url = "";
//プラグインエフェクト種別
$fpe_plugin_effect_type = "fe_none";
//プラグインブレンドモード
$fpe_plugin_blend_mode = "normal";
//プラグインアラインモード(1-9迄:表示位置)
$fpe_plugin_align_mode = "7";
//プラグインベースモード(1-9迄:基準点)
$fpe_plugin_base_mode = "7";
////////////////////////////////////////////////////////////////
// 背景定義部
////////////////////////////////////////////////////////////////
//背景画像(不要であれば空白のまま)
$fpe_background = "";
//背景エフェクト種別
$fpe_bg_effect = "2";
//背景エフェクト時間(1/10単位)
$fpe_bg_time = "6";
////////////////////////////////////////////////////////////////
// カスタムエフェクト定義部
////////////////////////////////////////////////////////////////
//カスタムエフェクト定義
$fpe_custom_effect = "";
?>
- 各画像ディレクトリへのconfig.phpの設置
-
config.phpを設置することで該当ディレクトリのスライドショーのみで有効な設定を行えます。
記述できるパラメータはFPE関連パラメータ『$fpe_*』です。common.phpからパラメータをピックアップして下さい。
config.phpを設置しない場合は、common.phpの共通設定内容でスライドショーが動作します。
エフェクト種別等についてはELZからFPEマニュアルをダウンロード、もしくはオンラインで参照して下さい。
エフェクト種別とエフェクト時間を変更するサンプル(config.php)
(その他の設定はconfig/common.phpの内容が継承されます)
<?php
$fpe_effect_type = "5";
$fpe_effect_time = "10";
?>
プラグインを変更するサンプル(config.php)
(その他の設定はconfig/common.phpの内容が継承されます)
<?php
$fpe_plugin_url = "plugin/mask_line1a.swf";
?>
カスタムエフェクト、カスタムプラグイン等を追加するサンプル(config.php)
<?php
エフェクト種別とエフェクト時間を変更するサンプル(config.php)
(その他の設定はconfig/common.phpの内容が継承されます)
$fpe_effect_type = "in,out";
$fpe_plugin_url = "plugin/custom001.jpg";
$fpe_plugin_blend_mode = "hardlight";
$fpe_plugin_align_mode = "5";
///////////////////////////////////////////////////////
//FPE定義ファイル(XML)組み立て
///////////////////////////////////////////////////////
$fpe_custom_effect = <<<BUF_XML
<effect>
<in layer="0" x="301,260,270" y="0,150" xs="31,100,-50" ys="31,100,50" bright="202,0,-100" alpha="102,100,0" />
<out x="301,-260" xs="31,-50" ys="31,50" bright="202,-100" alpha="202,0" />
</effect>
BUF_XML;
?>
画像のアップロード
galleryディレクトリ配下に適当なディレクトリを作成し画像を置いて下さい。
HTMLへの組込方法(openFPE呼び出し)
- 配布ファイルに添付されているsample*.htmlをコピーしてお使いになると楽に利用できます。
- 組込みの詳細についてはELZで配布されているFPEマニュアルを参照して下さい。
- 1.外部JavaScriptファイルの定義
-
HTMLソース先頭の<head>から</head>の間に外部JavaScriptファイル読み込み定義を記述します。
これはFPEを利用するためのおまじないだと思ってください。
<!-- ここから外部JavaScriptファイルの読込定義 -->
<script type="text/javascript" src="./js/flash_check.js"></script>
<script type="text/javascript" src="./js/flash.js"></script>
<!-- ここまで外部JavaScriptファイルの読込定義 -->
- 2.FPE組込み記述(サンプル)
- openFPE関数をつかってFPEを組み込みます。スライドショーを表示したい箇所に以下の様な記述をHTMLへ定義します。
<!-- ここからFPE組込定義 -->
<script type="text/javascript">
<!--
openFPE('misfpe.swf','代替画像.jpg',540,360,'fpe_xml.php?path=作成したディレクトリ名','#000000');
//-->
</script>
<!-- ここまでFPE組込定義 -->
<!-- ここからJavaScript無効時に表示する代替イメージ -->
<noscript>
<img src="代替画像.jpg" width="540" height="360" alt="代替イメージ" />
<p>JavaScriptをオンにして下さい</p>
</noscript>
<!-- ここまでJavaScript無効時に表示する代替イメージ -->
- 『openFPE関数の書式』
-
openFPE('FPE本体ファイル名','代替イメージ',横幅,高さ,'定義ファイル名','背景色')
定義ファイル名欄は
fpe_xml.php?path=xxxxx01
この様にしてください。path=xxxxx01の箇所を該当ディレクトリ名に置き換えます。
完成
用意したHTML(xxxxx.html)にアクセスして下さい。
