「Now Loading」の表示

質問

以前にNo.974758等の質問で、サムネイルJPEGが存在するだけ読み込んでマスクレイヤー配下に横展開させてScrollBarを付けて表示すると言う処理を完成させましたが、如何せんサムネイルが表示されScrollBarが現れるまで結構の時間を要してしまいます。10k程度のJPEGを20枚程度読み込むと5～6秒ほど時間を要します。

この間に、よくある「Now　Loading・・・・」等と言う表現をしたいのですが、そんな芸当が出来るのでしょうか？。

どうぞ宜しくお願い致します。

回答No.3

DPE · ベストアンサー

http://okweb.jp/kotaeru.php3?q=989128
　http://okweb.jp/kotaeru.php3?q=992878

と同じムービークリップの構成を前提に話を進めますが。

まず、読み込み完了率についてですが。
LoadVars にも MovieClip にも、読み込む総容量や読み込まれた容量を把握する getBytesTotal や getBytesLoaded というメソッドがあり、これを元に完了率は算出できます。
しかし、今回は LoadVars で画像を１つずつ読み込み、それが成功したらムービークリップにまた読み込み直す、というロジックでしたので、全体のうちのどのくらい読み込みが終わったかの把握が難しいです。
LoadVars で読むデータの容量は LoadVars の、ムービークリップで読むデータの容量は MovieClip の getBytes*** でないと把握できないというカベもあるのですが、何より、読み込む画像の総数がいつまでもはっきりしないため、全体の容量の把握ができません。
また、全体の容量が判明する頃には loadMovie の読み込みがかなり進んでいるでしょうから、それから完了率を表示しても今さらという感じで、あまり意味もないでしょう。
そんなわけで、読み込み完了率の表示は無理だと思います。

とりあえず何かしらのアニメや表示をしたいだけでしたら、簡単なアニメのムービークリップを作り、ロードが完了するまで、これを Thumb_nail シンボル内に配置してはいかがでしょう。
フラグが -1 になった時に読み込みの命令を出すのは終了しますが、読み込み作業そのものはその瞬間に終わることはまずなく、その後もしばらく続くと思います。
Now Loading の表示は、完全に読み込みが終わるまで表示されていないとおかしいですよね。
ということは、loadMovie での読み込みが終わるまで待つ処理が必要になります。

フラグが -1 になったら、ここでタイムラインを止めずに、もう少しフレームを追加して先に進みます。
MivieClip オブジェクトには、loadVariables や loadMovie の実行が終了した時に発生する data というイベントがあります。これで、１つ１つの画像の読み込みの終了は検出できます。
では、”全部のムービークリップで読み込みが終わったかどうか”を知るには、どうしたらいいでしょうか？
簡単なのは、ファイルの総数と読み込みが済んだファイルの数を照合することです。
ファイルがいくつあったかは、変数に保存されているはずです。もう１つ変数を用意し、data イベントが発生するごとにこの変数をカウントアップし、この数とファイルの数が一致していれば、全ての画像を読み終えたと見なすことができます。

MovieClip.onPress などと同じで、***.onData = function () ・・・と書く書き方はあります。これが使えればフレームにも data イベントを利用するスクリプトが書けます。
ところが、実は、duplicateMovieClip や loadMovie などで動的に生成されたムービークリップで使おうとしても、正常に機能しません。（そういう仕様になっています）
しかし、duplivateMovieClip のコピー元であるオリジナルのムービークリップに onClipEvent(data) を設定しておくと、複製されたムービークリップにも、同じ内容の onClipEvent(data) が設定されます。

Thumb_nail の sheet に、画像を読み込むムービークリップのコピー元として、target というムービークリップが配置されていたかと思います。
sheet のシンボルの編集画面を開き、target のインスタンスに

　onClipEvent( data )
　{
　　//読み込みの済んだファイル数を更新
　　_parent._parent.loaded_files++;
　}

というスクリプトを設定してください。
target から見ると、Thumb_nail は親（ sheet ）の更に親ということになります。ターゲットパスは少々鈍くさくなりますが、そこは仕方ないですね。

Thumb_nail のフレーム１で、loaded_files = 0; という変数を初期設定に追加します。
読み込みの進行状況を把握するフラグが -1 になったら、ここで stop を入れずに先に進みます。
次のフレームはスクリプトを設定せず、読み込みが終わるまで待つためのフレームにします。
その次のフレームで、loaded_files の値を監視します。画像がクリックされた時の処理やスクロールバーの設定も、ここに移してくると分かりやすいかと思います。

　//全ファイルの読み込みが完了した場合
　if( loaded_files == ( var_ctr - 1 ) )
　{
　　var i;

　　//画像がクリックされた時の処理
　　for( i = 1 ; i <= ( var_ctr - 1 ) ; i++ )
　　{
　　　//サムネイルに管理番号を設定
　　　sheet[ "b" + i ][ "image_no" ] = i;
　　　sheet[ "b" + i ].onPress = function ()
　　　{
　　　　//何番目のサムネイルがクリックされたかを知らせる
　　　　_root.item_no = this.image_no;
　　　　_root.gotoAndStop( 10 );
　　　};
　　}

　　//スクロールバーの設定
　　sc_bar.setScrollProperties( 50 , 0 , ( var_ctr - 1 ) * 90 - 360 );
　}
　//読み込みが終わらないうちは完了を待つ
　else
　{
　　gotoAndPlay( 5 );
　}

Thumb_nail のスクリプトの流れをまとめますと。

　フレーム１：初期設定
　フレーム２： LoadVars でファイルの確認をする
　フレーム３：待機（ LoadVars の読み込み終了待ち）
　フレーム４：ファイルがあればムービークリップを複製して読み込み、次のファイルを探す。なければ先に進む
　フレーム５：待機（全 loadMovie の読み込み終了待ち）
　フレーム６：読み込みが終わるまで待ち、終了時に画像やスクロールバーなどの設定をして先に進む
　フレーム７：タイムラインを止める

こうして見ますと、Now Loading の表示は、フレーム１～６まで表示されていればいいことになります。
簡単なアニメのムービークリップを作り、Thumb_nail にレイヤーを１つ用意して、フレーム１に Now Loading のムービークリップを配置します。フレーム６に「フレームを挿入」でフレームを入れて、フレーム１と同じ内容を６まで繰り返します。
ムービークリップは自分自身のタイムラインを持っていて、親のタイムラインとは独立して動きます。親である Thumb_nail の再生フレームが変わっても、Now Loading のムービークリップは自分自身のタイムラインに従って動きます。

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

http://okweb.jp/kotaeru.php3?q=989128 の＃２でちょっとご紹介しました MovieClipLoader クラスでは、読み込みが終わった時だけではなく、読み込みが始まった時や失敗した時・読み込んだものの初期化が終わって利用できるようになった時など、細かいイベントが利用できます。
例えば、今回 LoadVars で読み込みが完了したら次を読む・・・としていた部分を、読み込みが始まった＝ファイルがあるので次を探しに行く（この間、先の読み込みは引き続き続行）というように変更できます。１つずつ読み込み完了を待って存在を確認するまでもなく次のファイルを探しに行けますし、loadMovie で読み直す必要もありませんから、読み込みにかかる時間を短縮できます。
また、早い段階でファイルの総数が判明しますので、全体の容量の把握が簡単です。総容量が分かれば読み込み完了率も正確に計算できますから、Now Loading　○％という表示も可能です。

イベントを受け取る専用のオブジェクト（リスナーオブジェクト）を登録するという発想がちょっと難しいところですが、作品のクオリティは格段に高くなります。
読み込み関連のスクリプトが変わるだけで、基本的な考え方やスクロールバー関連の処理はそのまま流用できます。
お急ぎでなければ、こちらを研究して移行してはいかがでしょうか。

お礼

すみません。

「フレーム６に「フレームを挿入」でフレームを入れて、フレーム１と同じ内容を６まで繰り返します。」

この文章の意味が把握出来ていません。
新しいレイヤーの1フレームに「Now　Loading」と言うテキストを配したムービーを作成・配置しました。ムービー内部のタイムラインは使っていません。
そのレイヤーには6フレームまで「フレームの挿入」を行なっています。本当は、マスクの範囲のサムネイルが表示されると同時くらいに「Now・・・」の表示を終わらせたいのですが、マスクの範囲のサムネイルが表示された以降も、全ての読込みが終了するまで「Now・・・」は表示されたままです。ちょっと不恰好ですが、厳密に切り替えるのは無理なのかなぁと思っています。DPEさんの言われている事がまだ100%理解出来ていません。

補足

ありがとうございます。

教えて頂いた以降、結構処理を変更しました。
サムネイルの読込みとクリックされた時に表示する拡大画像の読込みがあると言う事、元々商品コードがファイル名になっていた事などから、コントロールファイルを用意しました。サムネイル表示する順番にコードを入れています。
cont=111111,333333,555555,444444,222222,end

こんなテキストを用意し配列に読み込んで、教えて頂いた方法でサムネイル表示させていますので、このテキストを読み込んだ時点でサムネイルを何枚読み込む必要があるのかが判断できるので、全体の枚数と現時点での完了パーセントが把握出来ると思います。

一度試行錯誤を繰り返しながらトライしてみます。
その後で再度ご報告させて頂きます。

どうぞ宜しく御願いします。

回答No.4

DPE

すみません、書き方が良くありませんでした。
要するに、Thumb_nail のタイムラインの、フレーム１～６まで Now Loading の表示用ムービークリップが存在していればいい、というだけの話なんですが。
つまり、Now Loading 表示用のレイヤーは、フレーム１にキーフレームの●、フレーム６に□のマークがあって、フレーム１～６までがグレーで塗りつぶされている状態になります。
この表示は、フレーム１と同じ内容をフレーム６まで続ける、という意味になります。

見える部分に既に画像が表示されているのにもかかわらず NowLoading の表示があるのは、確かに変に思われてしまいますよね。
とりあえず画像を非表示にしておき、全部の画像が読み終えたら全ての画像を表示する、という方法で、簡単に解決できます。
duplicateMovieClip でコピーする時の元になる、オリジナルのムービークリップ（ sheet 内の target ）に、

　//最初は非表示にする
　onClipEvent(load)
　{
　　this._visible = false;
　}

このアクションを設定してください。
load イベントは、ムービークリップがステージに登場した、その時１度だけ発生するイベントです。最初の１度だけ実行すればいい処理に、よく利用されます。
duplicateMovieClip でコピーされたムービークリップにも、同じように onClipEvent(load) が設定されますので、読み込みが完了しても画像は表示されなくなります。
全ての画像の読み込み完了を待って、for ループで onPress を設定する箇所があります。このループの中で、_visible 属性を true にするといいでしょう。

処理のイメージとしては、準備中は画像を表示せず Now Loading の表示だけにして、準備が整ってから画像を表示する、といったところです。
ちなみに、スクロールバーはコンポーネントですが、コンポーネントの正体はパラメータを持つ”ムービークリップ”です。
ムービークリップである以上、ムービークリップで使えるスクリプトは全て利用可能です。
スクロールバー（ sc_bar ）にも onClipEvent(load) を設定して非表示にし、全ての画像の読み込みが完了した時に sc_bar の _visible プロパティを true にしてみてください。画像の読み込み中はスクロールバーのトラックも非表示になり、読み込み終了時にトラックとスライダが表示されるようになります。

お礼

ありがとうございます。
false／trueを使って、不細工だった「Now Loading」が劇的に良くなりました。

回答No.2

hime_mama

プリロードの設定について、詳しく書かれているサイトがあるのでそちらを参照してください。
http://www.condo.fromc.jp/flash/memo/index4.html

参考URL：

http://www.condo.fromc.jp/flash/memo/index4.html

回答No.1

hime_mama

「Now Loading」だけのファイルを作ります。
そのファイルを実行しているときに、裏でコンテンツファイルを読み込むよう設定し、読み込みが完了するまでは「Now…」のほうをリロードするようにします。
読み込みが完了したら、コンテンツファイルに飛ぶようにすればOKです。

補足

リロードのやり方が分からないのですが、その前に現在表示されている画面の上にポップアップのように「Now・・・」の画面を表示出来るのでしょうか？。
現在の画面の構成は、HTMLで2つのFLASHファイルを利用しています。一つは上部に100Pixcel程度のヘッダー部です。
その下に縦480Pixcel、横750PixcelのFLASHファイルがあります。そのファイル（今回のFLASHの中身）の構成は、上部にサムネイル画像群の説明文があり、その下にサムネイルの窓、その下にサムネイルをクリックされた時に拡大表示するためのエリアとテキストエリアが設けてあります。

今回「Now・・・」と表示したいのは、サムネイル表示窓辺りです。