Flash と JavaScript とで連携する
Flash から JavaScript にアクセスする
■Flash から JavaScript にアクセスする
Flash から JavaScript を実行するには、以下の方法があります。
■fscommand() 関数を使用する
fscommand() 関数を使用すると Flash から JavaScript に記述した特定の関数を実行できます。
■FSCommand がサポートされた HTML を生成する
まず、Flash のパブリッシュ設定の、「HTMLのテンプレート」を「Flash（FSCommand サポート）」に設定して、HTMLを出力します。
デフォルトで生成されるタグを整理すると、以下のようになります。このタグを改変してみます。
「Flash（FSCommand サポート）」で生成されるタグを整理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>名称未設定-1</title>
</head>
<body bgcolor="#ffffff">
<script language="JavaScript">
<!--
// Flash から呼び出される関数
function 名称未設定-1_DoFSCommand(command, args) {
//
// ここに JavaScript を追加
//
}
// Internet Explorer 用のコード
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) {
document.write('<script language=\"VBScript\"\>\n');
document.write('On Error Resume Next\n');
document.write('Sub 名称未設定-1_FSCommand(ByVal command, ByVal args)\n');
document.write(' Call 名称未設定-1_DoFSCommand(command, args)\n');
document.write('End Sub\n');
document.write('</script\>\n');
}
//-->
</script>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" id="名称未設定-1" width="550" height="400" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="名称未設定-1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="名称未設定-1.swf" quality="high" bgcolor="#ffffff" width="550" height="400" swLiveConnect=true id="名称未設定-1" name="名称未設定-1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" />
</object>
</body>
</html>
■HTML 側を FSCommand に対応する
まず、以下のタグの属性に注目します。
「objectタグの id」
「embed タグの id」
「embed タグの name」
ここにユニーク（唯一）な名前を付けます。ここでは "SwfTest" と名前を付けます。
「object タグの id」 と 「embed タグの name」 に識別名を付ける(一部略)
<html>
<head></head>
<body>
<script language="JavaScript"></script>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
id="SwfTest" width="550" height="400" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="名称未設定-1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="名称未設定-1.swf" quality="high" bgcolor="#ffffff" width="550" height="400"
swLiveConnect=true id="SwfTest" name="SwfTest" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" />
</object>
</body>
</html>
次に JavaScript の 「名称未設定-1_DoFSCommand」という関数に注目します。Flash から fscommand() 関数を呼び出すと、この関数が呼び出される事になります。
このままでは動作しないので、この関数名を変更します。先ほど付けた名前に "_DoFSCommand" という文字を付加します。
先ほどは "SwfTest" という名前を付けたので、ここでは、"SwfTest_DoFSCommand" という関数名になります。
Flash から呼び出される関数名を変更する(一部略)
<html>
<head></head>
<body>
<script language="JavaScript">
<!--
// Flash から呼び出される関数
function SwfTest_DoFSCommand(command, args) {
//
// コードをここに配置します。
//
}
// Internet Explorer 用のコード
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) {
document.write('<script language=\"VBScript\"\>\n');
document.write('On Error Resume Next\n');
document.write('Sub 名称未設定-1_FSCommand(ByVal command, ByVal args)\n');
document.write(' Call 名称未設定-1_DoFSCommand(command, args)\n');
document.write('End Sub\n');
document.write('</script\>\n');
}
//-->
</script>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
id="SwfTest" width="550" height="400" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="名称未設定-1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="名称未設定-1.swf" quality="high" bgcolor="#ffffff" width="550" height="400"
swLiveConnect=true id="SwfTest" name="SwfTest" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" />
</object>
</body>
</html>
JavaScript の「Internet Explorer 用のコード」というコメントが付いた処理部分に注目します。
この一連の処理は、Internet Explorer で動作させる場合に必要となります。
ここで記述されている、
"名称未設定-1_FSCommand" という部分を、 先ほど付けた名前に "_FSCommand" という文字を付加した名称に変更します。
ここでは、 "SwfTest_FSCommand" となります。
"名称未設定-1_DoFSCommand" という部分を、 先ほど付けた名前に "_DoFSCommand" という文字を付加した名称に変更します。
ここでは、 "SwfTest_DoFSCommand" となります。
Internet Explorer 用のコードを修正する(一部略)
<html>
<head></head>
<body>
<script language="JavaScript">
<!--
// Flash から呼び出される関数
function SwfTest_DoFSCommand(command, args) {
//
// コードをここに配置します。
//
}
// Internet Explorer 用のコード
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) {
document.write('<script language=\"VBScript\"\>\n');
document.write('On Error Resume Next\n');
document.write('Sub SwfTest_FSCommand(ByVal command, ByVal args)\n');
document.write(' Call SwfTest_DoFSCommand(command, args)\n');
document.write('End Sub\n');
document.write('</script\>\n');
}
//-->
</script>
<object ><embed /></object>
</body>
</html>
embed タグの swLiveConnect 属性に注目します。このパラメータは、Netscape 6.2 未満で動作させる場合に必要となります。
fscommand() 関数を使って、Flash から JavaScript を実行する場合、Java を使用する必要があるようです。
swLiveConnect 属性を true に変更すると、Java が起動するようです。
embed タグの swLiveConnect 属性を true に設定する(一部略)
<html>
<head></head>
<body>
<script language="JavaScript"></script>
<object>
<embed src="名称未設定-1.swf" quality="high" bgcolor="#ffffff" width="550" height="400"
swLiveConnect=true id="SwfTest" name="SwfTest" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" />
</object>
</body>
</html>
■Flash 側で fscommand() 関数を実行する
ActionScript から、fscommand() 関数を実行します。
第01引数には、コマンドとして送信したい好きな文字列をセットします。
第02引数には、パラメータとして送信したい好きな文字列をセットします。
第01引数で設定する文字列には、以下のコマンド名がすでに存在します。
"quit"
"fullscreen"
"allowscale"
"showmenu"
"exec"
"trapallkeys"
これらの文字列をセットすると、ブラウザ用以外の FlashPlayer では別の動作をするので使用しない方がよさそうです。
呼び出し例です。
fscommand () 関数を実行する
fscommand("cmd_000" , "123");
fscommand("cmd_001" , "abc");
fscommand("cmd_002" , "あいうえお");
■JavaScript 側でコマンドを受け取る
JavaScript 側に 「#####_DoFSCommand」という名称の関数があれば、Flash からのコマンドを受け取る事ができます。
第01引数から、コマンド用の文字列が取得できます。
第02引数から、パラメータ用の文字列が取得できます。
Flash からは唯一、「#####_DoFSCommand」という名称の関数が実行できます。
複数の処理を行いたいときは、この関数内で第01引数のパラメータを使って処理の分岐を行います。
設定例です。
#####__DoFSCommand() 関数にコマンド分岐を追加する
<html>
<head></head>
<body>
<script language="JavaScript">
<!--
// Flash から呼び出される関数
function SwfTest_DoFSCommand(command, args) {
switch(command){
case "cmd_000":
alert("cmd_000:" + args);
break;
case "cmd_001":
alert("cmd_001:" + args);
break;
case "cmd_002":
alert("cmd_002:" + args);
break;
default:
alert("未実装のコマンド:" + command + " パラメータ:" + args);
break;
}
}
// Internet Explorer 用のコード
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) {
document.write('<script language=\"VBScript\"\>\n');
document.write('On Error Resume Next\n');
document.write('Sub SwfTest_FSCommand(ByVal command, ByVal args)\n');
document.write(' Call SwfTest_DoFSCommand(command, args)\n');
document.write('End Sub\n');
document.write('</script\>\n');
}
//-->
</script>
<object ><embed /></object>
</body>
</html>
ローカル環境で動作確認する場合、「JavaScript 実行に関するサンドボックス」に注意します。
■fscommand() 関数を使用する際の注意点
ActionScript と JavaScript は同期的に実行されます。
ActionScript 側で fscommand ()関数を呼び出すと、JavaScript 側の関数が終了するまで Flash は停止します。
■navigateToURL() 関数を使用する
navigateToURL() 関数を使用すると Flash から JavaScript を実行できます。
URL として文字列で "javascript:" と記述し、続けて javascript のプログラムを記述します。
文字数は 508 字以内に収める必要があります。
アラート関数を呼び出す例です。
アラート関数を呼び出す
var url:URLRequest = new URLRequest("javascript:" + "alert( 'Hello World！' );");
navigateToURL(url,"_self");
ローカル環境で動作確認する場合、「JavaScript 実行に関するサンドボックス」に注意します。
■エスケープシーケンスを使用して記述する
文字列の中でシングルコーテーション '' やダブルコーテーション "" を使用する場合、書式が複雑になりがちです。そんなときは、
シングルコーテーションは 「\'」
ダブルコーテーションは 「\"」
と記述する事もできます。アラート関数を呼び出す例です。
ダブルコーテーションは 「\"」
と記述する事もできます。アラート関数を呼び出す例です。
エスケープシーケンスを使用してアラート関数を呼び出す
navigateToURL(new URLRequest("javascript:" + "alert( \'Hello World！\' );"),"_self");
navigateToURL(new URLRequest("javascript:" + "alert( \"Hello World！\" );"),"_self");
■Flash 側に JavaScript をすべて記述する場合
変数を宣言する処理を書けば JavaScript 側に変数を作成する事ができます。
変数を宣言して alert 関数を呼び出す
var js =
"var value = 123;" +
"alert(value);";
navigateToURL(new URLRequest("javascript:" + js),"_self");
関数を宣言する処理を書けば JavaScript 側に関数を作成する事ができます。
関数を宣言して実行する
var js =
"function MessageBoxCreate(value){" +
"alert(value);" +
"};" +
"" +
"MessageBoxCreate(\"abc\")";
navigateToURL(new URLRequest("javascript:" + js),"_self");
navigateToURL() 関数は文字数制限があるので、長いプログラムを書く事はできません。
そこで、プログラムを小分けにして書けば実現できそうですが、残念ながら以下の問題があります。
navigateToURL() 関数を使うと、Flash と JavaScript が非同期で実行されます。
Flash 側で navigateToURL() 関数が終了したからといって JavaScript 側の処理が完了したとは限りません。
以下のように、navigateToURL() 関数を連続で呼び出すと失敗する可能性があります。
navigateToURL() 関数を連続で呼び出すと失敗する可能性がある
navigateToURL(new URLRequest("javascript:" + "var value = 123;"),"_self");
navigateToURL(new URLRequest("javascript:" + "alert(value);"),"_self");
十分に時間隔を空けてから navigateToURL() を呼び出せば成功する可能性は高くなりますが、JavaScript 側の処理が確実に完了している保証は無いのでやはり危険です。
・文字数制限がある
・非同期で動作するため小分けにして実行するのは危険
・文字列中に JavaScript を記述する必要があるので面倒
以上のことから、Flash 内ですべての JavaScript プログラムを用意するのは難しいです。
次の解説にある、
HTML 側に JavaScript を記述して Flash から JavaScript の関数を呼び出すのが簡単です。
・非同期で動作するため小分けにして実行するのは危険
・文字列中に JavaScript を記述する必要があるので面倒
■HTML に記述した JavaScript の関数を呼び出す
HTML にJavaScript の関数を用意します。
ここでは、myFunc() という関数を用意します。
HTML側の記述例です。
HTML にJavaScriptを記述する
<HTML>
<HEAD>
<script type="text/javascript">
<!--
function myFunc(){
alert("myFunc() 関数が呼び出されました。");
}
//-->
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
HTML で宣言した JavaScript の関数を Flash 側から呼び出してみます。
Flash 側の記述例です。
Flash 側の記述例です。
Flash から JavaScript 側の関数 myFunc() を呼び出す
navigateToURL(new URLRequest("javascript:" + "myFunc();"),"_self");
■ JavaScript 関数の引数からパラメータを渡す
引数を利用すれば、Flash から JavaScript にパラメータを渡すことができます。
HTML側の記述例です。
HTML側の記述例です。
HTML にJavaScriptを記述する
<HTML>
<HEAD>
<script type="text/javascript">
<!--
function myFunc2(param1,param2,param3,param4,param5){
alert("myFunc2() 関数が呼び出されました。:" + param1 + " : " + param2 + " : " + param3 + " : " + param4 + " : " + param5 );
}
//-->
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
Flash 側から呼び出してみます。
引数には、Boolean 型、Number 型、String 型、Array 型、Object 型を指定できますが、ActionScript の変数の状態でそのまま渡すことはできません。
配列型であれば、配列用の初期化を記述し、オブジェクト型であれば、オブジェクト用の初期化を記述します。
Flash 側の記述例です。
Flash から JavaScript 側の関数 myFunc2() を呼び出す
var param = "hello!!";
navigateToURL(new URLRequest("javascript:" + "myFunc2( true , 123 , \"" + param + "\" , [1,2,3] , { a:123 , b:456 });"),"_self");
■navigateToURL() 関数を使用する際の注意点
ActionScript と JavaScript は非同期で実行されます。
ActionScript 側で navigateToURL() 関数が終了して次の命令が処理されたからといって JavaScript 側の処理が終わっているとは限りません。
ActionScript 側で navigateToURL() 関数が終了して次の命令が処理されたからといって JavaScript 側の処理が終わっているとは限りません。
■External API を使用する
External API を使用すると、HTML 側で記述している JavaScript 関数を実行できます。
navigateToURL() 関数を使用するより、External API を使用した方が、ブラウザを問わず統一された動作を行うことができます。
■ブラウザが External API に対応しているか調べる
ExternalInterface.available プロパティを使用すると、ブラウザが External API に対応しているか調べることができます。
true であれば使用可能です。
使用例です。
External API に対応しているか調べる
import flash.external.ExternalInterface;
var tf:TextField = new TextField();
addChild(tf);
tf.border = true;
tf.x = 10;
tf.y = 10;
tf.width = 400;
tf.height = 30;
tf.text = "External API : " + ExternalInterface.available;
■HTML 側の JavaScript 関数を実行する
HTML 側で JavaScript の関数を用意します。
ここでは、myFunc() と名前を付けます。
HTML 側に JavaScript の関数を使用する
<HTML>
<HEAD>
<script type="text/javascript">
<!--
function myFunc(){
alert("myFunc() 関数が呼び出されました。");
}
//-->
</script>
</HEAD>
<BODY></BODY>
</HTML>
Flash から JavaScript の関数を実行するには、ExternalInterface.call() メソッドを使用します。
第01引数に、関数名を String 型で指定します。
使用例です。
JavaScript の関数 "myFunc" を呼び出す
import flash.external.ExternalInterface;
ExternalInterface.call("myFunc");
■ JavaScript にパラメータを渡す
引数を使うと、JavaScript にパラメータを渡す事ができます。
HTML 側の記述例です。
HTML 側に引数付きの JavaScript 関数を用意する
<HTML>
<HEAD>
<script type="text/javascript">
<!--
function myFunc2(param1,param2,param3){
alert("myFunc2() 関数が呼び出されました。 : " + param1 + " : " + param2 + " : " + param3);
}
//-->
</script>
</HEAD>
<BODY></BODY>
</HTML>
ExternalInterface.call() メソッドの第 02 引数以降に、パラメータを引数としてセットすると、指定した個数分を JavaScript 側に送る事ができます。
引数には、Boolean 型、Number 型、String 型、Array 型、Object 型を指定できます。ActionScript の変数をそのまま渡すことができます。
使用例です。
JavaScript の関数 "myFunc2" を引数付きで呼び出す
import flash.external.ExternalInterface;
ExternalInterface.call("myFunc2",false,123,"あいう");
■ JavaScript からパラメータを取得する
戻り値を使うと、JavaScript からパラメータを取得する事ができます。
HTML 側の記述例です。
HTML 側に戻り値付きの JavaScript 関数を用意する
<HTML>
<HEAD>
<script type="text/javascript">
<!--
function myFunc3(param1,param2){
alert("myFunc3() 関数が呼び出されました。 : " + param1 + " : " + param2);
return (param1 + param2);
}
//-->
</script>
</HEAD>
<BODY></BODY>
</HTML>
ExternalInterface.call() メソッドの戻り値を使用すると、
JavaScript からパラメータを取得する事ができます。
戻り値には、Boolean 型、Number 型、String 型、Array 型、Object 型を指定できます。
使用例です。
JavaScript の関数 "myFunc3" から戻り値を取得する
import flash.external.ExternalInterface;
var tf:TextField = new TextField();
addChild(tf);
tf.border = true;
tf.x = 10;
tf.y = 10;
tf.width = 400;
tf.height = 30;
tf.text = String(ExternalInterface.call("myFunc3",123,456));
■External API を使用する際の注意点
ActionScript と JavaScript は同期的に実行されます。
ActionScript 側で JavaScript の関数を呼び出すと、JavaScript 側の関数が終了するまで Flash は停止します。
JavaScript から Flash にアクセスする
■External API を使用する
External API を使用すると、「JavaScript 側」から 「Flash 側で記述している ActionScript 関数」を実行できます。
External API を使用すると、ブラウザを問わず統一された動作を行うことができます。
■ブラウザが External API に対応しているか調べる
ExternalInterface.available プロパティを使用すると、ブラウザが External API に対応しているか調べることができます。
true であれば使用可能です。
使用例です。
External API に対応しているか調べる
import flash.external.ExternalInterface;
var tf:TextField = new TextField();
addChild(tf);
tf.border = true;
tf.x = 10;
tf.y = 10;
tf.width = 400;
tf.height = 30;
tf.text = "External API : " + ExternalInterface.available;
■Flash 側の関数を用意する
Flash 側で関数を用意します。
ここでは、myFunc() と名前を付けます。
Flash 側に関数を用意する
function myFunc():void{
var tf:TextField = new TextField();
addChild(tf);
tf.border = true;
tf.x = 10;
tf.y = 10;
tf.width = 400;
tf.height = 30;
tf.text = "myFunc() 関数が呼び出されました。 : " + this;
}
■Flash 側の関数を外部から実行される準備をする
Flash 側で用意した ActionScript の関数を外部から実行可能な状態にするには、ExternalInterface.addCallback() メソッドを使用します。
第 01 引数で JavaScript 側で呼び出す為の関数名称を設定します。ここでは、"asFunc" と名前を付けます。
ExternalInterface.addCallback ( "外部に公開する関数名称" , 関数 );
| 第01引数 | JavaScript 側で関数を呼び出す際に使用する名称を設定します。好きな識別名を付けることができます。 |
| 第02引数 | ActionScript 側の関数を指定します。 |
| 戻り値 | 登録に成功すれば true、失敗すれば false |
設定例です。
Flash 側の関数をJavaScript から呼び出せるよう登録する
import flash.external.ExternalInterface;
ExternalInterface.addCallback("asFunc",myFunc);
■Flash のエレメントを取得する
「object タグの id」 と 「embedタグ の name」 にパラメータを追加します。
ユニーク（唯一）な名前を付けます。ここでは "swf_test" と名前を付けます。
設定例です。
object タグの id と embed タグの name を追加する
<html>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="550" height="400" id="swf_test" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="test.swf"
quality="high" bgcolor="#ffffff" width="550" height="400"
name="swf_test" align="middle" allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
JavaScript から以下のラッピング関数 DocumentGetElementFromName() を使用してFlash のエレメントを取得します。
引数に、先ほど付けた名前を指定します。
取得例です。
エレメントを取得する
<HTML>
<HEAD>
<script type="text/javascript">
<!--
// ボタンが押されたときに実行される関数
function ButtonClickFunc(){
// Flash のエレメントを取得
var swf = DocumentGetElementFromName("swf_test");
alert(swf);
}
function DocumentGetElementFromName(name) {
var obj;
if (navigator.appName.indexOf("Microsoft") != -1) obj = window[name];
else obj = document[name];
if(!obj) return null;
if(obj.constructor == HTMLCollection) return obj[0];
return obj;
}
//-->
</script>
</HEAD>
<BODY>
<input type="button" value="JavaScript 実行" style = "width:100%; height:50px;" onclick = "ButtonClickFunc()"><BR>
</BODY>
</HTML>
■Flash のエレメントから外部に公開したメソッドを呼び出す
Flash のエレメントには、外部に公開した関数が格納されています。
先ほど、"asFunc" という関数を登録したのでこの関数を呼び出してみます。
外部に公開したFlash側の関数を JavaScript から呼び出す
<HTML>
<HEAD>
<script type="text/javascript">
<!--
// ボタンが押されたときに実行される関数
function ButtonClickFunc(){
// Flash のエレメントを取得
var swf = DocumentGetElementFromName("swf_test");
if(swf){
// 外部に公開した関数を実行
swf.asFunc();
}
}
function DocumentGetElementFromName(name) {
var obj;
if (navigator.appName.indexOf("Microsoft") != -1) obj = window[name];
else obj = document[name];
if(!obj) return null;
if(obj.constructor == HTMLCollection) return obj[0];
return obj;
}
//-->
</script>
</HEAD>
<BODY>
<input type="button" value="JavaScript 実行" style = "width:100%; height:50px;" onclick = "ButtonClickFunc()"><BR>
</BODY>
</HTML>
■ Flash にパラメータを渡す
引数を使うと、Flash にパラメータを渡す事ができます。
Flash 側で引数付きの関数を用意して外部に公開します。
ここでは、"asFunc2" と名前を付けます。
JavaScript から引数付きの関数を呼び出せるよう公開する
import flash.external.ExternalInterface;
function myFunc2(param1:Boolean,param2:Number,param3:String,param4:Array,param5:Object):void{
var tf:TextField = new TextField();
addChild(tf);
tf.border = true;
tf.x = 10;
tf.y = 10;
tf.width = 400;
tf.height = 300;
tf.multiline = true;
tf.text = "myFunc2() 関数が呼び出されました。 : " + this + "\n" + "param1:" + param1 + "\n" + "param2:" + param2 + "\n" + "param3:" + param3 + "\n" + "param4:" + param4 + "\n" + "param5:" + param5 + "\n";
}
ExternalInterface.addCallback("asFunc2",myFunc2);
引数には、Boolean 型、Number 型、String 型、Array 型、Object 型を指定できます。JavaScript の変数をそのまま渡すことができます。
HTML 側の記述例です。
外部に公開したFlash 側の関数を引数付きで呼び出す
<HTML>
<HEAD>
<script type="text/javascript">
<!--
// ボタンが押されたときに実行される関数
function ButtonClickFunc(){
// Flash のエレメントを取得
var swf = DocumentGetElementFromName("swf_test");
if(swf){
// 外部に公開した関数を実行
swf.asFunc2(true,123,"あいうえお",[0,1,2,3,4],{a:0,b:1,c:2});
}
}
function DocumentGetElementFromName(name) {
var obj;
if (navigator.appName.indexOf("Microsoft") != -1) obj = window[name];
else obj = document[name];
if(!obj) return null;
if(obj.constructor == HTMLCollection) return obj[0];
return obj;
}
//-->
</script>
</HEAD>
<BODY>
<input type="button" value="JavaScript 実行" style = "width:100%; height:50px;" onclick = "ButtonClickFunc()"><BR>
</BODY>
</HTML>
■ Flash からパラメータを受け取る
戻り値を使うと、Flash からパラメータを受け取る事ができます。
Flash 側で戻り値付きの関数を用意して外部に公開します。
戻り値には、Boolean 型、Number 型、String 型、Array 型、Object 型を指定できます。ActionScript の変数をそのまま返すことができます。
ここでは、"asFunc3" と名前を付けます。
JavaScript から戻り値付きの関数を呼び出せるよう公開する
import flash.external.ExternalInterface;
function myFunc3():String{
var tf:TextField = new TextField();
addChild(tf);
tf.border = true;
tf.x = 10;
tf.y = 10;
tf.width = 400;
tf.height = 30;
tf.multiline = true;
tf.text = "myFunc3() 関数が呼び出されました。 : " + this;
return "あいうえお";
}
ExternalInterface.addCallback("asFunc3",myFunc3);
HTML 側の記述例です。
外部に公開したFlash 側の関数を呼び出して戻り値を取得する
<HTML>
<HEAD>
<script type="text/javascript">
<!--
// ボタンが押されたときに実行される関数
function ButtonClickFunc(){
// Flash のエレメントを取得
var swf = DocumentGetElementFromName("swf_test");
if(swf){
// 外部に公開した関数を実行
var value = swf.asFunc3();
alert(value);
}
}
function DocumentGetElementFromName(name) {
var obj;
if (navigator.appName.indexOf("Microsoft") != -1) obj = window[name];
else obj = document[name];
if(!obj) return null;
if(obj.constructor == HTMLCollection) return obj[0];
return obj;
}
//-->
</script>
</HEAD>
<BODY>
<input type="button" value="JavaScript 実行" style = "width:100%; height:50px;" onclick = "ButtonClickFunc()"><BR>
</BODY>
</HTML>
■JavaScript から Flash の関数を使用する際の注意点
Flash側の関数がすぐに実行可能だとは限りません。
Flash 側の読み込みが完了していなかったり、初期化が完了していない場合などが考えられます。
Flash側の準備が整ったか確認してからメソッドを呼び出します。
JavaScript と ActionScript は同期的に実行されます。
JavaScript 側で ActionScript の関数を呼び出すと、ActionScript 側の関数が終了するまで JavaScript は停止します。
JavaScript 実行に関するサンドボックスについて
■スクリプト実行許可の設定
HTMLタグに allowscriptaccess パラメータを追加します。
この設定により JavaScript の実行を許可することができます。
ローカルで動作させる場合は、"always" に設定する必要があります。
デフォルトだと、"samedomain" となります。
| 文字列 | 効果 |
| always | スクリプトの実行を常に許可（別ドメインでも許可） |
| samedomain | 同じドメイン内に Flash と HTML が置かれている場合のみ実行を許可 |
| never | 実行できない |
設定例です。
HTML タグに JavaScript 実行許可を設定する
<html>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" id="test" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="test.swf"
quality="high" bgcolor="#ffffff" width="550" height="400"
name="test" align="middle" allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
■ローカルで JavaScript を実行する場合
ユーザーが「グローバルセキュリティ設定パネル」で、swf ファイルを信頼できるファイルとして登録している場合、
ローカルで JavaScript は動作します。
| 信頼できるファイルとして登録 |
 |
ユーザーが「グローバルセキュリティ設定パネル」で「常に許可」以外を選択している場合、ローカルで JavaScript は動作しません。
| 常に許可を選択していない |
 |
ユーザーが「グローバルセキュリティ設定パネル」で「常に許可」を設定していて…
| 常に許可を選択して… |
|
「パブリッシュ設定」の「ローカルでの再生に関するセキュリティ」を「ローカルファイルにのみアクセスする」に設定していて…
| 「ローカルファイルにのみアクセスする」を選択して… |
 |
スクリプト実行許可の設定を "always" に設定している場合は、JavaScript は動作します。
HTML タグに JavaScript 実行許可を設定する
<html>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" id="test" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="test.swf"
quality="high" bgcolor="#ffffff" width="550" height="400"
name="test" align="middle" allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
■サンドボックスタイプを確認する
サンドボックスタイプを取得したい場合は、System.security.sandboxType プロパティを使用します。
ブラウザなど各環境上で確認します。
| 文字列 | 効果 |
| remote | インターネット上で動作しています。 |
| localWithFile | ローカル上で動作しています。 「ローカルファイルにのみアクセスする」が選択されています。 |
| localWithNetwork | ローカル上で動作しています。 「ネットワークにのみアクセスする」が選択されています。 |
| localTrusted | 信頼できるファイルとして「Flash Player 設定マネージャ」か、"FlashPlayerTrust" 構成ファイルにより登録されています。 |
取得例です。
サンドボックスタイプを取得する
import flash.text.TextField;
var tf:TextField = new TextField();
addChild(tf);
tf.border = true;
tf.x = 10;
tf.y = 10;
tf.width = 400;
tf.height = 30;
tf.text = Security.sandboxType;
問答収集
