JPGファイルのローディングの際に．．．

Question

宜しくお願いします。

透明なムービークリップを画面に配置し、同じく画面内に配置された幾つかのボタンを押す毎にそれぞれに指定してあるJPGファイルがそのムービークリップ内にロードされる、と言うものを作っています。
--------------------------------------------------------
（ムービークリップで作った）ボタンにon (press)で『外部ムービークリップをロード』をビヘイビアから選択し、特定のJPGファイルを指定しています。
--------------------------------------------------------
ここからが質問です。
まず、JPGファイルをロードするのに少し時間が掛かりますので、次のボタンをクリックして指定されたJPGファイルがMCに現れるまで、今MC上にあるJPGファイルが、次のJPGファイルが完全にロードされMC上に出て来たら消えるようにしたいのです。

現在の状況は、次のボタンをクリックすると同時に今見えているJPGファイルが消えてしまい、次のボタンに指定してあるJPGファイルがMC上に現れるまでブランクになってしまうのでそれを避けたいのです。

まず、そんなに重くないJPGファイルで何故、数秒掛かってしまうのかと言う疑問もあるのですが。
完全に次のJPGファイルがロードされるまで、今見えているJPGファイルをMC上に置いておく、という設定はどうしたら良いでしょうか。

回答お願いします。

DPE · Accepted Answer

例えばムービークリップに何か絵を描いておいて画像を読み込むと、読み込みの間、この絵が消えてムービークリップがある場所は空白になってしまいます。
つまり、ムービークリップに画像を読み込むと、読み込みの命令を出した次の瞬間に前の絵は破棄されて消えるということです。


前の画像を表示したまま次の画像を読み込むには、ムービークリップが最低でも２つは必要です。

ムービークリップを２つ、重ねて用意しておきます。
今、画像を表示しているムービークリップの相方に次の画像を読み込み、読み込みが済んだら前の画像（を表示しているムービークリップ）を消して、今回絵を読み込んだ方のムービークリップを表示します。
次の読み込みも同様に、今表示しているムービークリップの相方に読み込み、先に表示した方は非表示にします。

このようなスクリプトはビヘイビアでは作りにくいので、１から自分でスクリプトを書きます。
ビヘイビアで作られたスクリプトをとりあえずコメントにするか、別の fla ファイルを作って試してみてください。

------------------------------------------------------------------

ステージに、画像を読み込むためのムービークリップを２つ、上下に重ね合わせた状態で配置してください。
レイヤーを分けて配置しておくと扱いやすくなります。

この２つのムービークリップにインスタンス名を付けます。
名前は、共通する名前＋ 0 または 1 で付けます。
例えば共通の名前を” clip ”とするなら、clip0 と clip1 というように付けます。上・下のどちらを 0 にするかは動作に関係ありませんので、お好みで決めてください。
0 と 1 を使うところに、カラクリのタネがあります　^^;


読み込み用のボタンも、ステージに配置してインスタンス名を付けてください。
ここでは仮に、load_btn1 ～ 2 と付けたとします。


以上で準備は完了です。
次はスクリプトを書きます。

*******************************

スクリプトは全て、メインのタイムラインのフレームに書きます。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）



　/////////////////////////////////////////////////////////
　//初期設定
　/////////////////////////////////////////////////////////

　//現在、画像を読み込める方のムービークリップの番号を管理
　//値は0または1
　current_clip = 0;

　//画像を表示するムービークリップに共通する名前を保持
　clip_name = "clip";

　//画像表示用のムービークリップを非表示にしておく
　_root[ clip_name + "0" ]._visible = false;
　_root[ clip_name + "1" ]._visible = false; 


　//読み込み用のオブジェクトを作成
　load_obj = new MovieClipLoader();

　//読み込み終了時の処理
　load_obj.onLoadInit = function()
　{
　　//今回読み込んだムービークリップを表示し、
　　//前回画像を表示していたムービークリップを非表示にする
　　_root[ clip_name + current_clip ]._visible = true;
　　_root[ clip_name + ( current_clip ^ 1 ) ]._visible = false;

　　//次の読み込みのために
　　//ムービークリップの番号を反転しておく
　　current_clip ^= 1;
　};


　/////////////////////////////////////////////////////////
　//ボタンがクリックされた時、画像を読み込む
　/////////////////////////////////////////////////////////

　load_btn1.onRelease = function()
　{
　　//読み込める方のムービークリップに画像を読み込む
　　load_obj.loadClip( "○○○.jpg" , _root[ clip_name + current_clip ] );
　};

　load_btn2.onRelease = function()
　{
　　//読み込める方のムービークリップに画像を読み込む
　　load_obj.loadClip( "△△△.jpg" , _root[ clip_name + current_clip ] );
　};


　/*以下、ボタンの数だけ同様に定義する*/



ムービークリップの共通の名前を” clip ”ではない名前にした場合は、

　//画像を表示するムービークリップに共通する名前を保持
　clip_name = "clip";

↑この部分を書き換えていただくと変更できます。

*******************************

ビヘイビアで記述されるスクリプトでは loadMovie というアクションで画像が読み込まれますが、Flash Player 7（作成ツールは Flash MX 2004 ）からは、より高機能な MovieClipLoader というクラスを利用できるようになりました。

今回の件は”読み込みが済んだ時に”との判断が必要ですから、読み込みの状況を把握しやすい MovieClipLoader を利用しています。
MovieClipLoader は Flash Player 6 以前のバージョンでパブリッシュする場合は使えませんので、ご注意ください。

MovieClipLoader は、読み込みのいろいろな状況に応じてイベントを発行して知らせてくれます。
イベントが起きた時に行う処理を予め定義しておくと、何件の読み込みを実行しても同様の処理をしてくれるようになります。
今回は”読み込みが済んだらムービークリップを切り替える”ので、読み込みが完了した時に発行される” onLoadInit ”イベントを利用します。

*******************************

current_clip ^ 1 や current_clip ^= 1 という演算が、ちょっと見慣れないものかも知れません。
「 ^ 」はビット演算を行う演算子の１つで、排他的論理和（ XOR ）と呼ばれるものです。

current_clip ^ 1 は、変数 current_clip に 0 が入っている時は 1 、1 が入っている時は逆に 0 になります。そういう”おまじない”だと思ってくださっても構いません。
current_clip ^= 1 は a += 2 の「 += 」演算子などと同じで、current_clip ^ 1 の結果を current_clip の新しい値にする、という意味です。


今回の例で言いますと、最初はムービークリップ” clip0 ”に画像を読み込みます。
この clip0 に続けて次の画像を読み込むと先に読み込んだ画像が消えてしまいますから、相方である clip1 に次の画像を読み込むようにします。
clip1 に画像が読み込まれたら、先に表示していた clip0 の方は非表示にしておきます。

この後、再度違う画像を読み込むとします。
現在表示されているのは clip1 ですから、次の画像は非表示になっている clip0 に読み込みます。
つまり、clip0 を表示している時は clip1 に、clip1 を表示している時は clip0 に読み込む・・・という動作を交互に繰り返すわけです。


ムービークリップの名前に 0 と 1 を使って付けておくと、先の XOR の特徴を利用して、if 文でいちいち判定することなく２つのムービークリップを切り替えることができます。

現在表示している方のムービークリップの番号が 0 と 1 のどちらであるかだけ分かれば、この番号と 1 で XOR 演算をしてみることで相方の番号も判明します。
上記のスクリプトでは、現在画像を読み込める方の番号を” current_clip ”という変数で管理しています。
この値をもとにして、次に画像を読み込むムービークリップやその相方を参照します。

１回の読み込みが終わり、clip0 と clip1 が入れ替わるたびに current_clip の値を反転しておきます。
つまり、１回の読み込みが終わるごとに current_clip には 0 と 1 が交互に入ります。
従って、同じ _root[ clip_name + current_clip ] という記述でも、ある時は clip0 、次は clip1 と、２つのムービークリップを交互に参照できるというわけです。


ビット演算にはいろいろな種類があります。
ActionScript の解説サイトではあまり見かけないかもしれませんが、他のプログラミングの講座ではよく使われるものです。
”ビット”演算というだけあって２進数と関係があり、少々とっつきにくいところが難点ですけれど、いろいろと便利な演算です。機会がありましたら研究してみてください。

*******************************

なお、読み込み中に他のボタンがクリックされると、同じムービークリップに続けて画像が読み込まれるために前の画像が消えてしまいます。

対策はいくつか考えられますが、確実なのは読み込みの間はそれぞれのボタンの enabled プロパティを false に書き換え、読み込みが完了した時点で true に戻して、連続してクリックできないようにする方法だと思います。
紙面の都合上、この処理は割愛させていただきました。
余裕がありましたら改良してみてください。

DPE · Answer

＃１です。


まず、スクリプトを書く場所ですが。
レイヤーはどのレイヤーでも構いません。
絵のあるレイヤーでも動作に違いはありませんが、一般的にはスクリプト専用のレイヤーを作り、空のキーフレームを作って書きます。
スクリプトを書くためのレイヤーを作ってあるのでしたら、スクリプトはそこに書いてください。

＃１の作例では、画像を読み込むボタンのスクリプトも、メインのタイムライン（ _root ）のフレームアクションとしてまとめて書いています。
ムービークリップのタイムラインやインスタンスに書くスクリプトはありません。


スクリプトを書くレイヤーはどれでもいいのですが、”どのフレームに”書くかは大切な問題です。
Flash では、現在ステージにあるムービークリップやボタンのみ、スクリプトで制御できます。
スクリプトを書いたフレームよりも後ろのフレームで登場する予定のインスタンスに対し、「そのうち○○というインスタンスが出てくるから、それをこの通りに処理してね」と前もって約束しておくことはできません。
同様の理由から、既にステージを去ってしまったインスタンスが持っていたものも利用できません。

つまり、btn1 ～ 5 をクリックした時に clip0 か clip1 に画像を読み込むスクリプトは、ステージにこれらのインスタンスが存在しているフレームに書く必要があります。
例えば、ムービークリップとボタンがフレーム１で登場しフレーム２では消えてしまうのなら、スクリプトはフレーム１に書きます。
インスタンスが登場するよりも前のフレームや、インスタンスがステージから消えたフレームにスクリプトを書いても意味がありません。

-------------------------------------------------------------------

ステージに画像を読み込むためのムービークリップ clip0 と clip1 、画像を読み込むボタン（ムービークリップシンボルのインスタンス）の btn1 ～ 5 を配置し、メインのタイムラインのフレーム１に＃１の補足欄にあるスクリプトをコピーして試してみたところ、問題なく動きました。


動かない原因として最も怪しいのは、やはりインスタンス名です。
大文字・小文字、全角・半角の誤りがありませんでしょうか。
＃１の作例では、インスタンス名は全て、半角の小文字と半角の数字だけで付けています。

インスタンス名に余計なスペースが混入していても、スクリプトが動かない原因になります。
回答文では clip0 と clip1 の前後に半角のスペースが入っていますが、実際のインスタンス名にはスペースを入れないでください。

clip0 と clip1 の元になっているシンボルに何か適当な絵（画像と同じ大きさの四角形など）を描いてみてください。
インスタンス名に誤りがなければ、ムービーを再生した時点でこの絵は表示されなくなるはずです。
これが表示されるのなら、画像を読み込むムービークリップのインスタンス名に問題があると思われます。
clip0 と clip1 は対になっているようなものです。どちらか一方にでも問題があると、スクリプトは正常に動きません。

コピーを利用してインスタンスを配置した時によくある失敗が、同じインスタンス名を持つムービークリップが複数存在してしまうというものです。
インスタンス名を付けたインスタンスをコピーすると、インスタンス名も一緒にコピーされます。
２つのムービークリップをよく見てみてください。両方とも同じ名前になっていませんでしょうか？
レイヤー名の横に●が２つあります。左の●をクリックすると、レイヤーの表示/非表示を切り替えることができます。×印になっている時はこのレイヤーにある絵は表示されません。再度クリックすると表示されるようになります。
（レイヤーを非表示にしたままパブリッシュしても、ムービーでは表示されます）
ムービークリップを片方ずつ表示して、インスタンス名を確認してみてください。

******************************

画像を読み込むムービークリップにも問題がないとすると、次に怪しいのはボタンの方です。
ボタンにカーソルを重ねた時に、手のカーソルに変化しますでしょうか？
何も変化がなければ、ボタンがそもそも反応していません。


例えば、ボタンが他のムービークリップのタイムラインに配置されている場合は、

　親のムービークリップのインスタンス名.btn1.onRelease = function()

というようにしないと、ボタンをクリックした時の動作が正しく定義されません。

******************************

最後に、画像のパスを確認してみてください。
ブラウザで再生する swf ファイルから外部のファイルを読み込む時は、読み込むファイルは” swf ファイルを組み込んでいる HTML ファイルから”見たパスで指定します。

絶対パスで指定して表示されるようなら、ファイルの URL の間違いということになります。
なお、フォルダの構成によっては、「ムービープレビュー」では URL オープンエラーになる場合があります。
（「ムービープレビュー」では swf ファイルのある場所を基準にしてファイルを探しに行くためです）
プレビューでエラーになっても HTML ファイルにすると開けることもありますので、実際のフォルダに配置し、ブラウザで確認してみてください。


思いつく原因としてはこのくらいなのですが。

冒頭にも書きましたように、スクリプトが実行される時点でステージに存在していないインスタンスは制御できません。
ご紹介しました作例は、フレーム１にムービークリップとボタンを配置するという、１フレームだけのムービーです。
もし Now Loading 画面や他の内容などを前のフレームに作っている場合は、ムービーの本編が始まるフレーム（画像を読み込むムービークリップとボタンが登場するフレーム）にスクリプトを書いてください。

-------------------------------------------------------------------

ちなみに、「ムービープレビュー」でダウンロードのシミュレーションを行うか、実際にサーバーにアップロードし回線を介して再生する場合は、どんなに小さい画像でも多少は時間がかかります。
瞬時に表示されないからといって何度もボタンをクリックすると、その都度同じムービークリップに画像が読み込まれるため、しばらく空白になってしまう現象が起こります。

＃１の最後にも少し書きましたが、読み込みの間は全てのボタンの enabled プロパティを false にし、読み込みが済んだ時点で true に戻す方法があります。
ボタンの名前を共通の名前＋通し番号で付けていれば、for ループを使ってまとめて enabled プロパティを書き換えることもできます。


例えば、ボタンをクリックした時の処理に

（↓各行頭に全角のスペースが入っています。コピーする際はご注意ください）


　btn1.onRelease = function()
　{
　　//読み込める方のムービークリップに画像を読み込む
　　load_obj.loadClip( "○○○.jpg" , _root[ clip_name + current_clip ] );

　　//全ボタンをクリック不可にする
　　for( i = 1 ; i <= 5; i++ )
　　{
　　　_root[ "btn" + i ].enabled = false;
　　}
　};


というような処理を追加してみてください。
ボタンを１度クリックすると、次はどのボタンもクリックできなくなります。
全ボタンをクリック不可にする処理はどれにも共通しているので、関数として作っておくと便利です。

これだけではいつまでもクリックできないままなので、読み込みが済んだ時に全ボタンの enabled プロパティを true に戻します。
load_obj.onLoadInit = function() の中に

　//全ボタンをクリック可能にする
　for( i = 1 ; i <= 5 ; i++ )
　{
　　_root[ "btn" + i ].enabled = true;
　}

を追加すると、読み込み終了後に再度ボタンをクリックできるようになります。


画像が正常に読み込めるようになりましたら、よろしければ追加してみてください。

DPE · Answer

＃１、２です。


背景が 15 フレームでフェードインしてきて、その終了フレームであるフレーム 15 で画像を読み込むムービークリップとボタンが登場する・・・というように、画像を読み込むムービークリップとアニメに使っているインスタンスが全くの別物であれば、フレーム 15 に stop(); があっても問題はないはずです。
Flash のモーショントゥイーンは１つのレイヤーにつき１つのインスタンスでしか作れません。読み込みに関するムービークリップやボタンはトゥイーンを利用するものとはレイヤーを分けて配置してください。


そうではなくて、画像を読み込むムービークリップの clip0 と clip1 が 15 フレームのトゥイーンになっている、ということでしょうか？
例えば、ある画像がフェードインしてきて、その画像のあった場所にボタンで指定された画像が読み込まれる・・・というような作品です。

このような作品ですと、単純なフェードインや位置が変化するトゥイーンならあまり問題にならないのですが、フェードアウト・明度や色が変化するトゥイーンの場合は注意が必要です。


ムービークリップを使ったトゥイーンでは、トゥイーン終了時の一部の属性（アルファ・明度・色の設定など）がそのまま残ります。
例えば、フレーム１から 15 まで clip0 のアルファを 100 ％から 30 ％に変化させるというトゥイーンを作り、フレーム 15 に stop(); を書いてタイムラインを止めておくとします。
clip0 はトゥイーンの情報に従い、アルファが 30 ％になった状態で表示され続けます。
この状態で clip0 に画像を読み込むと、アルファの情報が受け継がれて画像も 30 ％の透明度で表示されることになります。

「明度」「着色」「詳細」で色合いを変化させるトゥイーンを作った場合も同様に、トゥイーンの終了フレームで設定された情報が画像を読み込んだ後でも適用されます。
特に「着色」はムービークリップを１色で塗りつぶす効果ですので、画像を読み込んでも「着色」で指定した色で塗りつぶされてしまいます。


トゥイーンの効果が残っていることが原因だとするなら、一番簡単な対策は、トゥイーンで動くインスタンスと画像を読み込む clip0 と clip1 を別々にすることです。

例えば、アニメにする画像をムービークリップシンボルにして、これをフレーム１から 15 までトゥイーンを使ってアニメにします。
アニメに使うインスタンスは、フレーム 15 で名前を付けておいてください。ここでは仮に” anime_clip ”とします。

フレーム 15 には、トゥイーンを作ったレイヤーのほかにレイヤーを２つ用意して画像を読み込むための clip0 と clip1 をそれぞれ配置し、画像を読み込むスクリプトを書きます。

アニメのムービークリップは、要するに画像が読み込まれた後に非表示にしておけばいいのです。
画像が読み込まれた時に実行される、load_obj.onLoadInit = function() の中に


　//アニメのインスタンスを非表示にする
　anime_clip._visible = false;


というスクリプトを追加して、動作を確認してみてください。
最初は anime_clip がトゥイーンで動き、フレーム 15 に stop(); を設定していればその状態でムービーが止まります。
フレーム 15 で clip0 と clip1 、および btn1 ～ 5 を登場させると、ボタンをクリックした時に画像の読み込みが始まります。
画像の読み込みが済んだ時は、anime_clip が消えて、clip0 か clip1 に読み込まれた画像が表示されます。


stop(); がない時は画像が読み込まれるのに、あると上手くいかないという現象が起こる原因は、トゥイーン終了後も変形情報が残る効果を使った場合くらいしか思いつかないのですが。
違う状況でしたら、画像の読み込みと関係のありそうな部分だけで構いませんのでまた補足してください。

何にしても、画像を読み込むムービークリップは、最初はアニメでそこに画像を読み込むような複雑な使い方をせずに、シンプルな状態でなるべく画像を読み込むことだけに使う方が扱いやすいと思いますよ。

JPGファイルのローディングの際に．．．

例えばムービークリップに何か絵を描いておいて画像を読み込むと、読み込みの間、この絵が消えてムービークリップがある場所は空白になってしまいます。

この回答への補足

＃１です。

この回答への補足

＃１、２です。

この回答への補足

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

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

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

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