javascriptとの連携でFlashコンテンツをお気に入り登録できるようにする

Flashサイトは普通、コンテンツ内をお気に入りとして登録することができない。
お気に入りというのはもちろん、URLを登録しているだけなので、小コンテンツを登録することなんて単一のフルFlashサイトでは不可能と思われがち。
もちろん、小コンテンツごとにFlashを分けて作って、そこにアクセスしてもいいけど、実は、フルFLashの単一コンテンツでもできる。

ActionScript 3.0 のExternalInterfaceをつかって、Javascriptと連携させるやり方を紹介する。

http://xingxx.com/shared/swf/flashBookmark/

以下、スクリプトと解説

• Contents.as
• Btn.as

Contents.as

package {
	import flash.display.DisplayObjectContainer;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	import caurina.transitions.Tweener;
	import flash.events.Event;
	/**/
	public class Contents extends MovieClip {
		
		public static var instance:MovieClip;
		
		public static var pointObj:Object = {
			a:76.9,
			i: -278.1,
			u:-654
		}
		
		public function Contents():void {
			instance = this as MovieClip;
			addEventListener(Event.ADDED_TO_STAGE,init)
		}
		
		private function init(e:Event):void {
			var point:String = ExternalInterface.call("callHref")
			if (point) {
				tweenOn(pointObj[point])
			}
		}
		
		public static function tweenOn(point:Number) {
			Tweener.addTween(instance, { y:point, time:2 } )
		}
		
	}
	
}

Btn.as

package {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.external.ExternalInterface;
	import flash.events.Event;
	/**/
	public class Btn extends MovieClip {
		
		public function Btn():void {
			addEventListener(Event.ADDED_TO_STAGE,init)
		}
		
		private function init(e:Event):void {
			buttonMode = true;
			addEventListener(MouseEvent.CLICK,clickHandler)
		}
		
		private function clickHandler(e:MouseEvent):void {
			Contents.tweenOn(Contents.pointObj[e.target.name])
			ExternalInterface.call("setUrlAddress",e.target.name)
		}
		
	}
	
}

Contents.asでは、単純にExternalInterfaceをつかって、外部のjsと連携し、帰ってきた文字列をオブジェクトにあてはめ、コンテンツを遷移させている。

ActionScript 3.0 のExternalInterfaceは、2.0の時と比べて、格段に使いやすくなった。第一引数にページに読み込まれているJavascriptのファンクション名、第二引数にそのファンクションに渡す引数を設定できる。

Btn.asでは、call()の第二引数に、押されたMovieCliipの名前をつっこむ。ボタンの名前と、Contentsで明記されているpointObjオブジェクトは一致させる
こうすることで、if文を使わずに値を共有できる。

次にJs

var query = "?#/";
function callHref(){
	var point = querySplit(1)
	if(point){
		return point
	}else{
		location.href = query
	}
}

function setUrlAddress(directoryName){
	var point =querySplit(0)
	location.href = point+query+directoryName
}

function querySplit(type){
	var addressArray = String(location.href).split(query)
	return addressArray[type]
}

まずquerySplitは、現在のlocation.hrefとsplitを使ってアドレスからアンカーの文字列を取得する。

callHrefは、querySplitで取得されたアンカーの文字列があれば、swfに返す。なければアドレスに追加する

setUrlAddressは、swfからわたってきたオブジェクトの名前をアンカーの文字列としてアドレスに追加している。

swfを読み込み、コンテンツが配置された段階で、ExternalInterFaceがcallHrefでアンカーの文字列を取得し、そこに紐づけられた位置に移動する。