XMLを利用したFLASH画像ギャラリーでローディングさせたい

質問

環境：FLASH８
XMLを利用したFLASH画像ギャラリー（スライドショー）を
制作しています。
スクリプトはあるFLASHの勉強サイトを参考にさせていただきました。

機能としては、スライドショーが自動再生から始まり
アルファのフェードが入りながら画像の数だけループして、
自動再生の一時停止、次ボタンと戻るボタンでスライド内を
移動できるようになっています。

ここまではいいのですが、回線が遅い環境でみると
６枚目くらいから、画像の読み込みがついてこれなくなって
枚数カウントだけが進み、画像が黒のまま表示されなく
なってしまいます。

改善したいポイントとしては、
最初の段階でローディング画面（前処理）を設けて、ある程度
読み込みが完了した時点で自動スライド開始としたいと
思っています。

もしくは、全て画像を読み込み終えてからスライド開始。
これでメモリ不足や回線スピード不足が解消されれば
今回の問題はクリアでるのではないかと考えています。

画像は50枚前後の少し大きめの画像を使用しています。

どうか、お知恵を貸していだだければと思います。

★使用スクリプト

photos_xml = new XML();
photos_xml.load("photo.xml");
photos_xml.ignoreWhite = true;
photos_xml.onLoad = SlideShow;

function SlideShow(success) {
if (success) {
rootNode = photos_xml.firstChild;
Slides_num = rootNode.childNodes.length;
first_Slide = rootNode.firstChild;
last_Slide = rootNode.lastChild;
currentSlide = first_Slide;
currentNo = 1;
passSlide(first_Slide);
ID = setInterval(autoExchange, 5000);
}
}

function passSlide(newSlide) {
image = newSlide.attributes.image;
imageWidth = newSlide.attributes.p_width;
imageHeight = newSlide.attributes.p_height;
slideTitle = newSlide.firstChild.nodeValue;
screen._alpha = 0;
delay = getTimer();
_root.onEnterFrame = function() {
if (getTimer()>delay+200) {
screen._alpha += (100-screen._alpha)/30;
screen._width = imageWidth;
screen._height = imageHeight;
screen._x = 305-imageWidth/2;
screen._y = 220-imageHeight/2;
}
frame._x += (305-imageWidth/2-frame._x)/3;
frame._y += (220-imageHeight/2-frame._y)/3;
frame._width += 2+(imageWidth-frame._width)/3;
frame._height += 2+(imageHeight-frame._height)/3;
};
loadMovie(image, screen);
}

function autoExchange(nextSlide) {
nextSlide = currentSlide.nextSibling;
if (nextSlide == null) {
passSlide(first_Slide);
currentSlide = first_Slide;
currentNo = 1;
} else {
currentNo++;
passSlide(nextSlide);
currentSlide = nextSlide;
}
}

auto_on.onRelease = function() {
ID = setInterval(autoExchange, 4000);
mx.behaviors.DepthControl.sendBackward(this);
};

auto_off.onRelease = function() {
clearInterval(ID);
mx.behaviors.DepthControl.sendBackward(this);
};

next_btn.onRelease = function() {
nextSlide = currentSlide.nextSibling;
if (nextSlide == null) {
passSlide(first_Slide);
currentSlide = first_Slide;
currentNo = 1;
} else {
currentNo++;
passSlide(nextSlide);
currentSlide = nextSlide;
}
};

back_btn.onRelease = function() {
previousSlide = currentSlide.previousSibling;
if (previousSlide == null) {
passSlide(last_Slide);
currentSlide = last_Slide;
currentNo = Slides_num;
} else {
currentNo--;
passSlide(previousSlide);
currentSlide = previousSlide;

}
};

回答No.3

mr_araki · ベストアンサー

■次のフレームに移動しない件について
１．試しにgotoAndPlayをスクリプトの先頭に書く
関数の使い方自体があっているかどうかをチェックします

２．totalImages と loadedImages をtraceする
・totalImagesは
totalImages = rootNode.childNodes.length;
の後にトレースして画像数と一致しているかチェック
・loadedImagesは
imageLoaderListener.onLoadInit と
imageLoaderListener.onLoadError
で１を加算した後にトレース

FLASHのダウンロードシミュレート機能は画像を先読みしても
キャッシュされないので、実際にブラウザで見るときと残念ながら異なります。

スクリプトのレイヤーを分けるとどうなるか試したことがないので分かりません。
同じレイヤーの先頭にstop()を入れたほうがいいかもしれません。自信無しです;

あとなくても良いですが、最初のローディングがどこかで失敗することも考えられるので１フレーム目の最後に
function loadComplete()
{
　　clearTimeout(LOADING_TIMEOUT);
　　gotoAndPlay(2);
}
LOADING_TIMEOUT = setTimeout('loadComplete', 15000);
のようなのを追加して、上記の例では15秒経過したら次のフレームへ強制移動させる。

↑を追加した場合、
imageLoaderListener.onLoadInit と
imageLoaderListener.onLoadError の
if分の中のgotoAndPlay(2)をloadComplete()に変更すると良いと思います。

最後にアドバイスとして、
Flashのtraceは非常に便利な機能なので、
外部からデータを取って来たとき、関数を実行するとき、計算するとき等
どんどん乱用すると単純なミスを防げます。

回答No.2

mr_araki

中途半端な説明でもうしわけない…;;

>gotoAndPlay('slideshow');のslideshowは
これはスライドショーのあるフレームのラベルを指定します
フレーム番号が2であれば
gotoAndPlay(2);
でも大丈夫です。

>//全画像数を取得。XMLの記述方法で変わってきます
サンプルのXMｌを見ると大丈夫そうです。
ようはtotalImagesの値が全画像の枚数と同じであればOK
今回はrootNode.childNodes.lengthからそれを取得しています

> それと根本的なところなんですが
> １フレーム目に教えていただいたスクリプトを入れて
> ２フレーム目にスライドショーのスクリプト
> とすると、その渡し方はどうなりますでしょうか？
> それぞれstopさせておいていいのでしょうか？

現状１フレームしかないような作りであれば
上記の方法でOKです

全画像が読み込まれるまで１フレーム目でずっとstopしていますので
そこにローディングの画像などを配置します。

基本的に画像やらXMLを読み込む場合は
都度ムービーを止めてローディングするか
先に全部読み込んでからメインのムービーを開始します。
※前者の方がサイトの利用者にとっては良いとは思いますが、作るのがとにかく大変です。

お礼

mr_araki 様

詳細な回答ありがとうございます。
教えていただいた通りにやってみて
プレビューしてみましたが
ローデングから次のフレームに移ってくれませんでした。

試しにxmlの画像リストを５枚でやってみましが
フレーム２に進んでくれませんでした。

あと一歩な気がするのですが
申し訳ないです。

今回のスライドでなぜプリロードさせたいかというと
ひとつに、macでスムーズに動くこと
そしてADSL程度の回線を使用されている方でも
画像が飛ばずに見られること
この２つの問題をクリアーするためです。

アルファの処理で、もう処理が追いついてない感じです

実際速い回線のWIN環境でみると
何の問題もないんですが…。

ローディングなしの段階で
FLASH８のダウンロードシュミレートを行ってみると
DSL（32.6kb/s）では、一枚目までは何とか表示できて
２枚目以降からは読み込みが追いつかず
xmlのカウントだけが進んでいってしまいます。
（黒いまま、スライド番号とタイトルだけが一定時間ごとに表示されていく）

今の現状では１フレームの一番上のレイヤーにstopをいれて
下のレイヤーに教えていただいたスクリプトを
そのままいれています。
何か足りないものがあったりするのでしょうか？

何度も答えていただいて本当にありがとうございます
本当に感謝しております。

回答No.1

mr_araki

既存のソースを変更するのは結構めんどうだと思います。
画像を一度読み込んでおくとキャッシュされるので
ひとつ前のフレームで先に読み込むのはどうでしょうか

var totalImages:Number = 0;//全画像数
var loadedImages:Number = 0;//読み込み完了画像数

var imageLoader:MovieClipLoader = new MovieClipLoader();
var imageLoaderListener:Object = new Object();
imageLoaderListener.onLoadInit = function()
{
loadedImages += 1;//読み込み完了
if (loadedImages == totalImages) {
//全画像読み込み完了。スライドショーへ
gotoAndPlay('slideshow');
}
}
imageLoaderListener.onLoadError = function()
{
loadedImages += 1;//エラーの場合も完了とする
if (loadedImages == totalImages) {
//全画像読み込み完了。スライドショーへ
gotoAndPlay('slideshow');
}
}
imageLoader.addListener(imageLoaderListener);

//画像を読み込む為の適当なMCを作成
dummyMovieClip = _root.createEmptyMovieClip('dummy', 0);
//非表示にする（他にもっとましなやり方はあると思いますが…）
dummyMovieClip._x = -10000;

//画像設定ファイル読み込み
imageXmlLoader = new XML();
imageXmlLoader.ignoreWhite = true;
imageXmlLoader.onLoad = pharseImageXml;
ImageXmlLoader.load('photo.xml');

//画像設定ファイルパース関数
function pharseImageXml(Success:Boolean)
{
if(Success){
var rootNode = this.firstChild;
//全画像数を取得。XMLの記述方法で変わってきます
totalImages = rootNode.childNodes.length;
for (node_index in rootNode.childNodes)
{
var currentNode = rootNode.childNodes[node_index];
var image = currentNode.attributes.image;
//読み込み
imageLoader.loadClip(image, dummyMovieClip);
}
}

先に全画像を読み込むのでローディングに結構時間がかかると思いますが
一番シンプルなやり方だと思います。

お礼

mr_araki 様

早速のアドバイスありがとうございました。
感謝します！

せっかくアドバイスを頂いたのに
私の力不足で、そのスクリプトを上手く反映できずにいます。
申し訳ないです。

お手数ですが、私が理解していない部分について
教えていただけないでしょうか？

とりあえず、私が書き換えなければいけないところは
どこにあたるのでしょうか？勉強不足で申し訳ないです。

>gotoAndPlay('slideshow');のslideshowは
次のフレームのスクリプトの中を指すものと考えていいのでしょうか？
それとも次のフレームに「slideshow」というラベルをつける
必要があるのでしょうか？

>//全画像数を取得。XMLの記述方法で変わってきます
とありましたが子ノードの表記の仕方で書き換えないといけない
ということでしょうか？

読み込むXMLファイルは以下のような表記にしております。

--------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<Photos>
<picture image="sweden/01.jpg" p_width="525" p_height="350">#1</picture>
<picture image="sweden/02.jpg" p_width="525" p_height="282">#2</picture>
<picture image="sweden/03.jpg" p_width="525" p_height="318">#3</picture>
<picture image="sweden/04.jpg" p_width="525" p_height="350">#4</picture>
<picture image="sweden/05.jpg" p_width="525" p_height="217">#5</picture>

～省略～

<picture image="sweden/36.jpg" p_width="525" p_height="350">#36</picture>
</Photos>
--------------------------------------------------------

それと根本的なところなんですが
１フレーム目に教えていただいたスクリプトを入れて
２フレーム目にスライドショーのスクリプト

とすると、その渡し方はどうなりますでしょうか？

それぞれstopさせておいていいのでしょうか？

よろしければ再度アドバイスをいただければと思います。
よろしくお願いいたします。