Home > | , , > 複数ロードのプログレスを一本化できる「マルチプログレスマネージャー」で幸運パワーを掴め!

複数ロードのプログレスを一本化できる「マルチプログレスマネージャー」で幸運パワーを掴め!

  • 2009-08-25 (火) 9:25
  • ���̃G���g���[���͂Ăȃu�b�N�}�[�N�ɒlj�

パーセント表示のとき、ちょっと面倒な複数のプログレスの監視

たくさん外部ファイルを読み込むコンテンツを作る際、ローディングの表示ををまとめるのって厄介だったりします。

そこで、あらゆるProgressEventをまとめちゃおうというクラスがマルチプログレスマネージャー(MultiProgressManager)です。

Spark Projectにコミットしました!

複数ロードのプログレスが多いと、ホントやっかいですよね!

最初のロード画面で、以下のような流れを行うFlashは比較的多いですよね。

  1. PreloaderからメインのSWFを読むプログレス
  2. xmlを読むプログレス
  3. 画像を読むプログレス
  4. 読み込んだ画像などからビルドするのに時間がかかるときのプログレス
  5. ようやくコンテンツがスタート

わかりにくい図にするとこのような感じです。
m_normal1

これらを最初にまとめて読み込んで、パーセントをうまく100%にまとめようとすると、下図のように、よくわからないことになります。
m_gonyo1

Preloaderがloader経由でmain.swfを読んで、そのプログレスを監視して、main.swf側でconfig.xmlを読んで、その中の…、ああー、もうややこしいわ!30歳近くなったし、将来に不安あるし、湿度高いし、イライラするわ!

そんな悩めるFlasherにお届けするのが今回のマルチプログレスマネージャー!

使い方はとても簡単!面倒だったパーセント表示が、たちどころにまとまります!

マルチプログレスマネージャーは、パーセント表示の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("終了");
}

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

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

m_result1

UMLっぽくするとこうなります(でっちあげのUMLです)
m_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)

未対応なところもあるけれど、今後もっと成長する余地があるってことだネ!

  • エンターフレームで監視しているときに、常にProgressPercentEvent.PERCENT_PROGRESSを飛ばしている(以前のフレームと比較して、パーセントに変化がなければ飛ばさなくてもいいかも)
  • IOエラーなどは監視していない(これは監視しなくてもいい?ロードしてる本体が処理すべき?)
  • キャンセルがちょっと雑?

というわけで、みなさんの風水パワーを待ってます!

無人島でもくもくとやってきたので、ライブラリとはどういう流儀で、どのようなものが求められるのかあまりわかっていません。とにかくコミットしてみました。

「ここおかしい!」というところがございましたら、ガンガンつっこんでください!

サンプルの中身を普通に説明

サンプルも作りました。Sparkのリポジトリに入っています。

サンプルでは普通のFlashでありがちな流れをやっています。

  1. preloader.swf起動
  2. main.swf読み込み
  3. 設定xml読み込み
  4. 複数画像の読み込み
  5. パーセント表示の終了処理
  6. main.swfの表示開始

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の表示を行います。

ハイ!ということでね!

そないたいしたクラスでもない上に、書き方の幅ちょっとを広げようとして、また失敗してしまいました。「イライラするわ!」のくだり以降、途中で飽きてきてるのもわかりますね。

はい。今回の記事はスクリーンセーバーの記事で使う予定のライブラリの説明でもありました。複数ロードを使うので、ここらで説明する必要があったのでした。

あと、Threadライブラリにも影響を受けてます。ほんとはThreadのIProgressも対応したかったのだけど、まだまだ理解不足なので次のバージョンで対応とかしたいです。

あーあ、なんつーか、輝いてへんわ。ガイアのやつ、ぜんぜん囁いてくれへんから輝きもせえへんわ。全部ガイアのせいや。ガイア君、どこいってもうたんや。

Comments (Close):2

r.m 11-03-28 (月) 20:54

とても便利なライブラリで、活用させて頂いています。ありがとうございます。

ところで、Mac で動かすとProgressPercentEvent.PERCENT_COMPLETE イベントがうまく発生していないようなのですが、この現象はご確認されていますでしょうか?

Mac OS X 10.6, Firefox 3.5.1, Safari 4.0.3, Flash Player 10.2.153.1
でうまく動きませんでした。Windowsでは問題ありません。
リポジトリに上がっているサンプルも、「49」が表示されたところで止まります。

r.m 11-03-28 (月) 22:13

いろいろと試したところ、上記の不具合は私のコーディングミスでした。申し訳ありません。
ちなみにサンプルが「49」で止まるのも別のミスでして…MacでSVNのクライアントを使っていなかったため、assets/ 以下をダウンロードし忘れていました。すいませんでした。

Home > | , , > 複数ロードのプログレスを一本化できる「マルチプログレスマネージャー」で幸運パワーを掴め!


Search
Feeds
Meta

Return to page top