ホーム
メインメニュー

Flash(FPE)とPHPでシンプルスライドショー

Flash(FPE)とPHPで動作するシンプルなスライドショーです。

指定したディレクトリ中の画像をスライドショーとして表示させることができます。
FTPで画像をアップするだけでFlashスライドショーとして利用できるのでお手軽です。
既存のHTMLに組込可能で且つ無駄な余白等がないことから汎用性は高いと思います。
特に利用制限はありませんので「Flash(FPE)とPHPでシンプルスライドショー」をダウンロードして下さい。

2005.08.15 FPEプラグイン用パラメータ追加

マウスカーソルを画像に重ねると再生停止です。
スライドショー中の写真は『風のおひるね 〜しっぽの小部屋〜』さんから利用させて頂いております。

連携の仕組み

動作サンプル
サンプルの使用方法

PHP Version 4.3.10で動作確認していますが4.3.x系であれば動作すると思います。

FPE(フラッシュ プレゼンテーション エンジン)が必要です。
FPEはELZで配布されているものを入手して下さい。
※広告バナーが表示されますが機能制限無しのフリー版があります。

「Flash(FPE)とPHPでシンプルスライドショー」をダウンロードして下さい。

ダウンロードしたファイルを適当なディレクトリに展開後、misfpe.swf(FPE本体)を同一ディレクトリに設置しサーバにアップして下さい。

sample_*.htmlにアクセスすることでシンプルスライドショーサンプルを御覧になれると思います。

必要なファイル及び構成


    misfpe.swf (FPE本体)
    fpe_xml.php (特定ディレクトリ中の画像ファイル一覧をFPE定義ファイル(XML)として出力するもの)
    sample_a.html (スライドショーサンプル 画像小)
    sample_b.html (スライドショーサンプル 画像中)
    sample_c.html (スライドショーサンプル 画像大)
    no_image.jpg (画像が存在しない場合に表示する代替イメージ)
    css (スタイルシート格納ディレクトリ)
        style.css (スタイルシート)
    config (設定ファイル格納ディレクトリ)
        config_fpe.php (スライドショーの動作を決める設定を記述)
    plugin (プラグインファイル格納ディレクトリ)
        mask_???.swf (マスクプラグインファイル)
        filter_???.swf (フィルタプラグインファイル)
    gallery (画像格納ディレクトリ)
        xxxxx01 (適当なディレクトリ1)
            xxx.jpg (スライドショーに表示する画像)
            xxx.jpg (スライドショーに表示する画像)
            xxx.jpg (スライドショーに表示する画像)
                    ......
                    ......
                    ......
                    ......
            xxx.jpg (スライドショーに表示する画像)
        xxxxx02 (適当なディレクトリ2)
            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をテキストエディタ等で更新する手間が省けますね。

設定方法
config_fpe.phpの変更

config_fpe.php中の定義を変更することでスライドショーで使用されるエフェクトや時間等を変更できます。
エフェクト種別等についてはELZからFPEマニュアルをダウンロード、もしくはオンラインで参照して下さい。

<?php
////////////////////////////////////////////////////////////////
// 画像格納ディレクトリ設定
////////////////////////////////////////////////////////////////
    
$gallery_dir = "gallery";

////////////////////////////////////////////////////////////////
// 読み込み対象拡張子の設定(通常変更する必要はありません)
////////////////////////////////////////////////////////////////
    
$read_ext = "\.(jpe?g|swf)$";

////////////////////////////////////////////////////////////////
//ディレクトリに画像が存在しない場合の代替イメージファイル名
//misfpe.swfと同一ディレクトリに設置します。
////////////////////////////////////////////////////////////////
    
define('NO_IMAGE', "no_image.jpg");




////////////////////////////////////////////////////////////////
//プラグイン定義
//HTMLと同一の場所に適当なディレクトリ(plugin等)を作成してプラグインファイルを置きます。
////////////////////////////////////////////////////////////////
    
define('FPE_PLUGIN', "./plugin/mask_flash1b.swf");

    define('FPE_PLUGIN_TYPE', 0);


////////////////////////////////////////////////////////////////
// FPE定義ファイル用パラメータ(お好みで設定して下さい)
////////////////////////////////////////////////////////////////

    //エフェクト種別(1-50,1100-2699迄)
    
define('FPE_EFFECT_TYPE', 1410);

    
//エフェクト時間(1/10秒単位)
    
define('FPE_EFFECT_TIME', 60);

    
//ストップ時間(1/10秒単位)
    
define('FPE_STOP_TIME', 24);

    
//アラインモード(1-9迄)
    
define('FPE_ALIGN_MODE', 5);

    
//ズームモード(0-3迄)
    
define('FPE_ZOOM_MODE', 1);

    
//プレイモード(0-2迄)
    
define('FPE_PLAY_MODE', 1);

?>
画像のアップロード

galleryディレクトリ配下に適当なディレクトリを作成し画像を置いて下さい。

    xxxxx.html (用意したHTMLファイル)
    misfpe.swf (FPE本体)
    fpe_xml.php (特定ディレクトリ中の画像ファイル一覧をFPE定義ファイル(XML)として出力するもの)
    no_image.jpg (画像が存在しない場合に表示する代替イメージ)
    css (スタイルシート格納ディレクトリ)
        style.css (スタイルシート)
    config (設定ファイル格納ディレクトリ)
        config_fpe.php (スライドショーの動作を決める設定を記述)
    plugin (プラグインファイル格納ディレクトリ)
        mask_???.swf (マスクプラグインファイル)
        filter_???.swf (フィルタプラグインファイル)
    gallery (画像格納ディレクトリ)
        xxxxx01 (適当なディレクトリを作成して下さい。)
            xxx.jpg (スライドショーに表示する画像をアップして下さい。)
            xxx.jpg (スライドショーに表示する画像をアップして下さい。)
                    ......
                    ......
                    ......
            xxx.jpg (スライドショーに表示する画像をアップして下さい。)
        xxxxx02 (適当なディレクトリを作成して下さい。)
            xxx.jpg (スライドショーに表示する画像をアップして下さい。)
                    ......
                    ......
            xxx.jpg (スライドショーに表示する画像をアップして下さい。)
HTMLへの組込方法(Objectタグ記述)

用意したHTMLにシンプルスライドショーを組み込む場合Objectタグを記述する必要があります。
Objectタグ中の数箇所に、スライドショーサイズ(横幅、高さ)及びFPE定義ファイルの場所を定義します。

width       横幅(ピクセル単位で指定)
height      高さ(ピクセル単位で指定)
flashvars   FPE定義ファイルの指定

    赤字で記述されている箇所がスライドショーとして表示させたいディレクトリを指定する部分です。
    xmldata=fpe_xml.php?path=gallery/xxxxx01
    fpe_xml.phpはpathで指定されたディレクトリ中の画像一覧をXMLで出力するプログラムとなります。
HTML中のOBJECTタグ記述例(fpe_xml.phpの指定方法)
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="360" height="240">
<param name="movie" value="misfpe.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<param name=scale value="noscale">
<param name=salign value="TL">
<param name="flashvars" value="xmldata=fpe_xml.php?path=gallery/xxxxx01">
<embed src="misfpe.swf"
width="360" height="240"
quality="high" bgcolor="#ffffff" scale="noscale" salign="TL"
flashvars="xmldata=fpe_xml.php?path=gallery/xxxxx01"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>
</object> 

完成

用意したHTML(xxxxx.html)にアクセスして下さい。
スライドショーの表示サイズと用意する画像のサイズは必ずしも同一の大きさにしなくてもOKです。
FPEが自動的にサイズ調整してくれます。

Yaibeen