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

Flashコンテンツでローディングの実装は重要です。
特に容量の大きいコンテンツの場合、全てのコンテンツがロードされていない状態でFlashが再生されてしまうと、再生がカクカクしたり、途切れたりと、見苦しいものになってしまいます。
それらを防止するために、全てのコンテンツのロードが完了してからFlashを再生するしくみが必要なわけです。

通常では、タイムラインを用いて、初めのフレームのところでローディングのアクションを構築して、ActionScriptでローディング完了を判定して、次のメインのフレームへジャンプするという処理のようです。
プログラマ出身なので、タイムラインの操作はあまり得意ではありません。どうせActionScriptを記述するのならば、全部ActionScriptで完結させたいものです。

処理のステップとしては、

1.ローディングムービーを再生し、ローディング状態を監視するイベントを登録する
2.ローディングが完了したら、監視イベントとローディングムービーを排除し、通常コンテンツを呼び出す
3.通常コンテンツを再生

となります。

動作未確認、かつ、だいぶ省いてますが、、、ActionScript3でサンプルコードを書いてみました。

function Main() {
	/* ローディングのムービークリップなどを追加 */
	// ローディング監視開始
	addEventListener(Event.ENTER_FRAME, loadCheck);
}
function loadCheck(e:Event):void {
	// ローディングの進捗状態を取得
	var percent:int = Math.ceil(loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100);
	// ローディング完了
	if(percent >= 100) {
		// ローディングの監視終了
		removeEventListener(Event.ENTER_FRAME, loadCheck);
		/* ローディングのムービークリップなどを排除 */
		// メイン処理を開始
		startMainContents();
	}
}
function startMainContents():void {
	/* メインとなる処理 */
}

このブログのトップページのFlashでも同じような処理を組み込んでいます。ただ、それほど容量がないので、ローディングムービーを見ることはほとんどありませんが。。。今後、容量が大きくなったときのために。

少し凝った作りにして、ローディングの状態(0~100%)の数値を使ってローディングムービーをコントロールするとかっこいいのですが。暇なときにチャレンジしてみます。

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

Comment

Comment Form

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

Monthly Archives

Search