suzukaで外部ファイルを読み込むスライドショー

質問

よく旅館などのホームページにあるような数枚の画像がフェードして変わっていくスライドショーを使ってホームページを作りたいと思っています。

イメージとしてはこの宿のトップにあるようなものです。
http://www.syoubun.com/

suzukaというソフトで同様のものが作れたのですが、この場合だと使用する画像を変更したり追加したりしたい場合に再度フラッシュを作り直さなければなりません。

画像を差し替えただけで変更できるように外部から画像を読み込んで同様のスライドショーを作ることはsuzukaで可能でしょうか？

もし可能であればやり方など教えていただければ幸いです。

よろしくお願いします。

回答No.1

BlurFiltan · ベストアンサー

そもそも書かれていらっしゃるサイトのスライドショーは
Suzuka とも Flash とも関係なくて
JavaScript の jQuery を使用したものですがそこのところはよろしいのでしょうか？？？

【jQuery を使用参考サイト例】
「画像をフェードインさせるスライドショーを作ってみた」
http://likearpeggio.blog63.fc2.com/blog-entry-197.html

以下では jQuery を使わず
Suzuka を使って似たような Flash を作成する方法を回答します。

＝＝＝ ＝＝＝ ＝＝＝

まずファイル構造が次のようになっているとします。

　任意のフォルダ
　　　├○○.html (○○.swf を貼り付ける)
　　　├○○.swf (作成する Flash ファイル)
　　　└image (フォルダ)
　　　　　├pic1.jpg
　　　　　├pic2.jpg
　　　　　├pic3.jpg
　　　　　├pic4.jpg
　　　　　└pic5.jpg

外部JPEG(pic1.jpg～pic5.jpg) は同じ縦横サイズであるとします。

Suzuka を起動させ、
[ファイル]→[プロジェクトのプロパティ]で「プロジェクトのプロパティ」パネルを表示させて
「基本設定」で「幅」と「高さ」をJPEGと同じ大きさにします。
また
同じパネルの「SWFバージョン」で「SWF8」を選択します。

そして[ファイル]→[名前を付けて保存]で上記の「任意のフォルダ」に任意の名前でプロジェクトファイル(.csf)を保存します。

Suzukaの編集画面のタイムライン(レイヤー名称の部分)を選択し
[右クリック]→[アクションレイヤーを挿入]より、ActionScript を記述用のレイヤーを挿入します。

そのアクションレイヤーのフレーム1を選択して
Suzukaの編集画面の右下の方にある [スクリプトを編集] ボタンをクリックし
出てくるスクリプトエディタパネルに次のようなスクリプトを書きます(コピペ可)。

//=================================
//JPEGの枚数の設定
var max_n = 5;
//JPEGフェードインのスピードを設定
var spd = 4;
//JPEGフェードイン後の完全表示時間(秒)を設定
var sec = 2.5;

//---以上が適当に変える設定---

//空のMC(ムービークリップ)mc0と1を 深度0と1に作成
this.createEmptyMovieClip("mc0", 0);
this.createEmptyMovieClip("mc1", 1);

//MovieClipLoaderを作成
var mcl = new MovieClipLoader();
//ロード監視用にするObjectを作成
var obj = new Object();

//JPEGロード完了時に実行するメソッドを定義
obj.onLoadInit = function(target_mc) {
//
//JPEGをロードしたMCを透明にする
target_mc._alpha = 0;
//JPEGをロードしたMCの深度を1(上側)にする
target_mc.swapDepths(1);
//
//JPEGをロードしたMCに毎フレーム実行するメソッドを定義
target_mc.onEnterFrame = function() {
//MCをspdずつ不透明にして行く
this._alpha += spd;
//MCが完全不透明になったら
if (this._alpha>=100) {
//指定秒後に関数loadJPEGを実行
setTimeout(loadJPEG, sec*1000);
//この毎フレーム実行するメソッドを削除
delete this.onEnterFrame;
}
};
};

//objをmclのリスナー(監視人)として登録
mcl.addListener(obj);

//カウント用変数の初期化
var j_num = 0;
var m_num = 0;

//関数loadJPEGの定義
function loadJPEG() {
//各カウント用変数のカウントアップ
j_num = (j_num<max_n) ? j_num+1 : 1;
m_num = (m_num == 0) ? 1 : 0;
//外部JPEGをロード
mcl.loadClip("image/pic"+j_num+".jpg", "mc"+m_num);
}

//関数loadJPEGを初回実行
loadJPEG();
//=================================

あとは
[ウィンドウ]→[プレビュー]してみるとか
または
[ファイル]→[SWFファイル生成]でSWFを上記の「任意のフォルダ」に書き出してもらうと出来上がりです。

なお、
[ツール]→[オプション]で出てくる「オプション」パネルの「全般」タブにある「パブリッシュ設定」の項目の欄で
　□ HTMLファイルも保存する
にチェックを入れておいて [SWFファイル生成] をすると、
上記の「任意のフォルダ」にはSWFファイルとともに、それが貼り付いたHTMLが書き出されます。

全体的には SWF6 以上で使用可なスクリプトばかりですが
MovieClipLoader が SWF7 以上、setTimeout が SWF8 以上でのみ使用可であるため
結局 SWF8 のFlashファイルを書き出す必要があります。
（SWF8 ＝ Flash Player 8 以上用の SWF）

また SWF8 にした場合、
外部画像ファイルは普通の JPEG 以外にも、プログレッシブJPEG や 静止GIF や PNG のロードが可能になります。

写真(JPEG)の枚数を変える方法はわかると思いますが、
例えば、写真(JPEG)を100枚にしたい場合は
imageフォルダ内に pic1.jpg～pic.100jpg を用意した上で
上記スクリプトの最初の
var max_n = 5;
の部分を
var max_n = 100;
に変えると写真の枚数を変更できます。

※※※注意※※※

//外部JPEGをロード
mcl.loadClip("image/pic"+j_num+".jpg", "mc"+m_num);
この部分で
"image/pic"+j_num+".jpg"
のように指定しているJPEGへのファイルパスは
SWFからではなくHTMLからのパスです。
ファイル構造変更の際には注意してください。

---変更例---

　任意のフォルダ
　　　├○○.html (○○.swf を貼り付ける)
　　　└image (フォルダ)
　　　　　├○○.swf (作成する Flash ファイル)
　　　　　├pic1.jpg
　　　　　├pic2.jpg
　　　　　├pic3.jpg
　　　　　├pic4.jpg
　　　　　└pic5.jpg

上のように変更した場合も
JPEGへのファイルパスの部分は
"image/pic"+j_num+".jpg"
このままで変更なしです。
(HTMLから見たJPEGの位置は変更していないため)

お礼

とても詳細なご回答ありがとうございます。

＞そもそも書かれていらっしゃるサイトのスライドショーは
＞Suzuka とも Flash とも関係なくて
＞JavaScript の jQuery を使用したものですがそこのところはよろしいのでしょうか？？？

恥ずかしながら知りませんでした。Flashで作ったのもだと思っていました。

jQueryについても少し調べてみようと思います。
非常に丁寧でわかりやすいご回答をいただき、本当にありがとうございました。