Now loading・・・のバーを作る

Webサイト作成 TIPS
Flash

「Now Loading」というダウンロードの割合に応じて進むバーを作る

 Windows、Macromedia FlashMX Web作成

動画などの重いページ、また凝ったスプラッシュページを作る必要がある時、そのページが表示されるまで真っ白、というのは余りにユーザーに不親切です。
ここではよくある「Now Loading…。」などとページを読み込むまで表示されているバーの作り方の説明をします。(Flashについてそれなりの知識がある人が前提です。)

  • 矩形ツールで、横長の四角形を作ってバーにします。これが100%読み込まれた時の長さになるようにします。
  • ここで、「線のカラー」と「塗りのカラー」を一緒にしておくのがポイントです。
  • 作った四角形を、ムービークリップに変換します。
  • 次に、ただバーが進むのではなく、数字でも何%ダウンロードしたかが分かるように、テキストを入れます。具体的にはバーの上でも下でも好きなところに、「Now Loading」と書きす。
  • ここで、テキストボックスは横長にしておくのがポイントです。(バーの長さと同じぐらい)
  • 「Now Loading」の文字を、プロパティインスペクタで「ダイナミックテキスト」にします。
  • また、同じく文字のプロパティインスペクタで埋め込みフォントのアウトラインを次の小文字・数字・および次の文字「Now Loading.k/(%) 」にします。指定する文字の最後に半角スペースを入れるのがポイントです。
  • バーのムービークリップのインスタンス名を「bar」にします。文字のインスタンス名を「message」にします。
  • ダイナミックテキストと、バーのムービークリップの両方を選択しながら、混合のムービークリップに変換します。
  • このムービークリップに、次のようにアクションスクリプトを記述します。

>~ここから~

 onClipEvent(load){
         _parent.stop();
         bar._xscale=0;
         function loadingAct(){
 	var parcent = Math.round(loadedBytes/totalBytes *100);

message.text=”Now Loading…”+loadedBytes/10+”k/”

 +totalBytes/10+"k("+parcent+"%)";

bar._xscale=parcent;
}

 }
 onClipEvent(enterFrame){

totalBytes=_parent.getBytesTotal();
loadedBytes=_parent.getBytesLoaded();
if(loadedBytes>=totalBytes){
_parent.play();
}else{
loadingAct();
}

 }

~ここまで

  • このムービークリップが終わったら、次のフレームに目的のムービーなどを配置して、完成です。
  • 尚、上のアクションスクリプトはローカルで試しても一瞬で終わってしまうので、試す時はwebに実際上げてみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です