JavaScript と ActionScript 3.0 の連携

そんなに使う機会は多くないと思いますが簡単に相互間の参照の仕方をメモメモ。。

JavaScript から ActionScript 3.0 を参照

下記はJavaScriptからActionScriptに文字列をとりに行きアラートさせる簡単な例です。


サンプル >

ActionScript 3.0

import flash.external.ExternalInterface;

ExternalInterface.addCallback("as_function", hello);

function hello():String {
	return "Hello!!";
}

上記の記述

ExternalInterface.addCallback("as_function", hello);

では、"as_function"はJavaScriptで呼び出す際の関数名、"hello"は呼ばれた際に実行するActionScriptの関数名です。


JavaScript

function display(){
	var flash = document.as3 || window.as3;
	alert(flash.as_function());
}

上記の記述

var flash = document.as3 || window.as3;

では、クロスブラウザをさせるためのもので変数"flash"のなかに、
IEは"object"タグにid="as3"を設定して、"window.as3"で指定しています。
他ブラウザは"embed"タグに name="as3"を設定して、"document.as3"で指定しています。

alert(flash.as_function());

変数"flash"に入れられたオブジェクトに"as_function()"を実行しています。
これはActionScript側で設定したJavaScriptからの呼び出し用関数名です。


HTML

<object id="as3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" type="application/x-shockwave-flash" data="sample_01.swf" width="1" height="1">
	<param name="movie" value="sample_01.swf">
	<embed name="as3" src="sample_01.swf" width="1" height="1"></embed>
</object>

<p>ボタンをクリックするとアラートが出ます。</p>
<input type="button" onclick="display()" value="click!">

"object"はIE用、入れ子の"embed"は 他ブラウザ用です。
"object"の"classid"属性は忘れず記述しましょう。
これがないとflash自体が表示出来ても先の"window.as3"の値が"undifind"になってしまいました。


ActionScript 3.0 から JavaScript を参照

下記はActionScriptからJavaScriptの関数を参照しマウス座標をアラートさせる簡単な例です。


サンプル >


ActionScript 3.0

import flash.external.ExternalInterface;

stage.addEventListener(MouseEvent.CLICK, stageClicked);

function stageClicked(event:MouseEvent):void {
	ExternalInterface.call("sendFromAS3", [stage.mouseX,stage.mouseY]);
}

上記では、ステージをクリックしたときに"stageClicked"を実行するというイベントリスナーを定義し、
"stageClicked"を呼び出されるとJavaScriptの"sendFromAS3"を呼び出し引数としてクリックした際のマウス座標を渡しています。


JavaScript

function sendFromAS3(mouse){
	alert('mouseX=' + mouse[0] + ':mouseY=' + mouse[1]);
}

上記では渡された引数のマウス座標をアラートさせる処理です。


HTML

<p>フラッシュの領域をクリックするとx,y座標をアラート表示します。</p>
<object id="as3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" type="application/x-shockwave-flash" data="sample_02.swf" width="100" height="100">
	<param name="movie" value="sample_02.swf">
	<embed name="as3" src="sample_02.swf" width="100" height="100"></embed>
</object>


予想と反し手間無く出来てよかったよかった><