feb19.jp

Nobuhiro Takahashi
Designer / Engineer

AsBroadcasterを使ってメニューを作る

AsBroadcasterを使ってメニューを作る

AsBroadcasterを使うタイミングがあった(というか使ってみようと思った)ので、AsBroadcasterを使ってメニューを作るという、一見遠回りしてるだけなトピック。

AsBroadcasterのbroadcastMessageを使えば、クラス間で変数を受け渡しできるというか、ブロードキャスター(発信者)がとりあえず何かメッセージを送信したら、そのメッセージに反応するイベントを別のクラスで持っておける。

とりあえずこんなコンテンツを作るとする。なんてチープだ。

サンプル

コードとflaファイルは以下。

AsBroadcasterTest.fla

Main.as

class Main {
	var basemc;
	var contentmc;
	var headerObj;
	function Main(mc){
		basemc = mc;
		contentmc = basemc.content;
		contentmc.gotoAndStop(1);
		setHeader();
	}
	function setHeader(){
		var scope = this;
		headerObj = new Header(basemc);
		var hob = new Object();
		hob.onClick = function(n){
			scope.changePage(n);
		}
		headerObj.addListener(hob);
	}
	function changePage(n){
		contentmc.gotoAndStop(n);
	}
}

Header.as

class Header {
	var headermc;
	function Header(mc) {
		headermc = mc;
		AsBroadcaster.initialize(this);
		setHeaderBtn();
	}
	function setHeaderBtn() {
		var scope = this;
		for(var i=1;i<7;i++){
			var bt = headermc["btn"+i];
			bt.num = i;
			bt.onRelease = function(){
				scope.broadcastMessage("onClick", this.num);
			}
		}
	}
}

Main.as側で全体的な処理、Header.as側でヘッダーの挙動が書かれています。

具体的には、Header.asではボタンがクリックされることで、「onClick」というメッセージを「this.num」という引数つきでを発信し、Main.asで定義したヘッダー用のオブジェクトで受け取るという処理をしています。onClickのメッセージが来たらchangePage関数を呼び出す、という具合に。

Header.asがbroadcast(発信者)になり、Main.asがlistener(視聴者)になるというわけです。

こうすることの利点はクラスファイルを分けて構築することが出来ると言うことと、考え方によっては簡潔に処理を行えるということ。独自のイベント構造を作ることができるから、例えばフルフラッシュサイトを作るとき、構造をテンプレート的にしておいて、ページ遷移などの"サイトとしての機能"はすぐに作って、納期までの残りの時間をモーションなどの作りこみに当てることが出来るようになる、というメリットなどなど。

とはいえこの構造がどのサイトでも当てはめられるとは限らず、またフラッシュサイトとして面白い構造にするのなら、インターフェースを面白くするのなら、なかなか微妙かも。

ちなみに、ActionScript3.0ではAsBroadcasterは存在しないので、注意です。

Tweet Share Bookmark

Navigation

prev: Papervision3Dでマウスに反応するキューブを作る
next: Underworld / Oblivion With Bells

Recently Entries