制作記事 Web制作アプリケーションFlashloadingバーを作る(こだわり編)

loadingバーを作る(こだわり編)

パーツを作る

  1. 100%読み込まれた状態を作成。
    1. 矩形ツールで線と塗りを設定。
    2. 塗りの部分だけを選択し、ムービークリップシンボル(ショートカット「F8」、「名前:loading_bar」[基準点:左中])に変換。
  2. メッセージを表示するテキストボックスを作成。
    1. テキストツールで初期文字(loading)を入力。
    2. ボックス幅を自動入力分広げる。
    3. プロパティインスペクタで[テキストの種類:ダイナミックテキスト]に設定。
    4. フォントの種類、サイズ、色を任意に設定。
    5. テキスト内に入力可能な文字を設定。
      1. プロパティインスペクタの「文字」をクリック
      2. 「範囲の指定」をチェックを「数字」をチェック
      3. 「追加する文字を指定」欄に「初期値(loading).k/(%) (半角スペース)」を記入
  3. インスタンス名をつける
    1. ムービークリップ(loading_bar)を選択し、インスタンス名(bar)を設定。
    2. ダイナミックテキストを選択し、インスタンス名(msg)を設定。
  4. パーツをまとめる
    1. 全てを選択し、ムービークリップシンボル(「名前:loading」)に変換。

スクリプトの記述

ムービークリップ(loading)を選択した状態でスクリプトを記述する。

onClipEvent(load){
_parent.stop();
bar._xscale = 0;
function loadingAct(){
var parcent=Math.round(loadedBytes / totalBytes*100);
msg.text=”loading… "+loadedBytes/10 + "k / " + totalBytes/10 + "k("+ parcent + "%)";
bar._xscale = parcent;
}
}
onClipEvent(enterFrame){
totalBytes = 5000;
loadedBytes = getTimer();
//totalBytes = _parent.getBytesTotal();
//loadedBytes = _parent.getBytesLoaded();
if(loadedBytes >= totalBytes){
_parent.play();
}else{
loadingAct();
}
}

実際にWeb上にアップするときにコメントアウトの指定変更を忘れないように!

loading後別ファイル(top.swf)を呼び出し、その後任意のフレーム(6種類内から)を呼び出す方法

外部ファイルを読み込むときは最後ではなく、「_parent.stop()すぐ下」に記述するのがポイント。

onClipEvent (load) {
_parent.stop();
loadMovieNum("top.swf", 1);
bar._xscale = 0;
function loadingAct() {
var parcent = Math.round(loadedBytes/totalBytes*100);
msg.text = "loading…"+loadedBytes/10+"k/"+totalBytes/10+"k("+parcent+"%)";
bar._xscale = parcent;
}
}
onClipEvent (enterFrame) {
totalBytes = 3000;
loadedBytes = getTimer();
//totalBytes = _parent.getBytesTotal();
//loadedBytes = _parent.getBytesLoaded();
if (loadedBytes>=totalBytes) {
_parent.txt.gotoAndPlay(2);
var gazou = Math.floor(Math.random()*6)+2;
_parent.gotoAndStop(gazou);
} else {
loadingAct();
}
}