[AS3] シーケンス遷移（ページ遷移）を自作する3　（swfaddressを試す）

2010/02/9

こんにちは。きんくまです。

F-siteのセミナーに行ってきました。
今回からスタッフとして参加です。
内容はケータイFlash。
つまりFlash Liteの話を中心に、技術的な話だけでなく、仕事の進め方なども交えて講義がありました。
LISMOや深海ワンダーなどの実例も紹介されました。なかなかこういう機会はないと思うので、とても面白かったです。
ケータイの面白いところは、リアルタイム性にあるみたいです。
岡田さんの講義中に、デモ用のケータイサイトからボタンを押すとプレゼンの画面にニコニコ動画のように「へぇー」やコメントがたくさん流れたりしてました。
岡田さんはサービス精神旺盛な方なようでした。
講義の最後に「TBS系のオールスター感謝祭」と同じようなゲームが出てきて、それを使ってご自分の本のプレゼント大会をしてました。これには驚きました。「アンサーチェック！」とかいうと、リアルタイムにケータイからの投票状況がランキングされてプレゼン画面に出ていたので。演出も本物そっくりで、すごかったです。

さてさてswfaddressです。

>>画像クリックで別ウインドウがひらきます。
swfaddress1

>> 今回のソース一式

swfaddressはJavaScriptとFlashを連携させて、ディープリンクを実現するライブラリです。
ディープリンクというのは、通常Flashだけだと内部にURLを直接そのままだと貼ることができないのですが、ページ内リンク（#ではじまるやつです）を使うことによって実現しようというやつです。

で、今まで試したことがなかったんですが今回やってみました。
そしたら意外と基本は難しくなくて素朴な仕組みでした。

１．ASで、SWFAddressのイベントをリスナー登録しておく
２．ASで、SWFAddress.setValue(‘設定したいURL’);をする
３．SWFAddressがJSと連携プレー。ブラウザのURLを変更する。SWFAddressがASのイベントをdispatch
４．ASでイベント登録していた関数がよばれる。
５．関数の中でSWFAddress.getValue();をすると現在のURLが読み込めるので、switchやif文で分岐

が基本の流れです。他にもいろいろと機能はあるみたいですが、基本はこれで十分かと。
feb19.jpさんのブログ記事が詳しいです。
>> AS3 で SWFAddress 2.4 を使う ( Flash でブラウザの戻るボタン、パーマリンクに対応する )

もう少し、簡単に知りたい！という方は、本家のチュートリアル集からこのページがおすすめ
>>SWFAddress ActionScript 3 sample for Flash

で、ここまでできたのですが、２階層目以降の場合は結構難しそうですね。
URLを判別して再帰処理をして画面を積み上げていくのかな？と今考えていますけど、いろいろ試してみないとなんともですね。

今回のメインのソースです。

package  
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;
	import org.libspark.next.*;
	import swfaddress.SWFAddress;
	import swfaddress.SWFAddressEvent;
	/**
	 * ...
	 * @author KinkumaDesign
	 */
	public class Main extends MovieClip
	{
		private var _childPage:BasePage;
		public var btn1:MovieClip;
		public var btn2:MovieClip;
		
		public function Main() 
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			SWFAddress.addEventListener(SWFAddressEvent.INIT, initHD);
		}
		
		private function initHD(e:SWFAddressEvent):void 
		{
			SWFAddress.removeEventListener(SWFAddressEvent.INIT, initHD);
			SWFAddress.addEventListener(SWFAddressEvent.CHANGE, addressChangeHD);
			btn1.addEventListener(MouseEvent.CLICK, btn1ClickHD);
			btn2.addEventListener(MouseEvent.CLICK, btn2ClickHD);
		}
		
		private function btn2ClickHD(e:MouseEvent):void 
		{
			SWFAddress.setValue("/2");
		}
		
		private function btn1ClickHD(e:MouseEvent):void 
		{
			SWFAddress.setValue("/1");
		}
		
		private function addressChangeHD(e:SWFAddressEvent):void 
		{
			var self:Main = this;
			N.push(stopPage).func(function() {
				self.stopPageCompleteHD();
			}).start();
		}
		
		private function stopPageCompleteHD():void
		{
			var self:Main = this;
			switch(SWFAddress.getValue()) {
				case "/":
				SWFAddress.setTitle("トップページ");
				break;
				case "/1":
				_childPage = new Page1();
				SWFAddress.setTitle("1ページ目");
				break;
				case "/2":
				_childPage = new Page2();
				SWFAddress.setTitle("2ページ目");
				break;
			}
			
			if (_childPage != null) {
				addChild(_childPage);
				N.push(self._childPage.startPage)
				.func(function() {
				}).start();
			}
		}
		
		private function stopPage():ITrigger
		{
			var tri:Trigger = new Trigger();
			var self:Main = this;
			if (_childPage == null) {
				tri.call();
			}else{
				N.push(_childPage.stopPage)
				.func(function() {
					self.removeChild(self._childPage);
					self._childPage = null;
					tri.call();
				}).start();
			}
			return tri;
		}
	}

}

あとページ共通の親クラス

package  
{
	import flash.display.MovieClip;
	import kinkuma.BAS3Trigger;
	import org.libspark.betweenas3.easing.*;
	import org.libspark.next.*;
	/**
	 * ...
	 * @author KinkumaDesign
	 */
	public class BasePage extends MovieClip
	{
		
		public function BasePage() 
		{
			
		}
		
		public function startPage():ITrigger
		{
			var tri:Trigger = new Trigger();
			alpha = 0;
			N.push(BAS3Trigger, this, {	alpha:1 }, 0.5, Quad.easeIn)
			.func(function() {
				tri.call();
			}).start();
			return tri;
		}
		
		
		public function stopPage():ITrigger
		{
			var tri:Trigger = new Trigger();
			N.push(BAS3Trigger, this, {	alpha:0 }, 0.5, Quad.easeIn)
			.func(function() {
				tri.call();
			}).start();
			return tri;
		}
	}

}

ではでは。