再質問：for文について（MovieClipLoaderについて）

質問

以前質問で解決したと思っていましたが、本番環境で不具合が発生しましたので再度質問させて頂きます。

サムネイル表示するファイル名が入ったデータを配列に格納し、その配列に格納されたデータ分だけfor文を使ってループ処理を行い、その中でムービークリップの複製を作りLoadClipにて読み込み処理を行なっています。

その処理は以下の通りです。

for文で配列に格納されているファイル名で読み込み処理を行い、onLoadInit関数で
　－複製したムービーの命名
　－読込んだJPEGのunload
　－セットカウンターのカウントアップ
等を行ないます。

for(i = 0 ; i <= var_ctr ; i++) {
　sheet.target.duplicateMovieClip(i, i + 1) ;
　dummy_loader.loadClip(var_folder + var_article[i] + ".jpg", sheet[ i ]);
}

dummy_listener.onLoadInit = function(target_mc:MovieClip) {
　sheet[var_setctr]._name = var_setctr ;
　sheet[var_setctr]._x += (var_setctr) * 90 ;
　dummy_loader.unloadClip(var_folder + var_article[var_setctr] + ".jpg");
　var_setctr++ ;
};

今回の問題は、

・コントロールファイルの読み込みから終了処理時までは「Now Loading」の表示を行っているが「Now Loading」の表示がされながらサムネイルが1枚づつ表示されてゆき、途中で止まってしまう。

・サムネイルをクリックした時に、別のエリアに拡大画像を表示する設定を終了処理で行なっているが、途中まで表示されたサムネイルをクリックすると正しく拡大表示される。

多分、以前の質問時にもご指摘を受けたように、読み込み完了待機のためにフレームを利用したループ処理を実装すれば解決するのかなぁと思っています。

宜しく御願い致します。

回答No.2

DPE · ベストアンサー

利用する数が 200 枚以上あっても、200 枚を同時にステージに置いて使うのでなければ、それほど処理は重くならないはずですが。
Thumb_nail のムービークリップを再利用し、その都度画像を読み直すのでしたら、古い画像は破棄されて新しい画像に置き換えられます。さしあたって同時に利用されるのは 10 ～ 20 枚程度ですので、unloadClip は必要ないかと思います。
いずれにしても、

　dummy_loader.unloadClip(var_folder + var_article[var_setctr] + ".jpg");

この記述では、サーバーにあるファイルそのものを削除するという指定になっています。これは unloadClip では不可能（実行されても困りますが）ですし、引数も unloadClip の指定の型と合致しないため、呼び出しても結果は失敗に終わり、意味を持ちません。

ムービーがカクカクする・ボタンやマウスの操作の反応が鈍い・システムのフリーズなど、深刻なトラブルが頻発するようなら、不要なものは片っ端から削除・不要になった画像等をいつまでもステージに置いておかないようにするなど、徹底的にムービーのスリム化・効率化を図ることが重要になってきます。
同時に使うのが サムネイルサイズの JPEG 画像 10 ～ 20 枚程度なら、そこまでパフォーマンスが落ちることはないでしょうし、Thumb_nail ムービークリップがステージから消えれば、その内部で複製したムービークリップや読み込んだ画像も自動的に破棄されると思います。
Thumb_nail ムービークリップが稼働している間に unloadClip を実行すると、せっかく読み込んだ画像が消えてしまいます。
あえて、明示的に不要なオブジェクトを削除するのでしたら、実行するタイミングとしては、Thumb_nail ムービークリップがタイムラインから消える直前といったところでしょうか。
ムービークリップが消えると、読み込んだ画像も一緒に破棄されます。MovieClip.removeMovieClip で、複製したムービークリップを画像ごと削除するという方法でもできそうです。

お礼

お礼が遅くなって申し訳ありません。

今回の処理は、同時に読込み枚数は多くても20枚程度が限度程度ですので、unloadの処理は省略しました。

これからも色々ご教授ください。
宜しく御願い致します。

回答No.1

DPE

MovieClipLoader のイベント関数の第１引数を定義しておくと、イベントが起きたムービークリップへの参照を受け取ることができます。
イベントが起きた時、該当するムービークリップを操作したいのでしたら、

　dummy_listener.onLoadInit = function ( target_mc:MovieClip )
　{
　　target_mc._x += (var_setctr) * 90 ;
　};

このような形で利用できます。

それから _name プロパティですが、これにはインスタンスの名前が格納されています。
例えば、ステージにある Thumb_nail の中の sheet の子である target は、絶対パスでは _root.Thumb_nail.sheet.target となりますが、target._name には、パスがなく「 target 」という文字列が入っています。
複製したムービークリップは複製時に新しいインスタンス名を指定しており、_name プロパティにはその名前が入っています。改めて命名する必要はありません。
その、名前なのですが。
例えば sheet.target をコピーし、コピーのムービークリップに１や２と数字で命名しても、文法上はエラーにはならないのですが、参照する時に sheet[ i ] となり、配列変数のように見えてしまいます。
Flash が配列変数として誤認することはないとは思いますが、面倒でも、sheet[ "target" + i ] のように何か英字の名前を付けた方が、分かりやすくなると思いますよ。

MovieClipLoader の unloadClip は、”loadClip で読み込んだ”画像やムービーを削除するメソッドです。ですから、引数は loadClip で読み込みを実行した、”ムービークリップへの参照”です。
JPEG などのビットマップ系の画像を大量に扱うと、ムービーが重くなり、再生するマシンにも負担をかけます。
少しでも負担を軽減するためにと、複製したムービークリップや外部から読み込んだ画像・ムービーなど、最初はステージになく、後から動的に追加したオブジェクトに限り、不要になった時にそれを削除できる機能が用意されています。
ムービーのパフォーマンスのことは改めて考えるとして、とりあえず unloadClip は不要です。

----------------

　> 読み込み完了待機のためにフレームを利用したループ処理を実装すれば解決するのかなぁと思っています。

方針に見当がついたら、まずはやってみましょう。
今回はロード完了率の算出も可能ですので、それも念頭に置いて考えますと。

　フレーム１：初期設定
　フレーム２：ムービークリップを複製し、読み込み命令を出す
　フレーム３：待機（ファイルアクセスへの終了を待つ）
　フレーム４：全ファイルオープン完了を待ち、ダウンロード総バイト数を算出する
　フレーム５：ロード完了率の計算
　フレーム６：全読み込みの終了を待ち、画像やスクロールバーの設定を行う
　フレーム７：タイムラインはここで止める

onLoadStart イベントを利用して、まず、全部のファイルが開くまで待機します。
ロード完了率の算出には、全体の総バイト数が必要です。これは全ムービークリップで読むバイト数の合計となり、１度計算すれば充分です。
しかし、onLoadStart イベント発生直後は読み込む総バイト数がまだ判明しておらず、その、ほんの少し後で判明するようです。
この辺りはちょっと簡略したロジックなのですが、フラグを監視して全部のムービークリップで onLoadStart が発生するのを待ち、バイト数の合計を出してから先に進むことにします。
フラグを確認している間に最後のムービークリップの総バイト数が判明するものと考える、少々甘いロジックです　^^;　もっと頑丈なスクリプトにするなら、個々の読み込みバイト数の確定を待って合計を出し、先に進む、といった方法が考えられます。
MovieClipLoader.getProgress でロード済みバイト数を取得し、ロード完了率を算出しながら、全部の読み込み終了を待ち、その後の処理を行います。
画像の配置・_visible 属性の切り替え・ムービークリップのボタン化・スクロールバーの処理など、読み込み完了後の処理は、どうせなら１箇所にまとめてしまいましょう。

スクリプトにすると、大体、以下のようになります。
スクロールバー関連などの一部のスクリプトは省略しますので、これまでご紹介してきたスクリプトを参考に追加してください。

　・フレーム１（初期設定）

　　//ファイル名テーブルとファイルの総数
　　filename_tbl = new Array( "image1" , "image2" , "image3" , "image4" , "image5" );
　　image_max = filename_tbl.length;

　　//ファイルオープンに成功した数
　　open_success = 0;

　　//読み込みが終了したファイルの数
　　loaded_files = 0;

　　//ロードに必要なオブジェクトの準備
　　load_obj = new MovieClipLoader();
　　event_obj = new Object();
　　load_obj.addListener( event_obj );

　　//ロード完了率表示用
　　progress_obj = new Object;
　　loaded_bytes = 0;
　　total_bytes = 0;
　　loaded_per = 0;

　　/*ファイルのオープンに成功した時の処理*/
　　event_obj.onLoadStart = function()
　　{
　　　//ファイルオープンに成功した数を更新
　　　open_success++;
　　};

　　/*読み込み完了時の処理*/
　　event_obj.onLoadInit = function()
　　{
　　　//読み込みが完了したファイル数を更新
　　　loaded_files++;
　　};

　　/*エラー発生時の処理*/
　　event_obj.onLoadError = function ( target_clip:MovieClip , error_code:String )
　　{
　　　//読み込みが完了したファイル数を更新
　　　loaded_files++;
　　};

　　/*ここにスクロールバーの処理関数を書く*/

　・フレーム２（画像の読み込み）

　　for( i = 0 ; i < image_max ; i++ )
　　{
　　　//ムービークリップを複製し、画像を読み込む
　　　sheet.target.duplicateMovieClip( "target" + i , i );
　　　load_obj.loadClip( filename_tbl[ i ] + ".jpg" , sheet[ "target" + i ] );
　　}

　・フレーム４（ファイルオープン完了を待ち、総バイト数の算出）

　　//全ファイルへのアクセスが完了した場合：
　　//総バイト数を算出して先に進む
　　if( open_success == image_max )
　　{
　　　//各ムービークリップの総バイト数を算出（ロード完了率表示に使用）
　　　for( i = 0 ; i < image_max ; i++ )
　　　{
　　　　progress_obj = load_obj.getProgress( sheet[ "target" + i ] );
　　　　total_bytes += progress_obj.bytesTotal;
　　　}
　　}
　　//未完了の場合は完了を待つ
　　else
　　{
　　　gotoAndPlay( 3 );
　　}

　・フレーム５（ロード完了率の算出）

　　//各ムービークリップのロード済みバイト数の合計を算出
　　for( i = 0 ; i < image_max ; i++ )
　　{
　　　progress_obj = load_obj.getProgress( sheet[ "target" + i ] );
　　　loaded_bytes += progress_obj.bytesLoaded;
　　}

　　//ロード完了率を算出
　　loaded_per = Math.floor( ( loaded_bytes / total_bytes ) * 100 );

　　//ロード済みバイト数をリセット
　　loaded_bytes = 0;

　・フレーム６（全読み込みの終了を待ち、その後の処理をする）

　　//全ての読み込みが完了した場合
　　if( loaded_files == image_max )
　　{
　　　for( i = 0 ; i < image_max ; i++ )
　　　{
　　　　/*ここに、画像の位置決め・_visibleの設定・onPressの定義などを書く*/
　　　}

　　　/*ここにスクロールバーの設定を書く*/
　　}
　　//読み込み中の場合は終了を待つ
　　else
　　{
　　　gotoAndPlay( 5 );
　　}

　・フレーム７（普段はこのフレームを表示）

　　stop();

今回の目玉、ロード完了率についてですが。
MovieClipLoader.getProgress の戻り値は、総バイト数（ bytesTotal ）とロード済みバイト数（ bytesLoaded ）の２つです。
複数の戻り値を受け取るには、汎用型である Object 型の変数を１つ用意します。戻り値を受け取った時に変数にパラメータが定義され、それぞれ利用できるようになります。
MovieClipLoader.getProgress で取得できる情報は、引数で指定したムービークリップの情報だけです。読み込み中のムービークリップ全ての情報を得るには、ループを利用してその数だけ getProgress を実行します。
loaded_per 変数にロード完了率が％で入りますので、これをダイナミックテキストで表示しておくといいでしょう。

今までご紹介してきたスクリプトや他の方からいただいた回答の中に、ヒントがたくさんあるはずです。
ご紹介してきたスクリプトにしても、これが完璧というわけではなく、ほんの一例に過ぎません。
情報を整理し、いろいろ工夫してみてください。
毎度毎度、長文になってすみませんでした。

お礼

ありがとうございます。

思いつく処理概要も記述したかったのですが、質問は800文字と言う制限のために省略してしまいました。

＞JPEG などのビットマップ系の画像を大量に扱うと、ムービーが重くなり、再生するマシンにも負担をかけます。
少しでも負担を軽減するためにと、複製したムービークリップや外部から読み込んだ画像・ムービーなど、最初はステージになく、後から動的に追加したオブジェクトに限り、不要になった時にそれを削除できる機能が用意されています。

これに関しては、今回あまり関係ありませんか？。
1回のProcessで読込むJPEGは10～20枚程度ですが、カテゴリー・サブカテゴリーを切り替えながらサムネイル表示のProcessを実行すると言う機能なので、対象となるJPEGの数は200枚くらいになります。
それでも、unloadに要する時間を軽減した方が得策でしょうか？。