スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

比較的Flashコンテンツは他のコンテンツよりも容量が大きくなります。オープニングFlashなどは、クライアントに全てダウンロードされる前に再生されてしまうと、かくかくとした動きになり、スムーズに再生されないこともしばしばあります。そこで、コンテンツが100%ダウンロードされてから再生を開始するしくみを追加します。それがプリローダーです。

今回はProgression4を用いたプロジェクトでのプリローダー設置方法です。
まず初めに、サンプルを作成した環境です。

Flash CS5
Progression4
Flash Player 10
ActionScript3

さて、Progressionで新規プロジェクトを立ち上げると、以下のようなファイルがデフォルトで用意されます。

Index.as
index.fla
IndexScene.as
Preloader.as
preloader.fla

indexと名前のついたファイルは、Flashコンテンツの本体部分です。プリローダー関連ファイルは「Preloader.as」と「preloader.fla」なのですが、デフォルトでは処理もムービークリップも空の状態なので、結果的にプリローダーは実行されません。
つまりプリローダーを設置するためには、この2つのファイルに処理を追加します。

プリローダーのサンプル

例えば「preloader.fla」に、読み込み状態をパーセント表示するためのダイナミックテキスト「percent」を持ったムービークリップ「mc01」を設置した場合に、「Preloader.as」のatReadyで初期値を設定します。オブジェクトは、初めは透過度0%にして隠しておきます。

override protected function atReady():void {
	this.mc01.percent.text = 0;
	this.mc01.alpha = 0;
}

次に、プリローダー開始時の処理を記述します。ここでは非表示にしたオブジェクトを表示します。

override protected function atCastLoadStart():void {
	addCommand(
		new DoTweener(this.mc01, {alpha: 1, time:1}),
	);
}

Flashコンテンツのダウンロード状況を100%で表現します。

override protected function atProgress():void {
	var per:Number = bytesLoaded / bytesTotal;
	this.mc01.percent.text = Math.round( _per * 100 );
}

読み込みが完了したら、オブジェクトをフェードアウトして削除します。

override protected function atCastLoadComplete():void {
	addCommand(
		new DoTweener(this.mc01, {alpha:0, time:1}),
		new RemoveChild(foreground, this.mc01)
	);
}

プリローダーにキャストオブジェクトは追加できない?

初めのうちは、indexコンテンツを作成するのと同様に、プリローダーにムービークリップやボタンなどのキャストオブジェクトを追加しようと試していました。

override protected function atCastLoadStart():void {
	addCommand(
		new AddChild(foreground, new Mc01())
	);
}

しかし、このように処理を記述すると、どうしてもエラーになってしまいます。

どうやら、プリローダーはメインコンテンツと違い、キャストオブジェクトをコールできないようです。従って、プリローダーに関する全てのオブジェクトと処理については、「Preloader.as」と「preloader.fla」に含める必要があります。この事を知らずに、だいぶ悩みました。

そもそも私の認識が甘いのでしょうか。苦労せず「プリローダーにキャストオブジェクトを組み込む方法」を知ってる方がいらっしゃったら、是非ともお教え願いたいです。

ちなみに、今回のサンプルは以下の公式マニュアルを参考にさせていただきました。詳細は以下のサイトをご参照ください。
Flash画面遷移フレームワーク「Progression 4」公式ガイド:第3回 フルパフォーマンス!クラススタイル(2)|gihyo.jp … 技術評論社

このエントリーをはてなブックマークに追加

Comment

Comment Form

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

Monthly Archives

Search