ローディングバーセットを作ったよ：サンプルファイル付き

以前のエントリ「ローディングバーセットを作ろう」で言っていたローディングバーセット（プリローダー）を作りました。

前回記事中のtype2ということで、ローディングバーだけのswfファイルを作って、そのルートにコンテンツとなるswfをMovieClipLoaderクラスで監視しつつロードするというタイプです。

ご自由に使っていただいて結構です。使用感等コメントいただけると嬉しいです。β版ということで、誤作動の責任等はとれません。僕の理解不足な箇所があればコメント欄にフィードバックをお願いします。

Download：loader.zip(Flash8形式、1.9MB)

Download：loader_mx2004.zip(FlashMX2004形式、なぜか2.6MB)

上記リンクから、プリローダーセットの圧縮ファイルをダウンロードしてください。内容は以下の通りです。

• loader.fla&swf：このファイルのルートの_level2に、ターゲットをロードする仕組みになってます。ローディングバーのカスタマイズはこのファイルが対象になります。
• loaded.fla&swf：ロードされる側のファイルです。
• loaded.png：loaded.flaに埋め込まれている画像ですが、loaderから直接画像をロードできるようにもなっているので、添付しておきました。
• com/trick7/shape/DrawArc.as：円弧を描くためのカスタムクラスです。いじる必要はありません。

loader.flaを開いた状態では、円弧を描くローダーMC: loadingCircleSetがステージ上に配置してあります。ライブラリの中にはオーソドックスな棒状のローダーMC: loadingBarSetもあります。使いたい方を選んでステージ上に配置してください。ロード対象swfの指定や、見栄えのカスタマイズ等、スクリプトは、各MCのフレームスクリプトに記述してあります。ロード処理に関する流れは両者共通で、以下のようになっています。

1. _rootにロードされるswfファイルの容器となるcontainerを作成し、_alpha=0にしておく。
2. MovieClipLoaderインスタンスを作り、リスナーで以下の処理を監視する。
3. onLoadStart（ロード開始時）：ロードされるswfをフレーム１で止めておく。
4. onLoadProgress（ロード中の処理）：何パーセントロードしたかを算出。ただ、この値をそのままローダーグラフィックのアニメーションに適応させると、滑らかには動かないので、アニメーション処理に関しては直下のonEnterFrameで処理する。
5. onLoadComplete（ロード完了時の処理）：ロード完了時のグラフィックをTweenクラスを使って処理する。念のために全ての処理が終わったら、ローディング関連のグラフィックを全て非表示する。containerのアルファを戻し、ロード対象のswfの２フレーム目に移動←コンテンツ開始。
6. onLoadInit（ロード完了後、swfの初期化時の処理）：ロードされた側のswfで、_rootのパス指定が使えるように「container._lockroot = true」にしておく。
7. mcLoader.loadClip("ロード対象となるswfへのパス", container); を適宜書き直してください。

今回は簡単に見栄えがいじれるようにというテーマで作ったつもりです。各インスタンスやシンボルのカラーやサイズ、Tweenの設定あたりをいじるだけで、結構バリエーョンができるかと思います。

いろいろ説明すると、とても長い記事になりそうなので、カスタマイズ方法など、おいおい整理していきます。とりあえず、loadingBarSetの方のソースを載せておきます。一見して使えそうなら試してみて下さい。間違いがあったらコメントいただけると嬉しいです。

//setting--------------------------------------------
var friction:Number = 0.3;
//---------------------------------------------------
import mx.transitions.Tween;
var home = this;
this.loadBar._xscale = 0;
var container:MovieClip = _parent.createEmptyMovieClip("container", 2);
container._alpha = 0;
var percentage:Number = 0;
var percentageDes:Number = 0;
//---------------------------------------------------
var mcLoader:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();

//ロード開始時の処理
listener.onLoadStart = function(target:MovieClip) {
	target.stop();
};

//ロード中の処理
listener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void  {
	percentageDes = (bytesLoaded/bytesTotal)*100;
};
onEnterFrame = function () {
	percentage += (percentageDes-percentage)*friction;
	loadNumSet.loadNum.text = Math.floor(percentage);
	loadBar._xscale = percentage;
	if (percentage>99) {
		loadBar._xscale = 100;
		percentage = 100;
		listener.onLoadComplete(container);
		delete this.onEnterFrame;
	}
};

//ロード完了時の処理
listener.onLoadComplete = function(target:MovieClip) {
	if (percentage == 100) {
		loadNumSet.loadNum.text = 100;
		var myTween:Tween = new Tween(loadNumSet, "_alpha", mx.transitions.easing.Strong.easeInOut, 100, 0, 1.5, true);
		loadBarBack._visible = false;
		var myTween:Tween = new Tween(loadBar, "_yscale", mx.transitions.easing.Strong.easeInOut, 100, 0, 1.5, true);
		myTween.onMotionFinished = function() {
			var myTween:Tween = new Tween(target, "_alpha", mx.transitions.easing.Strong.easeOut, 0, 100, .5, true);
			target.gotoAndPlay(2);
			//全ての処理が終わったら、ローディング関連のグラフィックを全て非表示する
			myTween.onMotionFinished = function() {
				home._visible = false;
			};
		};
	}
};

//ロード完了後、swfの初期化時の処理
listener.onLoadInit = function(target:MovieClip):Void  {
	//ロードされた側のswfでの_rootパス指定をサポート
	container._lockroot = true;
};
mcLoader.addListener(listener);
mcLoader.loadClip("loaded.swf", container);

以下、今後の記事のための覚え書き

• FlashPlayer7以前でも動くが、loadingCircleSetの線の端が丸くなる事。
• フレームレートを合わして下さい。
• loadingCircleSetの色変更はカラーの着色、線の太さはスクリプトパネルで変更して下さい。
• Tweenでのアルファや拡大縮小、マスク等に対応させるため、フォントを埋め込んでおく事。
• Tweenクラスの上書き、または複数個のTweenインスタンスの作成とonMotionFinishedとの関係。
• ロードされる側のflaは１フレームを空白にして空けておくだけ、stop()も不要。
• loader.swfのステージサイズはコンテンツswfのサイズと合わせる事を念頭に作ったが、調節できること。
• if (percentage>99) {…}の記述が気持ち悪いが、ここでロード未完了でトラブっても、もう一度onLoadCompleteが呼ばれるチャンスがあるからOKかな？

もっと完成度を高めて、記事もまとめて、華々しくエントリしたかったのにグダグダに、orz..