外部JPGを読み込んだ場合のローディング表示方法

質問

こんにちわ。
外部からJPGを読み込み中にローディングを表示させるにはどの様にしたらいいのでしょうか？

いろいろ考え試行錯誤したのですが、良い結果が得られません。

MX2004でOSX環境です。

この様なローディングを作成したいのです。
http://fotologue.jp/

どなたか、よろしくお願いいたします。

回答No.2

DPE · ベストアンサー

JPEG 画像を読み込むには、

　1) loadMovie アクションを使う
　2) MovieClip クラスの loadMovie メソッドを使う
　3) MovieClipLoader クラスの loadClip メソッドを使う（ MX 2004 のみ）
　4) Loader コンポーネントを使う（ MX 2004 のみ）

といった方法があります。
1) 以外の方法ではどれでも、ロード完了率を算出することができます。

ムービーのロード画面を作る時は、_root の _framesloaded と _totalframes でフレーム数を把握する方法と、_root の getBytesLoaded と getBytesTotal でバイト数を把握する方法があります。
MovieClip の loadMovie メソッドを使う場合は、バイト数を把握する方法のムービークリップ版になります。
しかし、せっかく MX 2004 をお使いとのことですから、loadMovie よりも高機能な MovieClipLoader クラスを使ってみてはいかがでしょう。

MovieClip の loadMovie メソッドではロードが終わったかどうかしか分かりませんが、MovieClipLoader では他にも様々なイベントが用意されていて、更に細かくロードの状況を把握することができます。
エラーの発生も検出できるので、途中で回線が切断したなどの不測の理由でロードが失敗した時に、ブラウザでいうところの×印を表示したり、再度読み込み直したりするような芸当も可能です。

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

画像の数が多いのでしたら、画像の読み込みと完了率の表示も含めたムービークリップを１つ作り、それを必要なだけステージに配置しておくといいと思います。
読み込む画像のファイル名は、外部テキストファイルから読み込めるように設計してもいいですし、コンポーネントにして、編集画面でパラメータを編集するだけで簡単に変更できるようにしておくのもいいでしょう。
今回はコンポーネントにする作例をご紹介します。
コンポーネントにしても、外部テキストファイルからファイル名を読み込んできて、コンポーネントのパラメータに設定することもできます。

コンポーネントとは、編集可能なパラメータを持つムービークリップです。最初はムービークリップとして作ったものにパラメータを定義すると、コンポーネントになります。
ムービークリップができたら、「ライブラリ」でシンボルを選択し、control ＋クリックで出すメニューの中から「コンポーネント定義」を選び、「コンポーネント定義」パネルを開きます。
パネル上部の＋でパラメータを追加、－で削除します。
「パラメータ：」の各項目の意味は次の通りです。

　・名　前：「パラメータ」タブで表示される名前。
　・変　数：パラメータの本体。ActionScript では、インスタンス名.変数名 で参照します。
　・　値　：変数の初期値。
　・タイプ：パラメータのデータの型。

まず、ムービークリップシンボルを作ります。
中身はひとまず置いておくとして、先にパラメータを定義します。
今回は画像のファイル名をパラメータにします。ここでは仮に、変数名を filename 、タイプを String（文字列）とします。
名前は何か分かりやすいものを付けてください。日本語でも構いません。

画像の読み込みにはムービークリップが必要です。
予め画像の大きさが決まっている場合は、その大きさの四角形のムービークリップを作っておくと、ムービーを編集する際に画像が収まる位置やスペースが分かりやすくなります。
画像の大きさが不定の場合は、空のムービークリップを置いて、読み込みが終わってから位置を決めるといった方法になります。
ここではとりあえず、空のムービークリップシンボルを作り、先述のコンポーネントの中に配置します。位置はさしあたって関係ないので、適当な場所に置いてください。

コンポーネントのレイヤー構成は次のようになります。

　・アクション　：スクリプトを書きます。
　・表示クリップ：空のムービークリップを配置します。
　・完了率の表示：ロード完了率の表示を作ります。

スクリプトの流れは以下の通りです。

　・フレーム１：初期設定と画像の読み込み。
　・フレーム２：ロードの完了を待つフレーム。（スクリプトは何もなし）
　・フレーム３：完了時は先へ進み、未完了の場合は完了率を算出します。
　・フレーム４：タイムラインを止め、普段はここを表示します。

完了率はフレーム３まで、空のムービークリップ（インスタンス名は disp_clip とします）はフレーム４まで表示します。
なお、エラー時の対処は今回は考えませんが、フレーム５にエラー画面を作っておいて、エラー発生時はそこを表示するようにするといった方法になるかと思います。

各フレームに設定するスクリプトは、大体、次のようになります。
（↓各行頭に全角のスペースが入っています。コピーする際はご注意ください）

　・フレーム１

　　//ロード完了率表示用変数
　　prog = new Object();
　　loaded_per = 0;

　　//読み込み完了フラグ
　　//完了時true、それ以外はfalse
　　load_status = false;

　　//画像の読み込み
　　//ファイル名はコンポーネントパラメータ
　　load_obj = new MovieClipLoader();
　　load_obj.loadClip( filename , disp_clip );

　　//読み込み完了時に行う処理を定義
　　load_obj.onLoadInit = function( clip:MovieClip )
　　{
　　　//画像の位置を中央にして表示
　　　clip._x = -( clip._width / 2 );
　　　clip._y = -( clip._height / 2 );

　　　//終了を知らせる
　　　load_status = true;
　　};

　・フレーム３

　　//読み込みが終わっていない場合
　　if( ! load_status )
　　{
　　　//ロードの進捗状況を取得し、完了率を算出する
　　　prog = load_obj.getProgress( disp_clip );
　　　loaded_per = Math.floor( prog.bytesLoaded / prog.bytesTotal * 100 );

　　　//読み込み完了を待つ
　　　gotoAndPlay( 2 );
　　}
　　//読み込みが終了した場合
　　else
　　{
　　　//次のフレームでタイムラインを止める
　　　gotoAndStop( 4 );
　　}

MovieClipLoader ではイベント発生時に実行する関数を先に定義しておくことで、イベントが起きた時に自動的にその処理を行ってくれます。
また、今回は読み込みは１件だけですが、実は、MovieClipLoader は１つのオブジェクトで複数の読み込みを管理でき、どの読み込みでイベントが起きた時も同じように処理してくれます。
そのため、どのムービークリップでイベントが発生したのかを判別できるようになっています。
今回使うのは onLoadInit というイベントです。ダウンロードが終わり、初期化が終わってデータを利用できるようになった時に発生するイベントで、読み込みが済んだムービークリップの参照を引数として受け取ることができます。
上記の例ではその情報を利用して、コンポーネントの中央に画像を配置しています。

なお、フレーム１で load_obj.onLoadError = function ・・・として、エラー発生時の処理を定義することもできます。
onLoadError で呼ばれる関数には、第１引数にムービークリップの参照、第２引数にエラーの種類を表す文字列が渡されます。（詳しくはヘルプをご参照ください）
エラー発生時に予め用意したエラー画面にジャンプさせる、といった処理も加えておくといいかもしれません。

loadClip で読み込む時は、getProgress というメソッドで進捗状況が分かります。
戻り値が２つありますので、汎用型である Object 型の変数を作って受け取ります。
上記のスクリプトでは、変数 loaded_per に完了率が％で入ります。ダイナミックテキストで表示するか、プログレスバーを描画するなどの処理を加えてください。
完了率は、ダウンロードされたデータがハードディスクに書き込まれる度に発生する onLoadProgress というイベントを使って算出する方法もありますが、ローカル環境では正常に動かないのであまりオススメしません。

以上でコンポーネントは完成です。
普通のムービークリップと同様に、ステージにインスタンスを配置してください。
「プロパティ」パネルを見ますと、「プロパティ」と「パラメータ」というタブが表示されているかと思います。
コンポーネントのパラメータは「パラメータ」タブで編集します。画像のファイル名を入力して、動作を確認してみてください。
ちなみに、「ムービープレビュー」の「表示」→「ダウンロードのシミュレート」にチェックを入れると、サーバーにアップロードしなくてもダウンロード時の動作をチェックできます。

長くなってすみませんでした。
不明な点がありましたら、補足してください。

お礼

回答ありがとうございます。
早速試してみたところ稼働したしました！
毎回丁寧な説明ありがとうございます。
また、図々しいかとおもいますが、よろしくお願い致します。

回答No.1

noname#35109

とにかく，真実はよくわかりませんので，推測と別方法。

おっしゃっているURLですが，
ページ全体がFlash
http://fotologue.jp/main.swf
でできていて，ローディングされる様子が規則的過ぎます。
おっしゃっているURLに関しては，本当にローディングされている様子を％で表しているのではなく，ローディングしているようなアニメーションを作って表示させているという，凝った物です。
古い映画風に見せるというFlashや，あたかも古いパソコンで文字を打って変換させている様子をアニメーションにしているFlashとか，
そういった部類のもので，かなり早い回線があっても，同じように表示させるようにできていると思います。

> 外部からJPGを読み込み中にローディングを
> 表示させるにはどの様にしたらいいのでしょうか？

上のＵＲＬとは別として，１つの案です。
JPEGをロードしようとせず，JPEGを中に埋め込んだSWFにNowLoadingを入れて，そのSWFをロードしてはどうでしょうか。
URLの物とは違って，本当にローディングされる％が表示されるはずです。

お礼

回答ありがとうございます。
なるほど、ローディング風だったのですね。参考になりました。
どうもありがとうございました！