ActionScript Archive

weightってこんな感じで動いてる

• ロードするItemが10個あって
• それぞれのItemにweightが設定されていない

というケースでは、各Itemに割り当てられるパーセントは1/10、つまり10％ずつです。

このうち1つのItemがFLVなどで他のファイルより重いときにweightを設定します。この重いItemをweight=11と設定しましょう。あと、Itemのデフォルトのweightは1ということを覚えておいてください。

_bulkloader.add("hoge.flv", { type: BulkLoader.TYPE_VIDEO, weight: 11 } );

すると、

こんな感じであがります。元の分母はItem数なので10。それに、増えた重みを足して10+10で分母が20になります。たぶん！これで、FLVのパーセントが55%分を占めるようになり、期待している値に近づきました。

このweightが設定されたパーセントを取得するにはweightPercentを使用します。

weightPercentでもうすこし正確なパーセント表示

BulkProgressEvent.weightPercentにweightを考慮したパーセントが入っています。

(item._bytesLoaded / item._bytesTotal) * item.weight;

いたってシンプルですね。こういった形で加算されていくので、かなり実際と近いパーセントが取得できそうです。

weightの設定にひと手間かける分、ratioLoadedやbytesLoadedよりもわりと正確な値を取得できます。

マルチプログレスマネージャーは、パーセント表示のMVCのM（モデル）部分

マルチプログレスマネージャーはモデルに徹します。大きな流れとしては以下の3点！

1. MultiProgressManagerのインスタンスを作って
2. それぞれのプログレスを見張るをモデルを突っ込むと、
3. 全部をまとめて0～1までに変換された進捗率が吐き出されます

//マルチプログレスマネージャーのインスタンス生成
_progressManager = new MultiProgressManager();
//ローダーのプログレスを70%に設定して突っ込む
var loader:Loader = new Loader();
var model:AbstractProgressModel = new ProgressEventModel(loader.contentLoaderInfo, 0.7);
_progressManager.addProgress(model);

//他の素材読み込みを残り30%に割り当てて突っ込む
var urlLoader:URLLoader = new URLLoader();
_progressManager.addProgress(new ProgressEventModel(urlLoader, 0.3);

//読み込み開始
_progressManager.start();
loader.load(new URLRequest("main.swf"));
urlLoader.load(new URLRequest("config.xml"));

パーセント表示はMultiProgressManagerのイベントを監視するだけ。それもプログレスとコンプリートの2つだけ！

MultiProgressManagerを稼動させるとプログレスのイベントが通知されるのでそれをリスンします。

//このイベントにまとめられたパーセントのプログレスが入っています。
_progressManager.addEventListener(ProgressPercentEvent.PERCENT_PROGRESS, progressHandler);
//パーセントの完了イベント
_progressManager.addEventListener(ProgressPercentEvent.PERCENT_COMPLETE, completeHandler);

//プログレスのイベントハンドラ
private function progressHandler(event:ProgressPercentEvent):void
{
	//パーセント表示を更新
	loadingBar_mc.scaleX = event.percent; //event.percentは0～1までのNumber
}
private function completeHandler(event:ProgressPercentEvent):void
{
	trace("終了");
}

さっきのわかりにくい図が驚くほど簡単に！

担当すべきクラスを分けることで、みるみるあっさりしました！これこそ宇宙の波動！

UMLっぽくするとこうなります（でっちあげのUMLです）

モデルの拡張も簡単！いろんなプログレスに対応できる！

AbstractProgressModelを継承すれば、標準のプログレス以外にも対応できます。しかも、考えるのは2点だけ！

1. progressイベントをリスンすることを書く
2. 完了したときの処理を書く

を書くだけで簡単に拡張できます。同梱しているBulkLoader用のBulkLoaderProgressModelがまさにこれです。

「main.swfは全体の50%くらい、config.xmlは10%くらいで」といった、割り当てもサクっとできる！！

個別にプログレスを監視するクラス（AbstractProgressModel）にはpercentRangeというプロパティがあります。こいつが「main.swfは全体の50%にしよう」といったプロパティになります。

//50%で読み込む
var model:AbstractProgressModel = new ProgressEventModel(loader.contentLoaderInfo, 0.5);

下図のような割合でやるときも、引数を割り当てるだけで実現できちゃいます。

さらに、今回は「パーセントが上昇するときのスムージング（線形補完）」もお付けします！

new MultiProgressManagerするときの第二引数をtrueにするだけで、スムージングします。
いちいちView側で操作する必要がありません。

//引数は EnterFrameの監視にStage
//スムージングをtrue
//スムージングのfrictionを0.3
//パーセントがいっきに上がりすぎないための、最大の上昇幅
new MultiProgressManager(stage, true, 0.3, 0.05)

1.preloader.swf起動（Preloader.as)

2.preloaderがmain.swf読み込み（Preloader.as)

reloader.as 66行目付近から

1. インスタンスの生成（シングルトンバージョンを使用します）

   SiMultiProgressManager.getInstance(stage, true, 0.3, 0.05);

2. イベントハンドラの設定
3. 読み込み開始

3.main.swfを読み終えたら、設定xmlの読み込み

1. Preloader.as 95行目付近 mainLoadCompleteHandler内部で
2. Main.as の86行目 start()を呼び、Mainの構築用のスレッドを開始します
3. LoadConfigThread.as内部でxmlを読み込みます。

4.設定xmlに指定された複数画像の読み込み

AssetsLoadThread.as内部で複数画像の読み込みを行います。
ここではBulkLoaderを使って複数読み込みをまとめています。

5.読み込んだ素材を配置していきます

複数読み込みが終われば BuilderThread.asで配置します。

6.パーセント表示の終了処理

1. すべての読み込みが終了し、パーセントが100%になったら、パーセント表示をフェードアウトさせて消します。
2. Main側ではOpenContentsThread.asでパーセント表示が消えるまで待機状態になります。
3. Preloader.as の116行目付近 completeHandler()が呼ばれるので、そこでパーセント表示をフェードさせます。

7.main.swfの表示開始

パーセント表示のフェードアウトが終わったら、待機していたOpenContentsThreadが動きだし、mainの表示を行います。

SWFObjectのDynamic Publishingの場合

SWFObjectで空divを起点に動的にObjectタグを埋め込むやつをすると

• IE全般
• MacのFireFox

で、一瞬だけstage.stageWidthとstage.stageHeightが0になります。

Dynamic Publishingってのは以下のjsコードで空divに埋め込むやつです

//SWFObject1.5
var so = new SWFObject("hoge.swf", "topFlash", "100%", "100%", "8", "#FFFFFF");
so.write("flashcontent");

//SWFObject2.xならDynamic Publishingと呼ばれるタイプ
swfobject.embedSWF("hoge.swf", "flashcontent", "100%", "100%", "9.0.45", "expressInstall.swf", flashvars, params, attributes);
			

サンプルでテストしてみてください。
サンプルのasはこちら

• wmodeはtransparent
• 最初にstageの中心に文字を書こうとしますが、ダメブラウザだと文字が(0,0)にきます
• swfの中心に「うんこ」と書かれたらOKブラウザ！
• 崩れてたらStageの初期サイズが0のダメブラウザ。IEかMacのFirefoxです
• traceされているテキストは以下です
  • 一発目にStageのwidthとheightをチェック
  • ENTER_FRAMEイベントと何回ENTER_FRAMEが回ったか
  • ENTER_FRAMEでStageのwidthとheightをチェック
  • stageのResizeイベント
  • stageWidthがゼロだったらADDED_TO_STAGEイベントを取得
  • それぞれのgetTimer

サンプルの結果

win

IE6～8	Firefox3	Opera9.6	Safari3	Safari4	chrome
×	○	○	○	○	○

キャプチャ

mac os10.5

Firefox3	Opera9.6	Safari3	Safari4
△	○	○	○

（崖っぷちさんとこではMacのFirefoxでもアウトでしたが私の環境ではOKでした）

ENTER_FRAMEの方がRESIZEイベントよりも速くStageのwidthが変わったことを知る

このサンプルを作っていてわかったのですが、ENTER_FRAMEでwidthとheightを監視して、ゼロじゃなくなったあと（ENTER_FRAMEのイベントハンドリングが終わったあと）にRESIZEイベントが飛んできます。なので、無意味なタイムラグが生じます。

SWFObjectでの原因

SWFObjectの原因は以前のエントリで妄想を膨らませましたが、これは間違っていると思います。詳細ご存知のかた、おしえてください！

対処法について

• Event.RESIZEよりEvent.ENTER_FRAMEの方がstageの幅高の取得が早いので、ENTER_FRAME監視がベター
• dispatchEventしてるのは入口と出口を分けないため。
  （newする前にif(stage.stageWidth * stage.stageHeight != 0)を挟めばOKブラウザをスルーできますが、OKブラウザとNGブラウザで出口がバラバラになるとややこしいのでこうしました。）

クラスとサンプル

サンプルとソースzip

StageSizeChecker.as

package com.katapad.utils
{
	import flash.display.Stage;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.utils.getTimer;

	/**
	 * WinIEやMacFFでSWFObjectのDynamic Publishingをしたときにおこる
	 * Stage.stageWidthとstageHeightが0になる問題を
	 * EnterFrameで監視してチェックするクラス<br />
	 * Event.RESIZEが飛んでくるタイミングがEvent.ENTER_FRAMEより遅いので、
	 * EVENT.COMPLETEのついでにstageからEVENT.RESIZEも飛ばします(オプション)。
	 *
	 * @author katapad.com
	 * @version 0.1
	 * @since 2009/03/17 3:40
	 * @usage
	 * <p>MainクラスやPreloaderクラスの最初に</p>
	 * <pre>
	 * var StageSizeChecker:StageSizeChecker = new StageSizeChecker(stage);
	 * StageSizeChecker.addEventListener(Event.COMPLETE, delayInit);
	 * StageSizeChecker.start();
	 * </pre>
	 * <p>を書いて、あとはEvent.COMPLETEの受取先で</p>
	 * <pre>event.target.removeEventListener(Event.COMPLETE, delayInit);</pre>
	 * <p>すればOK</p>

	 */
	public class StageSizeChecker extends EventDispatcher
	{
		/**
		 * stage.stageWidthとstage.stageHeightが0以外になったら配信します。
		 * @eventType flash.events.Event.COMPLETE
		 */
		[Event(name = "complete", type = "flash.events.Event")]

		//----------------------------------
		//  static var/const
		//----------------------------------

		//----------------------------------
		//  instance var
		//----------------------------------
		private var _stage:Stage;
		private var _isResizeEvent:Boolean;

		/**
		 * ステージサイズを見張り、ゼロ以外ならEvent.COMPLETEを配信します。
		 * @param	stage
		 * @param	isResizeEvent	_stage.dispatchEvent(new Event(Event.RESIZE))も同時に発動させるかどうか
		 */
		public function StageSizeChecker(stage:Stage, isResizeEvent:Boolean = true)
		{
			init(stage, isResizeEvent);
		}

		private function init(stage:Stage, isResizeEvent):void
		{
			_stage = stage;
			_isResizeEvent = isResizeEvent;
		}

		//--------------------------------------------------------------------------
		//
		//  PUBLIC
		//
		//--------------------------------------------------------------------------
		public function start():void
		{
			if (isValidSize())
			{
				complete();
				return;
			}
			_stage.addEventListener(Event.ENTER_FRAME, check);
		}
		//--------------------------------------------------------------------------
		//
		//  PROTECTED
		//
		//--------------------------------------------------------------------------

		//--------------------------------------------------------------------------
		//
		//  EVENT HANDLER
		//
		//--------------------------------------------------------------------------
		private function check(event:Event):void
		{
			if (isValidSize())
				complete();
		}

		//--------------------------------------------------------------------------
		//
		//  PRIVATE
		//
		//--------------------------------------------------------------------------
		private function isValidSize():Boolean
		{
			//trace( getTimer(), "_stage.stageWidth : " + _stage.stageWidth );
			return _stage.stageWidth * _stage.stageHeight != 0;
		}

		private function complete():void
		{
			_stage.removeEventListener(Event.ENTER_FRAME, check);
			if (_isResizeEvent)
				_stage.dispatchEvent(new Event(Event.RESIZE));
			dispatchEvent(new Event(Event.COMPLETE));
			_stage = null;
		}

		//--------------------------------------------------------------------------
		//
		//  GETTER/SETTER
		//
		//--------------------------------------------------------------------------

	}

}

BulkLoaderの便利ポイントをまとめると

• まとめてロードできる
• String形式のurlをadd()するだけでロードの準備はOK。さらにvideoなのかxmlなのかjpgなのかなどを自動判別してロードしてくれる（きちんとtype指定もできるのでやったほうがいいです）
• ロードが終わったら、あらかじめBulkLoaderに渡しておいたIDやurlのstringで取得できる
• getXML()とかgetBitmapdata()などで好みのインスタンスで取得できる
• 複数ロードのパーセントや何個中何個がロードできたかを取得できる。
• ロードしたものを取得後、メモリに残したり、取得したらメモリから消したりと、メモリ管理が簡単

といったところです。ものすごく便利です。

1.ロードするときにproressイベントが発動するまで、bytesTotalが見えない問題

外部素材との接続を確立してproressイベントが発動するまではbytesTotalが見えません。下のスクリプトで確認してみましょう。

このように、progressEventが発生するまでbytesLoadedやbytesTotalはわかりません。複数ロード時にはこのへんの問題があります。

BulkLoaderのパーセント表示には2つ種類があり、そのうち強引な作りのほうを選んでしまった

次にBulkLoaderが持っている2種類のパーセント表示を見てみましょう。

1. 読み込みが完了したアイテム数 / トータルのアイテム数（BulkProgressEvent.ratioLoaded)
2. 今までに読み込んだアイテムの総bytesLoaded / トータルのアイテムの総bytesTotal（BulkProgressEvent.percentLoaded）

「1.完了数/総数」は複数ロードするときによく使われる手法ですが、2つしかロードがないときは50%ずつ増えることになるので、使いどころが難しいときもあります。
正確なパーセントを知りたいときは後者の「bytesLoadedとbytsTotalの比率」を使います。

しかし、ここが大きな落とし穴となっていました。

BulkLoaderはこのパーセント表示を強引な手法で実装しています。前述のとおり、flash.event.ProgressEventが飛んでこない限り、bytesTotalを知る術はありません。BulkLoaderでは、

1. bytesTotalを取得できたitemだけを加算し、
2. すべてのitemのbytesLoadedと上記のbytesTotalの比率からパーセントを表示します

つまり、すべてのitemのbytesTotalがわかるのは最後のitemのprogressが始まったときになのに、分母（bytesTotal）が変動する状態でパーセント表示を開始してしまうのです。

ロード直後では
800/1000（80%）
だったものが、その次のフレームで
1000/10000（10％）
となる可能性があるのです。

2009-10-06追記 ： weightPercentを使う

以下のやりかたよりもスマートな解法がありました。BulkProgressEvent.weightPercentを使うともっとまともなパーセントを取得できます。
こちらの記事に書きました。「BulkLoaderで「もう悩まない！」ための6つのtipsをまずは14日間で売上No.1！！」

1.読み込みが完了したアイテム数 / トータルのアイテム数をとる

これが一番安全ですね。パーセント表示は正確なものが期待できませんし、トータルのアイテム数が2つ3つのときはおおざっぱになるので、ごまかしの効くviewにしましょう

2.読み込み順序に優先順位をつけ、重たいものから先に読み込む

先に軽いファイルを大量に読み込むと、重たいファイルを読み込み始めた瞬間にグッと分母が上昇してしまいます。重たいファイルから読めば分母の変動が少ないので、ある程度ゴマカシが効くようになります。

//優先順位はこんな感じで設定
//addの引数でpriorityを設定。priorityが高いやつが優先的に読み込まれる。重たいファイルを優先的に指定しとく。
var bulkLoader:BulkLoader = new BulkLoader("main loading");
bulkLoader.add("めっさ重たい.flv", { priority : 1000 });
bulkLoader.add("コニシキ.flv", { priority : 1000 });
bulkLoader.add("ダイエットコーラ.xml", { priority : 0 });
bulkLoader.add("糖分ゼロ.xml", { priority : 0 });
bulkLoader.add("ふわっふわ.xml", { priority : 0 });
bulkLoader.add("納品前日に仕様変更.swf", { priority : 500000 });
bulkLoader.addEventListener(～～～);
bulkLoader.start();

addメソッドの引数はasdocで

マシンとソフト

• WinXP
• Flash CS3 IDE
  （コンパイルするだけ）
• FlashDevelop
  （メインのエディタ。コード補完が最強なので、as2とas3の違いによる単純な書き損じを減らせる）
• Flex SDK
  （コンパイルするだけだがまだ導入してない。誰かが背中を押してくれたら試す)

本

• Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート
• ActionScript 3.0 アニメーション

イベント処理

• Sprite.addEventListner()で自身がイベントをリスンしていることを伝える
• MouseEvent.MOUSE_DOWN == onPress
• MouseEvent.CLICK == onRelease
• onReleaseOutsideが削除（歓迎！）

プロパティ

• _xなどアンダーバーがなくなる
• rootとmaskがプロパティになった

データ型

データ型が増えた。以下増えたやつ

MCやSpriteなどの重なりとかDisplayオブジェクトらへん

• stage.framerateでFPSを変更しまくれる
• rootの扱いがよくわからん。lockrootとかどうなるのか。そのへんを大重さんが書いてたけどいまいちわかってないので、もう少し勉強。外部swfからメインタイムラインにはどうやってアクセスするのか。
• as3からaddChild方式に変わった。htmlのDOMに似た感じ。
• container.setChildIndex()などで順序を切り替えていく