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

Question

環境：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;

 }
};

mr_araki · Accepted Answer

■次のフレームに移動しない件について
１．試しに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は非常に便利な機能なので、
外部からデータを取って来たとき、関数を実行するとき、計算するとき等
どんどん乱用すると単純なミスを防げます。

mr_araki · Answer

中途半端な説明でもうしわけない…;;

>gotoAndPlay('slideshow');のslideshowは
これはスライドショーのあるフレームのラベルを指定します
フレーム番号が2であれば
gotoAndPlay(2);
でも大丈夫です。


>//全画像数を取得。XMLの記述方法で変わってきます
サンプルのXMｌを見ると大丈夫そうです。
ようはtotalImagesの値が全画像の枚数と同じであればOK
今回はrootNode.childNodes.lengthからそれを取得しています



> それと根本的なところなんですが
> １フレーム目に教えていただいたスクリプトを入れて
> ２フレーム目にスライドショーのスクリプト
> とすると、その渡し方はどうなりますでしょうか？
> それぞれstopさせておいていいのでしょうか？

現状１フレームしかないような作りであれば
上記の方法でOKです

全画像が読み込まれるまで１フレーム目でずっとstopしていますので
そこにローディングの画像などを配置します。


基本的に画像やらXMLを読み込む場合は
都度ムービーを止めてローディングするか
先に全部読み込んでからメインのムービーを開始します。
※前者の方がサイトの利用者にとっては良いとは思いますが、作るのがとにかく大変です。

mr_araki · Answer

既存のソースを変更するのは結構めんどうだと思います。
画像を一度読み込んでおくとキャッシュされるので
ひとつ前のフレームで先に読み込むのはどうでしょうか

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);
        }
}

先に全画像を読み込むのでローディングに結構時間がかかると思いますが
一番シンプルなやり方だと思います。

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

■次のフレームに移動しない件について

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

既存のソースを変更するのは結構めんどうだと思います。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング