NEWS

2016.09.02 「Photoshopとpapervision3dでテクスチャ付3Dを作成する(4)」を更新しました。

  • Web creators

ActionScript

ローディングの表示(getBytesLoaded と getBytesTotal)

概要

ActionScript「getBytesLoaded()」と「getBytesTotal()」により対象のファイルのデータ容量と現在読み込まれたデータ容量を取得することが可能です。
それより、全てを読み込み前にアニメーションが始まってしまわないようにできます。
また、取得データ量に応じてグラフ表示します。

サンプル解説

読み込まれたデータ量が表示され、全て読み込まれたらムービーが進みます。
サンプルのデータ量は630KB程度あります
もう一度サンプルを見る場合、一度読み込んだFLASHが表示されることがあるのでブラウザを閉じてアクセスするか、パソコンのキャッシュを削除してご覧ください。

作成法

(1) シンボルの作成
  ・読み込まれたデータ量をグラフ表示するためにシンボルを作成
  ・グラフが伸縮するため、シンボルのX座標を0、Y座標を0にして位置がズレないようにします。
  ・グラフが100%になるときの大きさで作成します。(今回は300pxで作成)
グラフバーの作成
  ・ファイル容量を大きくするためのシンボルを作成(容量を増やすため、画像を使用)
ダミーシンボルの作成
(2) ステージに読み込み中のシーンを作成
  ・ActionScriptを設定するレイヤー作成する(レイヤー名をActionとする)
  ・フラグを設定するレイヤー作成する(レイヤー名をFlagとする)
  ・レイヤー1にフレームを挿入して下図のように動作するパーツを設置(文字等は直接設置)
  ・作成したグラフのシンボルを設置し、インスタンス名を「MC01」に設定(この時、シンボルのX座標を100に設定)
読み込み中のシーンを作成
  ・「%の読み込み完了」の左にダイナミッックテキストを配置
  ・変数に「C_LOADED」と設定
テキストエリアの設定
  ・上記同様、「Kbyte /」左のテキストエリアには変数「LOADED」、その右のテキストエリアには変数「TOTAL」を設定
(3) 読み込み完了後のシーンの作成
  ・レイヤー1の3フレーム目にシンボル「背景1」を設置
読み込み完了後のシーン作成
(4) フレーム名の設定
  ・「FLAG」レイヤーの3フレーム目にフレーム名「INDEX」を設定
(5) ステージにActionScriptを設定
  ・レイヤー「ACTION」の各フレームにキーフレームを作成(3フレーム分使用するため、今回は3つ)
  ・レイヤー「ACTION」の1フレーム目を選択してActionScriptを設定
 
01
02
03
04
05
06
07
08
09
LOADED = _root.getBytesLoaded();
TOTAL = _root.getBytesTotal();
_root.LOADED = Math.round(LOADED/1024);
_root.TOTAL = Math.round(TOTAL/1024);
C_LOADED = (LOADED * 100) / TOTAL;
C_LOADED = Math.round(C_LOADED);
 
_root.MC01._x = 100;
_root.MC01._xscale = C_LOADED;
(6) ステージにActionScriptを設定
  ・レイヤー「ACTION」の2フレーム目を選択してActionScriptを設定
 
01
02
03
04
05
if (LOADED >= TOTAL) {
 _root.gotoAndStop("INDEX");
} else {
 gotoAndPlay (1);
}

解説

このActionScriptの動作としてSWFファイルが全て読み込むまで、フレーム1とフレーム2をループするようにしています。
読み込みが完了したか判断する箇所は(6)の01です。読み込みが完了していなければ04のように1フレーム目に戻ります。
まず(5)の01で現在読み込んだデータ量を取得、02で全体のファイル容量を取得しています。
01、02で取得した値はbyteなので、単位をKbyteに変更し四捨五入する箇所が(5)の03、04です。
05で取得した割合を計算し、06で四捨五入しています。
08は グラフの位置を指定しています。(左端にしたい場合は0にする)
09で読み込みの割合に応じてグラフが伸びます。

備考

ローディング中の数値やグラフの動きを正常に出すためには、SWFファイル単体をブラウザで見ても正常に動作しません。
パブリッシュ時にHTMLファイルも一緒に生成し、直接SWFファイルを見るのではなくHTMLファイルから確認するようにして下さい。また、サーバ上にアップしてから確認する方が確実です。

ページ上部へ