| 5分でわかるローディングのつくりかた | カテゴリ： 3．プレイベント『ローディング☆ラブ』 |
ローディングを作るにあたって最低限必要な情報と処理は
・読み込みが終わったかどうかを比較する。
・読み込みが終わった場合と終わってない場合の動きを決める
・読み込みが終わってない場合はその比較をひたすら繰りかえす
の３点です。上から順に説明していきましょう。
まず、比較対照として必要な情報は
・読み込み済みの容量
・ファイルの総容量
の２点ですね。そしてその２点はそれぞれ
getBytesLoaded(); //（読み込み済みの容量）
getBytesTotal(); //（ファイルの総容量）
という命令で取得することができます。
命令を日本語に訳すと、わりとそのままの意味ですね。
とりあえず使いやすいように変数に放り込んでおきましょう。
命令の内容を変数に入れるには、『 = 』を使います。
loaded = getBytesLoaded();//読み込み済みの容量を変数『loaded』に入れる total = getBytesTotal(); //ファイルの総容量を変数『total』に入れる
さて、次はそのふたつの命令を比較するための命令として、
if文を使ってみましょう。if文の基本書式は以下の通りです。
if(比較対照１ 比較演算子 比較対照２){
//比較結果が正しい場合の処理
}else{
//比較結果が正しくない場合の処理
}
ローディング処理の場合、比較対照はファイルの総容量と読み込み済みの容量でしたね。
なので、先ほどファイルの総容量と読み込み済みの容量を取得した変数を
if文の比較対照に置きます。
loaded = getBytesLoaded();//読み込み済みの容量を変数『loaded』に入れる
total = getBytesTotal(); //ファイルの総容量を変数『total』に入れる
if(loaded 比較演算子 total){
//比較結果が正しい場合の処理
}else{
//比較結果が正しくない場合の処理
}
次は『比較演算子』です。比較演算子には主に以下の種類があります。
A == B（AとBは同じ） A != B（AとBは同じじゃない） A < B（AよりBの方が大きい） A > B（AよりBの方が小さい） A >= B（AとBは同じか、Aの方が大きい） A <= B（AとBは同じか、Bの方が大きい）
今回の場合、読み込みが完了しているかどうかを判断する･･･つまり、
『ファイルの総容量と読み込み済みの容量が同じかどうか』を比較すればいいので、
比較演算子は『 == 』か『 != 』を使えばいいことがわかりますね。
今回は『 == 』を使ってみましょう
loaded = getBytesLoaded();//読み込み済みの容量を変数『loaded』に入れる
total = getBytesTotal(); //ファイルの総容量を変数『total』に入れる
if(total == loaded){//ファイルの総容量と読み込み済みの容量が同じかどうかを比較する
//比較結果が正しい場合の処理
}else{
//比較結果が正しくない場合の処理
}
『比較結果が正しい場合の処理』に関しては
本プレイベントの遊びどころの一部かと思いますので割愛します。
とりあえずデバッグの最中に読み込みが終了したことが明示的にわかるよう、
trace文を記載しておきましょう。
if(total == loaded){//ファイルの総容量と読み込み済みの容量が同じかどうかを比較する
//比較結果が正しい場合の処理
trace("読み込みが完了しました");
}else{
//比較結果が正しくない場合の処理
}
trace文とはデバッグの際に利用する特別な命令で、
カッコ内で指定した文字列や変数の中身をデバッグウィンドウに出力することができます。
例えば変数loadedの中身を確認したい場合は
trace(loaded);
と記述します。
ローディング処理の開発中にこまめに変数の中身や処理の移行状態を確認したい場合は
このtrace文をどんどん使っていきましょう。
少し話が横道にそれましたね。
さて、最後の『読み込みが終わってない場合はその比較をひたすら繰りかえす』の
実現方法を考えてみましょう。
まずは比較を抜きにして一定の命令を繰り返す方法ですが、以下の２通りがあると思います。
・前述の『比較結果が正しくない場合の処理』でprevFrame（１フレーム前に移動する命令）
を記載して繰り返しを実現する
・onEnterFrame（毎フレーム毎に処理を実行させる命令）を利用する
今回は初心者向けに簡単な前者の方法を利用してみましょう。
先ほどのコードの「比較結果が正しくない場合の処理」の部分に以下のコードを追加します。
loaded = getBytesLoaded();//読み込み済みの容量を変数『loaded』に入れる
total = getBytesTotal(); //ファイルの総容量を変数『total』に入れる
if(total == loaded){//ファイルの総容量と読み込み済みの容量が同じかどうかを比較する
//比較結果が正しい場合の処理
trace("読み込みが完了しました");
}else{
//比較結果が正しくない場合の処理
prevFrame();
}
これを記述することにより、比較結果が正しくない（読み込み処理が終わってない）
場合は１フレーム前に戻ります。で、Flashのタイムラインというのは
『gotoAndStop()とstop()を実行しない限りは勝手にフレームを進めてくれる』
という特性があるため、prevFrame()によって1フレーム前に戻った後は、
すぐ次のフレームへの移動が行われます。
そして次のフレームではまた先ほど記載された比較処理が実行されるため、
結果的に『読み込みが終わってない場合はその比較をひたすら繰りかえす』
ということが実現できます。
これにてローディングの基本的な解説は終了です。
あとはローディング処理内で色々遊びを取り入れるための
ヒントを追記欄に記載しておきます。
もちろん、ここで提示しているヒント以外のことを
自分で色々調べてやってみてもいいです。というか大歓迎です。
それでは皆さん！楽しいローディングライフをー。
---------------------------------------- 読み込みが終わるまでの残り容量を求めるには？ ---------------------------------------- 前述の例を引用すると、 totalからloadedを引けば求められますね。 つまり nokori = total - loaded; になります。 ---------------------------------------- 読み込み済みの容量のパーセンテージを求めるには？ ---------------------------------------- loadedをtotalで割って、求めた数字を100で掛ければ パーセンテージが求められます。つまり、 par = (loaded / total)*100; になります。 ---------------------------------------- 数字を四捨五入するには？ ---------------------------------------- 数値を計算するのに便利なMathという命令を使います。 r = Math.round(4.5);//4.5を四捨五入します。この場合、rの中身は5になります。 切り捨て、切り上げは r = Math.floor(4.5);//4.5を切り捨てます。この場合、rの中身は4になります。 r = Math.ceil(4.5);//4.5を切り上げます。この場合、rの中身は5になります。 こんな感じです。 ---------------------------------------- 数字や文字列をテキストボックスに表示する ---------------------------------------- 例：テキストボックスインスタンス「hoge_txt」に数字『100』を表示する。 str = 100; hoge_txt.text = str; ---------------------------------------- ムービークリップ(以下『MC』と表記)の横幅や高さを変更する ---------------------------------------- 例：MC「hoge_mc」の横幅を50px、縦幅を100pxにする。 w = 50; h = 100; hoge_mc._width = 50; hoge_mc._height = 100; ---------------------------------------- MCの横位置(x座標)、縦位置(y座標)を変更する ---------------------------------------- 例：MC「hoge_mc」の横位置を80px、縦位置を10pxにする。 yoko = 80; tate = 10; hoge_mc._x = ; hoge_mc._y = ; ---------------------------------------- MCのアルファ値(透明度)を変更する ---------------------------------------- 例：MC「hoge_mc」のアルファ値を50にする。 alpha = 50; hoge_mc._alpha = alpha; ---------------------------------------- MCのフレーム位置をそれぞれ変更する ---------------------------------------- 例：MC「hoge_mc」のフレーム位置を色々変更する。 num = 20; str = "おわり"; hoge_mc.nextFrame();//hoge_mcを１フレーム進める hoge_mc.prevFrame();//hoge_mcを１フレーム戻す hoge_mc.gotoAndStop(num);//hoge_mcを20フレーム目に移動して止める hoge_mc.gotoAndPlay(num);//hoge_mcを20フレーム目に移動して再生する hoge_mc.gotoAndStop(str);//hoge_mcをフレームラベル"おわり"に移動して止める