Flash と JavaScript の連携について
Flash Player の要素について
■Flash Player の要素について
ブラウザに Flash を表示するには、<OBJECT> か <EMBED> タグを使用します。
■<OBJECT> 要素と <EMBED> 要素の違い
<OBJECT> 要素は、入れ子に対応しています。
プラグインが未対応だった場合に表示したいコンテンツを、子に記述できます。
<OBJECT> 要素は、プラグイン未対応時のコンテンツを記述できる
<object type="unknown">
このプラグインは未対応です。
</object>
<EMBED> 要素は、入れ子に対応していません。
プラグインが未対応であっても、<EMBED> 要素は表示されます。
<EMBED> 要素を使った、未対応プラグインの表示例
■ID 属性から Flash Player の要素を取得する
最上位となるタグ（要素）に、id 属性を追加して、好きな名前を付けます。
■ID 属性から Flash Player の要素を取得する関数
第01引数に、Document オブジェクト
第02引数に、id 名を指定します。
戻り値から、HTMLEmbedElement もしくは、HTMLObjectElement オブジェクトが得られます。
見つからなかった場合は、null 値が得られます。
ID 属性から Flash Player の要素を取得する関数
// ------------------------------------------------------------
// ID 属性から Flash Player の要素を取得する関数
// ------------------------------------------------------------
function DocumentGetFlashPlayerElementById(document_obj,id){
var element = document_obj.getElementById(id);
if(!element) return null;
if(document_obj.documentMode) return element;
var nodes = element.getElementsByTagName("embed");
if(nodes.length){
return nodes[nodes.length-1];
}
var nodes = element.getElementsByTagName("object");
if(nodes.length){
return nodes[nodes.length-1];
}
return element;
}
■取得例
ID 属性から Flash Player の要素を取得する
<html>
<head>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ID 属性から Flash Player の要素を取得する関数
// ------------------------------------------------------------
function DocumentGetFlashPlayerElementById(document_obj,id){
var element = document_obj.getElementById(id);
if(!element) return null;
if(document_obj.documentMode) return element;
var nodes = element.getElementsByTagName("embed");
if(nodes.length){
return nodes[nodes.length-1];
}
var nodes = element.getElementsByTagName("object");
if(nodes.length){
return nodes[nodes.length-1];
}
return element;
}
//-->
</script>
</head>
<body>
<br>─── OBJECT(ActiveX) と OBJECT 要素 ───<br>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="my_element_0" width="550" height="400">
<param name="movie" value="test.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="test.swf" width="550" height="400">
<param name="movie" value="test.swf" />
<!--<![endif]-->
プラグインは未対応です。
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<br>─── OBJECT(ActiveX) と EMBED 要素 ───<br>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="my_element_1" width="550" height="400">
<param name="movie" value="test.swf" />
<embed type="application/x-shockwave-flash" src="test.swf" width="550" height="400" />
</object>
<br>─── OBJECT 要素のみ ───<br>
<object type="application/x-shockwave-flash" id="my_element_2" data="test.swf" width="550" height="400">
<param name="movie" value="test.swf" />
プラグインは未対応です。
</object>
<br>─── EMBED 要素のみ ───<br>
<embed type="application/x-shockwave-flash" id="my_element_3" src="test.swf" width="550" height="400" />
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ID 属性から Flash Player の要素を取得する
// ------------------------------------------------------------
var element0 = DocumentGetFlashPlayerElementById(document,"my_element_0");
var element1 = DocumentGetFlashPlayerElementById(document,"my_element_1");
var element2 = DocumentGetFlashPlayerElementById(document,"my_element_2");
var element3 = DocumentGetFlashPlayerElementById(document,"my_element_3");
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
alert(element0);
alert(element1);
alert(element2);
alert(element3);
//-->
</script>
</body>
</html>
■任意の要素内に存在する Flash Player の要素を取得する
■任意の要素内に存在する Flash Player の要素を取得する関数
第01引数に、Element オブジェクトを指定します。
戻り値から、HTMLEmbedElement もしくは、HTMLObjectElement オブジェクトが得られます。
見つからなかった場合は、null 値が得られます。
任意の要素内に存在する Flash Player の要素を取得する関数
// ------------------------------------------------------------
// 任意の要素内に存在する Flash Player の要素を取得する関数
// ------------------------------------------------------------
function ElementGetFlashPlayerElement(element){
var document_obj = element.ownerDocument;
if(document_obj.documentMode){
var nodes = element.getElementsByTagName("object");
if(nodes.length){
return nodes[0];
}
var nodes = element.getElementsByTagName("embed");
if(nodes.length){
return nodes[0];
}
}else{
var nodes = element.getElementsByTagName("embed");
if(nodes.length){
return nodes[nodes.length-1];
}
var nodes = element.getElementsByTagName("object");
if(nodes.length){
return nodes[nodes.length-1];
}
}
return null;
}
■取得例
任意の要素内に存在する Flash Player の要素を取得する
<html>
<head>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// 任意の要素内に存在する Flash Player の要素を取得する関数
// ------------------------------------------------------------
function ElementGetFlashPlayerElement(element){
var document_obj = element.ownerDocument;
if(document_obj.documentMode){
var nodes = element.getElementsByTagName("object");
if(nodes.length){
return nodes[0];
}
var nodes = element.getElementsByTagName("embed");
if(nodes.length){
return nodes[0];
}
}else{
var nodes = element.getElementsByTagName("embed");
if(nodes.length){
return nodes[nodes.length-1];
}
var nodes = element.getElementsByTagName("object");
if(nodes.length){
return nodes[nodes.length-1];
}
}
return null;
}
//-->
</script>
</head>
<body>
<br>─── OBJECT(ActiveX) と OBJECT 要素 ───<br>
<div id="my_element_0">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400">
<param name="movie" value="test.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="test.swf" width="550" height="400">
<param name="movie" value="test.swf" />
<!--<![endif]-->
プラグインは未対応です。
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<br>─── OBJECT(ActiveX) と EMBED 要素 ───<br>
<div id="my_element_1">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400">
<param name="movie" value="test.swf" />
<embed type="application/x-shockwave-flash" src="test.swf" width="550" height="400" />
</object>
</div>
<br>─── OBJECT 要素のみ ───<br>
<div id="my_element_2">
<object type="application/x-shockwave-flash" data="test.swf" width="550" height="400">
<param name="movie" value="test.swf" />
プラグインは未対応です。
</object>
</div>
<br>─── EMBED 要素のみ ───<br>
<div id="my_element_3">
<embed type="application/x-shockwave-flash" src="test.swf" width="550" height="400" />
</div>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// 任意の要素内に存在する Flash Player の要素を取得する
// ------------------------------------------------------------
var element = document.getElementById("my_element_0");
var element0 = ElementGetFlashPlayerElement(element);
var element = document.getElementById("my_element_1");
var element1 = ElementGetFlashPlayerElement(element);
var element = document.getElementById("my_element_2");
var element2 = ElementGetFlashPlayerElement(element);
var element = document.getElementById("my_element_3");
var element3 = ElementGetFlashPlayerElement(element);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
alert(element0);
alert(element1);
alert(element2);
alert(element3);
//-->
</script>
</body>
</html>
■Flash Player の要素の機能一覧
HTMLEmbedElement と HTMLObjectElement オブジェクトから利用できる機能一覧です。
HTMLElement の機能も利用できます。
■プロパティ
| プロパティ名 | 型 | 説明 |
| width | String | 要素の幅を、ピクセル値指定で設定する |
| height | String | 要素の高さを、ピクセル値指定で設定する |
| type | String | ファイルのコンテンツタイプを設定する |
■Variable() メソッド（Flash Player 専用）
| プロパティ名 | 説明 |
| GetVariable() | 変数名を指定して、Flash から変数値を取得する |
| SetVariable() | 変数名を指定して、Flash に変数値をセットする |
Flash から JavaScript を実行する
■fscommand() 関数について (Flash 3 以降の場合)
Flash から、JavaScript 側の XXX__DoFSCommand() 関数を実行するには、fscommand() 関数を使用します。
■ HTML 側を FSCommand に対応する
■ユニーク（唯一）な名前を１つ付ける
まず、ユニーク（唯一）な名前を１つ付けます。
ここでは、"MYFLASH" とします。
名前に『 . - + * / \ 』記号を含める事はできません。
■ FSCommand をサポートする HTML 文書を生成する
Adobe Flash の「パブリッシュ設定」を開きます。
「HTMLのテンプレート」を「Flash（FSCommand サポート）」に設定して、HTML ファイルを出力します。
以下の HTML 文書の、MYFLASH という部分に注目します。
この部分を、すべて同一となるユニークな名前に変更します。
「XXX__DoFSCommand() 関数の接頭部分」、「<OBJECT> タグの id 属性」、「<EMBED> タグの name 属性」など
FSCommand をサポートする HTML
<html>
<body>
<script language="JavaScript">
<!--
// ------------------------------------------------------------
// FSCommand メッセージを処理する関数
// ------------------------------------------------------------
function MYFLASH_DoFSCommand(command, args) {
//
// ActionScript から、この関数が実行される
//
}
// ------------------------------------------------------------
// 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 MYFLASH_FSCommand(ByVal command, ByVal args)\n');
document.write(' Call MYFLASH_DoFSCommand(command, args)\n');
document.write('End Sub\n');
document.write('</script\>\n');
}
//-->
</script>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="MYFLASH" width="550" height="400" >
<param name="movie" value="test.swf" />
<embed src="test.swf" type="application/x-shockwave-flash" id="MYFLASH" name="MYFLASH" swLiveConnect=true width="550" height="400" />
</object>
</body>
</html>
■ <EMBED> タグの swLiveConnect 属性について
<EMBED> タグの swLiveConnect 属性は、Netscape 6.2 未満の環境で必要となるようです。
swLiveConnect 属性を true に変更すると、Java が起動するようです。
■ グローバルな XXX_DoFSCommand() 関数について
Flash からは、唯一この関数を呼び出す事ができます。
関数名の後尾にあたる "_DoFSCommand" は、別の名前に変更する事はできません。
第01引数から、コマンド情報が得られます。
第02引数から、ユーザーデータが得られます。
戻り値は対応していません。
■ Flash 側から fscommand() 関数を実行する
ActionScript から、JavaScript 側にある XXX_DoFSCommand() 関数を実行するには、fscommand() 関数を使用します。
この関数は、同期実行です。
JavaScript 側の処理が終わるまでは、制御が返りません。
fscommand ( "コマンド情報" , "ユーザーデータ" ) :Void
| 第01引数 | String | コマンド情報を指定 |
| 第02引数 | String | ユーザー情報を指定 |
| 戻り値 | Void | なし。JavaScript から結果を得る事はできません。 |
■第01引数 （コマンド情報）
好きなコマンド情報を指定します。
以下のコマンド名は、別の機能が割り当てられているので使用できません。
使用できないコマンド名
"quit", "fullscreen", "allowscale", "showmenu", "exec", "trapallkeys"
■第02引数 （ユーザーデータ）
好きなユーザーデータを指定します。
指定可能なデータは、文字列型のみである事に注意してください。
もし Object 型などを渡したい場合、JSON などを利用して変換します。
■ JavaScript 実行のセキュリティについて
デフォルトの場合、ローカル環境では動作しません。
動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。
JavaScript 実行のセキュリティについては、こちらで解説しています。
■クロスドメインスクリプトについて
HTML 文書と Flash が、別々のドメイン下に格納されている場合、動作しません。
制限は解除する事もできます。（リスクに注意）
■デバッグについて
ブラウザ付属のデバッガを使用すると、JavaScript の動作が確認できます。
■文字コードについて
Flash 5 以前の場合、ロケールな言語で動作します。
日本語圏では Shift-JIS となり、全角文字を含める事はできません。
Flash 6 以降であれば、Unicode に対応しています。
■戻り値について
fscommand() 関数は、戻り値に対応していません。
fscommand() 関数を使って、JavaScript から、結果を得る事はできません。
■ FSCommand の使用例
■ HTML 側の実装例
switch 文を使ってコマンドごとに処理を分ける
<html>
<body>
<script language="JavaScript">
<!--
// ------------------------------------------------------------
// FSCommand メッセージを処理する関数
// ------------------------------------------------------------
function MYFLASH_DoFSCommand(command, args) {
// ------------------------------------------------------------
// switch 文を使ってコマンドごとに処理を分ける
// ------------------------------------------------------------
switch(command){
// ------------------------------------------------------------
// コマンド "cmd_000" の処理
// ------------------------------------------------------------
case "cmd_000":
break;
// ------------------------------------------------------------
// コマンド "cmd_001" の処理
// ------------------------------------------------------------
case "cmd_001":
break;
// ------------------------------------------------------------
// コマンド "cmd_002" の処理
// ------------------------------------------------------------
case "cmd_002":
break;
}
// 出力テスト
alert("command:" + command + " args:" + 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 MYFLASH_FSCommand(ByVal command, ByVal args)\n');
document.write(' Call MYFLASH_DoFSCommand(command, args)\n');
document.write('End Sub\n');
document.write('</script\>\n');
}
//-->
</script>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="MYFLASH" width="550" height="400" >
<param name="movie" value="test.swf" />
<embed src="test.swf" type="application/x-shockwave-flash" id="MYFLASH" name="MYFLASH" swLiveConnect=true width="550" height="400" />
</object>
</body>
</html>
■ Flash 側の実装例
JavaScript 側にメッセージを送信する
// ------------------------------------------------------------
// コマンド "cmd_000" を送信する
// ------------------------------------------------------------
fscommand( "cmd_000" , '{"name":"taro","age":18,"blood":"b"}' );
// ------------------------------------------------------------
// コマンド "cmd_001" を送信する
// ------------------------------------------------------------
fscommand( "cmd_001" , '{"name":"hanako","age":16,"blood":"o"}' );
■getURL() 関数について (Flash 4 以降の場合)
JavaScript の URL scheme を実行するには、getURL() 関数を使用します。
getURL ( "URL" , "ウィンドウ名" , "HTTPメソッド" ) :Void
| 第01引数 | String | URL アドレスを指定 |
| 第02引数(略可) | String | ターゲットとなるウィンドウ名を指定 |
| 第03引数(略可) | String | HTTPメソッドを指定。例えば、"GET" や "POST" |
| 戻り値 | Void | なし。JavaScript から結果を得る事はできません。 |
■第01引数 （URL アドレス）
JavaScript の URL scheme を指定します。
まず、「javascript:」 と記述します。
続けてJavaScript のコードを記述します。
総文字数は 508 字以内に収める必要があります。
■ JavaScript 実行のセキュリティについて
デフォルトの場合、ローカル環境では動作しません。
動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。
JavaScript 実行のセキュリティについては、こちらで解説しています。
■クロスドメインスクリプトについて
HTML 文書と Flash が、別々のドメイン下に格納されている場合、動作しません。
制限は解除する事もできます。（リスクに注意）
■文字コードについて
Flash 5 以前の場合、ロケールな言語で動作します。
日本語圏では Shift-JIS となり、全角文字を含める事はできません。
Flash 6 以降であれば、Unicode に対応しています。
■getURL() 関数の実行について
getURL() 関数は、非同期実行です。
JavaScript のコードを、分割して実行する場合はご注意ください。
直前に実行した JavaScript の処理が完了しているとは限りません。
■使用例
アラート関数を呼び出す
// ------------------------------------------------------------
// JavaScript の URL scheme 文字列を用意する
// ------------------------------------------------------------
var js_scheme = 'javascript: alert( "Hello World !!" );';
// ------------------------------------------------------------
// JavaScript の URL scheme を実行する
// ------------------------------------------------------------
getURL(js_scheme);
グローバル空間に MyFunc 関数を生成する
// ------------------------------------------------------------
// JavaScript の URL scheme 文字列を用意する
// ------------------------------------------------------------
var js_scheme = 'javascript:' +
'window.MyFunc = function(param){' +
'alert(param);' +
'};' +
'void(0);';
// ------------------------------------------------------------
// JavaScript の URL scheme を実行する
// ------------------------------------------------------------
getURL(js_scheme);
グローバル空間に存在する MyFunc 関数を実行する
// ------------------------------------------------------------
// JavaScript の URL scheme 文字列を用意する
// ------------------------------------------------------------
var js_scheme = 'javascript:window.MyFunc("Hello World !!");';
// ------------------------------------------------------------
// JavaScript の URL scheme を実行する
// ------------------------------------------------------------
getURL(js_scheme);
JavaScript から Flash にアクセスする
■Variable() メソッドを使用する (Flash 4 以降の場合)
■Flash Player の要素を取得する
Flash Player の要素を取得する方法については、こちらで解説しています。
■Variable() メソッド一覧
| プロパティ名 | 説明 |
| GetVariable() | 変数名を指定して、Flash から変数値を取得する |
| SetVariable() | 変数名を指定して、Flash に変数値をセットする |
■Variable() メソッド実行の注意点
Variable() メソッドは、すぐに実行可能だとは限りません。
Flash 側の準備が整ってから、メソッドを呼び出します。
■ JavaScript 実行のセキュリティについて
デフォルトの場合、ローカル環境では動作しません。
動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。
JavaScript 実行のセキュリティについては、こちらで解説しています。
■クロスドメインスクリプトについて
HTML 文書と Flash が、別々のドメイン下に格納されている場合、動作しません。
制限は解除する事もできます。（リスクに注意）
■文字コードについて
Flash 5 以前の場合、ロケールな言語で動作します。
日本語圏では Shift-JIS となり、全角文字を含める事はできません。
Flash 6 以降であれば、Unicode に対応しています。
■GetVariable() メソッドについて
Flash 内の、任意の変数値を取得するには、GetVariable() メソッドを使用します。
結果は、文字列型に変換されます。
Element.GetVariable ( "変数名" ) :String
| 第01引数 | String | 取得したい変数名を指定。例えば、"_root.aaa.bb.variable" "_level0.variable" など |
| 戻り値 | String | 該当する変数値が、文字列型で得られる |
■ HTML 側の実装例
ボタンをクリックして Flash から変数値を取得する
<html>
<head>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ID 属性から Flash Player の要素を取得する関数
// ------------------------------------------------------------
function DocumentGetFlashPlayerElementById(document_obj,id){
var element = document_obj.getElementById(id);
if(!element) return null;
if(document_obj.documentMode) return element;
var nodes = element.getElementsByTagName("embed");
if(nodes.length){
return nodes[nodes.length-1];
}
var nodes = element.getElementsByTagName("object");
if(nodes.length){
return nodes[nodes.length-1];
}
return element;
}
//-->
</script>
</head>
<body>
<br>─── EMBED 要素 ───<br>
<embed type="application/x-shockwave-flash" id="my_element" src="test.swf" width="550" height="400" />
<br>─── コントロール ───<br>
変数名 : <input type="input" id="input_name" value="_root.external_value" > <br>
変数値 : <input type="input" id="input_value" value="" > <br>
<input type="button" id="input_button" value="値を取得" >
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ID 属性から 各要素を取得する
// ------------------------------------------------------------
var input_name = document.getElementById("input_name");
var input_value = document.getElementById("input_value");
var input_button = document.getElementById("input_button");
// ------------------------------------------------------------
// ID 属性から Flash Player の要素を取得する
// ------------------------------------------------------------
var element = DocumentGetFlashPlayerElementById(document,"my_element");
// ------------------------------------------------------------
// クリックしたときに実行されるイベント
// ------------------------------------------------------------
input_button.onclick = function(){
// 入力コントロールから変数名を取得する
var name = input_name.value;
// 変数名を指定して、Flash 内の変数値を取得する
var value = element.GetVariable(name);
// 入力コントロールに値をセットする
input_value.value = value;
};
//-->
</script>
</body>
</html>
■ Flash 側の実装例
変数を用意する
// 変数を用意する
_root.external_value = "Hello World !!";
■SetVariable() メソッドについて
Flash 内の、任意の変数値を設定するには、SetVariable() メソッドを使用します。
変数値は、文字列型に変換されます。
Element.SetVariable ( "変数名" , "変数値" ) :Void
| 第01引数 | String | 設定したい変数名を指定。例えば、"_root.aaa.bb.variable" "_level0.variable" など |
| 第01引数 | String | 設定したい変数値を指定。文字列型に変換される。 |
| 戻り値 | Void | なし |
■ HTML 側の実装例
ボタンをクリックして Flash に変数値を設定する
<html>
<head>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ID 属性から Flash Player の要素を取得する関数
// ------------------------------------------------------------
function DocumentGetFlashPlayerElementById(document_obj,id){
var element = document_obj.getElementById(id);
if(!element) return null;
if(document_obj.documentMode) return element;
var nodes = element.getElementsByTagName("embed");
if(nodes.length){
return nodes[nodes.length-1];
}
var nodes = element.getElementsByTagName("object");
if(nodes.length){
return nodes[nodes.length-1];
}
return element;
}
//-->
</script>
</head>
<body>
<br>─── EMBED 要素 ───<br>
<embed type="application/x-shockwave-flash" id="my_element" src="test.swf" width="550" height="400" />
<br>─── コントロール ───<br>
変数名 : <input type="input" id="input_name" value="_level0.text_field.text" > <br>
変数値 : <input type="input" id="input_value" value="Hello World !!" > <br>
<input type="button" id="input_button" value="値を取得" >
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ID 属性から 各要素を取得する
// ------------------------------------------------------------
var input_name = document.getElementById("input_name");
var input_value = document.getElementById("input_value");
var input_button = document.getElementById("input_button");
// ------------------------------------------------------------
// ID 属性から Flash Player の要素を取得する
// ------------------------------------------------------------
var element = DocumentGetFlashPlayerElementById(document,"my_element");
// ------------------------------------------------------------
// クリックしたときに実行されるイベント
// ------------------------------------------------------------
input_button.onclick = function(){
// 入力コントロールから変数名を取得する
var name = input_name.value;
// 入力コントロールから変数値を取得する
var value = input_value.value;
// 変数名を指定して、Flash 内の変数値を設定する
element.SetVariable(name,value);
};
//-->
</script>
</body>
</html>
■ Flash 側の実装例
テキストフィールドを用意する
// ------------------------------------------------------------
// テキストフィールド
// ------------------------------------------------------------
// テキストフィールドオブジェクトを作成し、_root に配置する
_root.createTextField("text_field",1,10,10,Stage.width-20,Stage.height-20);
// テキストフィールドの参照を取得
var tf = _root.text_field;
// 枠線を表示
tf.border = true;
External API について
■External API について (Flash 8 以降の場合)
Flash と JavaScript を相互に連携するには、External API を使用します。
ブラウザを問わず、統一された動作を行う事ができます。
■External API が利用可能か調べる
External API が利用可能か調べるには、ExternalInterface.available プロパティを使用します。
可能であれば true が得られます。
External API が利用可能か調べる (AS1.0)
// ------------------------------------------------------------
// テキストフィールド
// ------------------------------------------------------------
// テキストフィールドオブジェクトを作成し、_root に配置する
_root.createTextField("text_field",1,10,10,Stage.width-20,Stage.height-20);
// テキストフィールドの参照を取得
var tf = _root.text_field;
// 入力可能
tf.type = "input";
// 枠線を表示
tf.border = true;
// ------------------------------------------------------------
// External API が利用可能か調べる
// ------------------------------------------------------------
tf.text = "External API : " + flash.external.ExternalInterface.available;
External API が利用可能か調べる (AS2.0)
import flash.external.ExternalInterface;
// ------------------------------------------------------------
// テキストフィールド
// ------------------------------------------------------------
// テキストフィールドオブジェクトを作成し、_root に配置する
_root.createTextField("text_field",1,10,10,Stage.width-20,Stage.height-20);
// テキストフィールドの参照を取得
var tf:TextField = _root.text_field;
// 入力可能
tf.type = "input";
// 枠線を表示
tf.border = true;
// ------------------------------------------------------------
// External API が利用可能か調べる
// ------------------------------------------------------------
tf.text = "External API : " + ExternalInterface.available;
■Flash から JavaScript 側の関数を実行する
Flash から、JavaScript 側のグローバルな関数を実行する事ができます。
JavaScript からデータを得る事もできます。
■JavaScript 側でグローバルな関数を用意する
JavaScript 側でグローバルな関数を用意します。
ここでは、MyJavaScriptFunc() と名前を付けます。
JavaScript の関数については、こちらで解説しています。
■コールバック関数の仕様について
引数は、可変引数です。
Flash から送られてくるデータを得る事ができます。
戻り値から、Flash にデータを渡す事ができます。
Boolean、Number、String、Array、Object 型のデータを送受信できます。
参照データは、複製されます。
■作成例
グローバルな関数を静的に用意する
<html>
<head>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// グローバルな関数を静的に用意する
// ------------------------------------------------------------
function MyJavaScriptFunc(args){
// 出力テスト（Flash から得られるデータ）
alert(args);
// 任意のデータを返す（Flash にデータを渡す）
return {};
}
//-->
</script>
</head>
<body>
<embed type="application/x-shockwave-flash" src="test.swf" width="550" height="400" />
</body>
</html>
グローバルな関数を動的に用意する
<html>
<head>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// グローバルな関数を動的に用意する（Window オブジェクトのプロパティに追加する）
// ------------------------------------------------------------
window.MyJavaScriptFunc = function (args){
// 出力テスト（Flash から得られるデータ）
alert(args);
// 任意のデータを返す（Flash にデータを渡す）
return {};
};
//-->
</script>
</head>
<body>
<embed type="application/x-shockwave-flash" src="test.swf" width="550" height="400" />
</body>
</html>
■Flash から JavaScript 側の関数を実行する
Flash から JavaScript 側の関数を実行するには、ExternalInterface.call() メソッドを使用します。
この関数は、同期実行です。
JavaScript 側の処理が終わるまでは、制御が返りません。
ExternalInterface.call ( "JavaScript側の関数名" , ... ) :Object
| 第01引数 | String | JavaScript 側の関数名を指定（Window オブジェクトのメソッド名でも可能） |
| 可変引数(略可) | Object | JavaScript 側に送るデータを指定 |
| 戻り値 | Object | JavaScript 側からの返信データが得られる。失敗した場合 null |
■可変引数 （JavaScript 側に送るデータ）
可変引数を使って、JavaScript 側に送るデータを指定します。
Boolean、Number、String、Array、Object 型のデータを指定できます。
参照データは、複製されます。
■戻り値 （JavaScript 側からの返信データ）
戻り値から、JavaScript から返信されるデータが得られます。
Boolean、Number、String、Array、Object 型のデータを指定できます。
参照データは、複製されます。
■ JavaScript 実行のセキュリティについて
デフォルトの場合、ローカル環境では動作しません。
動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。
JavaScript 実行のセキュリティについては、こちらで解説しています。
■クロスドメインスクリプトについて
HTML 文書と Flash が、別々のドメイン下に格納されている場合、動作しません。
制限は解除する事もできます。（リスクに注意）
■デバッグについて
ブラウザ付属のデバッガを使用すると、JavaScript の動作が確認できます。
■ ExternalInterface.call() メソッドの使用例
■ HTML 側の実装例
MyJavaScriptFunc() 関数を用意する
<html>
<head>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// グローバルな MyJavaScriptFunc() 関数を用意する
// ------------------------------------------------------------
window.MyJavaScriptFunc = function (request_obj){
// ------------------------------------------------------------
// 出力テスト（Flash から得られるデータ）
// ------------------------------------------------------------
alert(request_obj.message);
// ------------------------------------------------------------
// 返信データを用意する
// ------------------------------------------------------------
var receive_obj = {
message:"返信テスト",
param:{}
};
// ------------------------------------------------------------
// Flash にデータを返す
// ------------------------------------------------------------
return receive_obj;
}
//-->
</script>
</head>
<body>
<embed type="application/x-shockwave-flash" src="test.swf" width="550" height="400" />
</body>
</html>
■ Flash 側の実装例
JavaScript 側の MyJavaScriptFunc() 関数を実行し、結果を得る (AS1.0)
// ------------------------------------------------------------
// テキストフィールド
// ------------------------------------------------------------
// テキストフィールドオブジェクトを作成し、_root に配置する
_root.createTextField("text_field",1,10,10,Stage.width-20,Stage.height-20);
// テキストフィールドの参照を取得
var tf = _root.text_field;
// 入力可能
tf.type = "input";
// 枠線を表示
tf.border = true;
// ------------------------------------------------------------
// 送信データを用意する
// ------------------------------------------------------------
var request_obj = {
message:"送信テスト",
param:{}
};
// ------------------------------------------------------------
// JavaScript 側の MyJavaScriptFunc 関数を実行し、結果を得る
// ------------------------------------------------------------
var response_obj = flash.external.ExternalInterface.call("MyJavaScriptFunc" , request_obj);
// ------------------------------------------------------------
// 返信データを表示
// ------------------------------------------------------------
tf.text = response_obj.message;
JavaScript 側の MyJavaScriptFunc 関数を実行し、結果を得る (AS2.0)
import flash.external.ExternalInterface;
// ------------------------------------------------------------
// テキストフィールド
// ------------------------------------------------------------
// テキストフィールドオブジェクトを作成し、_root に配置する
_root.createTextField("text_field",1,10,10,Stage.width-20,Stage.height-20);
// テキストフィールドの参照を取得
var tf:TextField = _root.text_field;
// 入力可能
tf.type = "input";
// 枠線を表示
tf.border = true;
// ------------------------------------------------------------
// 送信データを用意する
// ------------------------------------------------------------
var request_obj:Object = {
message:"送信テスト",
param:{}
};
// ------------------------------------------------------------
// JavaScript 側の MyJavaScriptFunc 関数を実行し、結果を得る
// ------------------------------------------------------------
var response_obj:Object = ExternalInterface.call("MyJavaScriptFunc" , request_obj);
// ------------------------------------------------------------
// 返信データを表示
// ------------------------------------------------------------
tf.text = response_obj.message;
■JavaScript から Flash 側の関数を実行する
JavaScript から、Flash 側で公開された関数を実行する事ができます。
Flash からデータを得る事もできます。
■Flash 側で関数を外部に公開する
Flash にて、関数を外部に公開するには、ExternalInterface.addCallback() メソッドを使用します。
ここでは、MyFlashFunc と名前を付けます。
ExternalInterface.addCallback ( "識別名" , thisのアクセス先 , 関数 ) :Boolean
| 第01引数 | Function | 外部に公開する識別名（JavaScript 側の要素のメソッド名となる） |
| 第02引数 | Object | コールバック関数内で this 演算子に該当するオブジェクトを指定。 |
| 第03引数 | Function | コールバック関数を指定 |
| 戻り値 | Boolean | 成功した場合 true。セキュリティなどが原因で失敗した場合 false が得られる。 |
■第03引数 （コールバック関数）
引数は、可変引数です。
JavaScript から送られてくるデータを得る事ができます。
戻り値から、JavaScript にデータを渡す事ができます。
Boolean、Number、String、Array、Object 型のデータを送受信できます。
参照データは、複製されます。
■関数の公開を中止する
関数の公開を中止するには、再度 addCallback() メソッドを使用します。
第03引数に、ダミーの関数を指定して上書きします。
■作成例
外部に関数を公開する (AS1.0)
// ------------------------------------------------------------
// コールバック関数を用意する
// ------------------------------------------------------------
var callback = function (args) {
// 出力テスト（JavaScript から得られるデータ）
trace(args);
// 任意のデータを返す（JavaScript にデータを渡す）
return {};
};
// ------------------------------------------------------------
// 外部に関数を公開する（メソッド名は、"MyFlashFunc" とする ）
// ------------------------------------------------------------
var result = flash.external.ExternalInterface.addCallback("MyFlashFunc" , null , callback);
// 出力テスト
trace(result);
// ------------------------------------------------------------
// 公開を終了する（第03引数にダミー関数を指定）
// ------------------------------------------------------------
// flash.external.ExternalInterface.addCallback("MyFlashFunc" , null , new Function());
外部に関数を公開する (AS2.0)
import flash.external.ExternalInterface;
// ------------------------------------------------------------
// コールバック関数を用意する
// ------------------------------------------------------------
var callback:Function = function (args:Object):Object {
// 出力テスト（JavaScript から得られるデータ）
trace(args);
// 任意のデータを返す（JavaScript にデータを渡す）
return {};
};
// ------------------------------------------------------------
// 外部に関数を公開する（メソッド名は、"MyFlashFunc" とする ）
// ------------------------------------------------------------
var result:Boolean = ExternalInterface.addCallback("MyFlashFunc" , null , callback);
// 出力テスト
trace(result);
// ------------------------------------------------------------
// 公開を終了する（第03引数にダミー関数を指定）
// ------------------------------------------------------------
// ExternalInterface.addCallback("MyFlashFunc" , null , new Function());
■JavaScript から Flash 側の関数を実行する
■Flash Player の要素を取得する
Flash Player の要素を取得する方法については、こちらで解説しています。
■JavaScript から Flash 側の関数を実行する
外部に公開された関数は、Flash Player の要素に、メソッドとして追加されています。
この公開メソッドは、同期実行です。
Flash 側の処理が終わるまでは、制御が返りません。
■メソッドの可変引数 （Flash 側に送るデータ）
可変引数を使って、Flash 側に送るデータを指定します。
Boolean、Number、String、Array、Object 型のデータを指定できます。
参照データは、複製されます。
■メソッドの戻り値 （Flash 側からの返信データ）
戻り値から、Flash から返信されるデータが得られます。
Boolean、Number、String、Array、Object 型のデータを指定できます。
参照データは、複製されます。
■ JavaScript 実行のセキュリティについて
デフォルトの場合、ローカル環境では動作しません。
動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。
JavaScript 実行のセキュリティについては、こちらで解説しています。
■クロスドメインスクリプトについて
HTML 文書と Flash が、別々のドメイン下に格納されている場合、動作しません。
制限は解除する事もできます。（リスクに注意）
■ ExternalInterface.addCallback() メソッドの使用例
■ Flash 側の実装例
外部に MyFlashFunc 関数を公開する (AS1.0)
// ------------------------------------------------------------
// テキストフィールド
// ------------------------------------------------------------
// テキストフィールドオブジェクトを作成し、_root に配置する
_root.createTextField("text_field",1,10,10,Stage.width-20,Stage.height-20);
// テキストフィールドの参照を取得
var tf = _root.text_field;
// 入力可能
tf.type = "input";
// 枠線を表示
tf.border = true;
// ------------------------------------------------------------
// コールバック関数を用意する
// ------------------------------------------------------------
var callback = function (request_obj) {
// ------------------------------------------------------------
// 出力テスト（JavaScript から得られるデータ）
// ------------------------------------------------------------
tf.text = request_obj.message;
// ------------------------------------------------------------
// 返信データを用意する
// ------------------------------------------------------------
var receive_obj = {
message:"返信テスト",
param:{}
};
// ------------------------------------------------------------
// JavaScript にデータを返す
// ------------------------------------------------------------
return receive_obj;
};
// ------------------------------------------------------------
// 外部に関数を公開する（メソッド名は、"MyFlashFunc" とする ）
// ------------------------------------------------------------
var result = flash.external.ExternalInterface.addCallback("MyFlashFunc" , null , callback);
// 出力テスト
tf.text = "addCallback : " + result;
外部に MyFlashFunc 関数を公開する (AS2.0)
import flash.external.ExternalInterface;
// ------------------------------------------------------------
// テキストフィールド
// ------------------------------------------------------------
// テキストフィールドオブジェクトを作成し、_root に配置する
_root.createTextField("text_field",1,10,10,Stage.width-20,Stage.height-20);
// テキストフィールドの参照を取得
var tf:TextField = _root.text_field;
// 入力可能
tf.type = "input";
// 枠線を表示
tf.border = true;
// ------------------------------------------------------------
// コールバック関数を用意する
// ------------------------------------------------------------
var callback:Function = function (request_obj:Object):Object {
// ------------------------------------------------------------
// 出力テスト（JavaScript から得られるデータ）
// ------------------------------------------------------------
tf.text = request_obj.message;
// ------------------------------------------------------------
// 返信データを用意する
// ------------------------------------------------------------
var receive_obj:Object = {
message:"返信テスト",
param:{}
};
// ------------------------------------------------------------
// JavaScript にデータを返す
// ------------------------------------------------------------
return receive_obj;
};
// ------------------------------------------------------------
// 外部に関数を公開する（メソッド名は、"MyFlashFunc" とする ）
// ------------------------------------------------------------
var result:Boolean = ExternalInterface.addCallback("MyFlashFunc" , null , callback);
// 出力テスト
tf.text = "addCallback : " + result;
■ HTML 側の実装例
Flash 側にて公開された、MyFlashFunc() 関数を実行する
<html>
<head>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ID 属性から Flash Player の要素を取得する関数
// ------------------------------------------------------------
function DocumentGetFlashPlayerElementById(document_obj,id){
var element = document_obj.getElementById(id);
if(!element) return null;
if(document_obj.documentMode) return element;
var nodes = element.getElementsByTagName("embed");
if(nodes.length){
return nodes[nodes.length-1];
}
var nodes = element.getElementsByTagName("object");
if(nodes.length){
return nodes[nodes.length-1];
}
return element;
}
//-->
</script>
</head>
<body>
<br>─── OBJECT(ActiveX) と EMBED 要素 ───<br>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="my_element" width="550" height="400">
<param name="movie" value="test.swf" />
<embed type="application/x-shockwave-flash" src="test.swf" width="550" height="400" />
</object>
<br>─── コントロール ───<br>
<input type="button" id="input_button" value="値を取得" > <br>
結果 : <input type="input" id="input_result" >
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ID 属性から 各要素を取得する
// ------------------------------------------------------------
var input_button = document.getElementById("input_button");
var input_result = document.getElementById("input_result");
// ------------------------------------------------------------
// ID 属性から Flash Player の要素を取得する
// ------------------------------------------------------------
var element = DocumentGetFlashPlayerElementById(document,"my_element");
// ------------------------------------------------------------
// クリックしたときに実行されるイベント
// ------------------------------------------------------------
input_button.onclick = function (e){
// ------------------------------------------------------------
// 公開関数が存在するか
// ------------------------------------------------------------
if(!(element)) return;
if(!(element.MyFlashFunc)) return;
// ------------------------------------------------------------
// 送信データを用意する
// ------------------------------------------------------------
var request_obj = {
message:"送信テスト",
param:{}
};
// ------------------------------------------------------------
// Flash 側の MyFlashFunc 関数を実行し、結果を得る
// ------------------------------------------------------------
var response_obj = element.MyFlashFunc(request_obj);
// ------------------------------------------------------------
// 返信データを表示
// ------------------------------------------------------------
input_result.value = response_obj.message;
};
//-->
</script>
</body>
</html>