Flashゲームプログラミング講座 for ActionScript3.0

 

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 の機能も利用できます。
 
■プロパティ
 
プロパティ名説明
widthString要素の幅を、ピクセル値指定で設定する
heightString要素の高さを、ピクセル値指定で設定する
typeStringファイルのコンテンツタイプを設定する
 
 

 

Flash から JavaScript を実行する

 
 


■fscommand() 関数について

 
Flash から、JavaScript 側の XXX__DoFSCommand() 関数を実行するには、fscommand() 関数を使用します。
 

■ HTML 側を FSCommand に対応する

 
■ユニーク(唯一)な名前を1つ付ける
 
まず、ユニーク(唯一)な名前を1つ付けます。
 
ここでは、"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 が、別々のドメイン下に格納されている場合、動作しません。
 
制限は解除する事もできます。(リスクに注意)
 
allowScriptAccess パラメータに、"always" を設定します。
 
クロスドメインスクリプトの許可設定は、不要です。
 
■デバッグについて
 
ブラウザ付属のデバッガを使用すると、JavaScript の動作が確認できます。
 
■戻り値について
 
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 側にメッセージを送信する

import flash.system.fscommand;

// ------------------------------------------------------------
// コマンド "cmd_000" を送信する
// ------------------------------------------------------------
fscommand( "cmd_000" , '{"name":"taro","age":18,"blood":"b"}' );

// ------------------------------------------------------------
// コマンド "cmd_001" を送信する
// ------------------------------------------------------------
fscommand( "cmd_001" , '{"name":"hanako","age":16,"blood":"o"}' );
 
 


■navigateToURL() 関数について

 
JavaScript の URL scheme を実行するには、navigateToURL() 関数を使用します。
 
navigateToURL ( URLRequest , "ウィンドウ名" ) :void
第01引数 URLRequest送信リクエストを指定
第02引数(略可)Stringターゲットとなるウィンドウ名を指定
戻り値 voidなし。JavaScript から結果を得る事はできません。
 
■第01引数 (送信リクエスト)
 
URLRequest コンストラクタの引数に、JavaScript の URL scheme を指定します。
 
まず、「javascript:」 と記述します。
 
続けてJavaScript のコードを記述します。
 
総文字数は 508 字以内に収める必要があります。
 
文字列リテラル内に JavaScript のコードを書く必要があり、エスケープが面倒です。
 
エスケープ変換については、こちらで解説しています。(変換ツール
 
■第02引数 (ターゲットウィンドウ名)
 
省略すると null 値が設定され、動作しなくなります。
 
"_top" や "_self" などを指定します。
 
■ JavaScript 実行のセキュリティについて
 
デフォルトの場合、ローカル環境では動作しません
 
動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。
 
JavaScript 実行のセキュリティについては、こちらで解説しています。
 
■クロスドメインスクリプトについて
 
HTML 文書と Flash が、別々のドメイン下に格納されている場合、動作しません。
 
制限は解除する事もできます。(リスクに注意)
 
allowScriptAccess パラメータに、"always" を設定します。
 
クロスドメインスクリプトの許可設定は、不要です。
 
■navigateToURL() 関数の実行について
 
navigateToURL() 関数は、非同期実行です。
 
JavaScript のコードを、分割して実行する場合はご注意ください。
 
直前に実行した JavaScript の処理が完了しているとは限りません。
 
■使用例
 
アラート関数を呼び出す

import flash.net.navigateToURL;
import flash.net.URLRequest;

// ------------------------------------------------------------
// JavaScript の URL scheme 文字列を用意する
// ------------------------------------------------------------
var js_scheme:String = 'javascript: alert( "Hello World !!" );';

// ------------------------------------------------------------
// URLRequest オブジェクトを作成する
// ------------------------------------------------------------
var url_request:URLRequest = new URLRequest(js_scheme);

// ------------------------------------------------------------
// JavaScript の URL scheme を実行する
// ------------------------------------------------------------
navigateToURL(url_request , "_self");
 
グローバル空間に MyFunc 関数を生成する

import flash.net.navigateToURL;
import flash.net.URLRequest;

// ------------------------------------------------------------
// JavaScript の URL scheme 文字列を用意する
// ------------------------------------------------------------
var js_scheme:String = 'javascript:' +
	'window.MyFunc = function(param){' +
		'alert(param);' +
	'};' +
	'void(0);';

// ------------------------------------------------------------
// URLRequest オブジェクトを作成する
// ------------------------------------------------------------
var url_request:URLRequest = new URLRequest(js_scheme);

// ------------------------------------------------------------
// JavaScript の URL scheme を実行する
// ------------------------------------------------------------
navigateToURL(url_request , "_self");
 
グローバル空間に存在する MyFunc 関数を実行する

import flash.net.navigateToURL;
import flash.net.URLRequest;

// ------------------------------------------------------------
// JavaScript の URL scheme 文字列を用意する
// ------------------------------------------------------------
var js_scheme:String = 'javascript:window.MyFunc("Hello World !!");';

// ------------------------------------------------------------
// URLRequest オブジェクトを作成する
// ------------------------------------------------------------
var url_request:URLRequest = new URLRequest(js_scheme);

// ------------------------------------------------------------
// JavaScript の URL scheme を実行する
// ------------------------------------------------------------
navigateToURL(url_request , "_self");
 


 

JavaScript から Flash にアクセスする

 
 

 

External API について

 
 


■External API について

 
Flash と JavaScript を相互に連携するには、External API を使用します。
 
ブラウザを問わず、統一された動作を行う事ができます。
 

■External API が利用可能か調べる

 
External API が利用可能か調べるには、ExternalInterface.available プロパティを使用します。
 
可能であれば true が得られます。
 
External API が利用可能か調べる

import flash.text.TextField;
import flash.external.ExternalInterface;

// ------------------------------------------------------------
// テキストフィールド
// ------------------------------------------------------------
// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width  = stage.stageWidth  - 20;
text_field.height = stage.stageHeight - 20;
text_field.border = true;
stage.addChild(text_field);

// ------------------------------------------------------------
// External API が利用可能か調べる
// ------------------------------------------------------------
text_field.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側の関数名" , ... ) :*
第01引数 StringJavaScript 側の関数名を指定(Window オブジェクトのメソッド名でも可能)
可変引数(略可)*JavaScript 側に送るデータを指定
戻り値 *JavaScript 側からの返信データが得られる。失敗した場合 null
 
■可変引数 (JavaScript 側に送るデータ)
 
可変引数を使って、JavaScript 側に送るデータを指定します。
 
Boolean、Number、String、Array、Object 型のデータを指定できます。
 
参照データは、複製されます。
 
■戻り値 (JavaScript 側からの返信データ)
 
戻り値から、JavaScript から返信されるデータが得られます。
 
Boolean、Number、String、Array、Object 型のデータを指定できます。
 
参照データは、複製されます。
 
■ JavaScript 実行のセキュリティについて
 
デフォルトの場合、ローカル環境では動作しません
 
動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。
 
JavaScript 実行のセキュリティについては、こちらで解説しています。
 
■クロスドメインスクリプトについて
 
HTML 文書と Flash が、別々のドメイン下に格納されている場合、動作しません。
 
制限は解除する事もできます。(リスクに注意)
 
allowScriptAccess パラメータに、"always" を設定します。
 
クロスドメインスクリプトの許可設定は、不要です。
 
■デバッグについて
 
ブラウザ付属のデバッガを使用すると、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 関数を実行し、結果を得る

import flash.text.TextField;
import flash.external.ExternalInterface;

// ------------------------------------------------------------
// テキストフィールド
// ------------------------------------------------------------
// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width  = stage.stageWidth  - 20;
text_field.height = stage.stageHeight - 20;
text_field.border = true;
stage.addChild(text_field);

// ------------------------------------------------------------
// 送信データを用意する
// ------------------------------------------------------------
var request_obj:Object = {
	message:"送信テスト",
	param:{}
};

// ------------------------------------------------------------
// JavaScript 側の MyJavaScriptFunc 関数を実行し、結果を得る
// ------------------------------------------------------------
var response_obj:Object = ExternalInterface.call("MyJavaScriptFunc" , request_obj);

// ------------------------------------------------------------
// 返信データを表示
// ------------------------------------------------------------
if(response_obj){
	text_field.text = response_obj.message;
}
 
 


■JavaScript から Flash 側の関数を実行する

 
JavaScript から、Flash 側で公開された関数を実行する事ができます。
 
Flash からデータを得る事もできます。
 

■Flash 側で関数を外部に公開する

 
Flash にて、関数を外部に公開するには、ExternalInterface.addCallback() メソッドを使用します。
 
ここでは、MyFlashFunc と名前を付けます。
 
セキュリティなどが原因で登録に失敗した場合、エラーが発生します。
 
ExternalInterface.addCallback ( "識別名" , 関数 ) :void
第01引数 String外部に公開する識別名(JavaScript 側の要素のメソッド名となる)
第02引数 Functionコールバック関数を指定
戻り値 voidなし
 
■第02引数 (コールバック関数)
 
引数は、可変引数です。
 
JavaScript から送られてくるデータを得る事ができます。
 
戻り値から、JavaScript にデータを渡す事ができます。
 
Boolean、Number、String、Array、Object 型のデータを送受信できます。
 
参照データは、複製されます。
 
■関数の公開を中止する
 
関数の公開を中止するには、再度 addCallback() メソッドを使用します。
 
第02引数に、null を指定します。
 
■作成例
 
外部に関数を公開する

import flash.external.ExternalInterface;

// ------------------------------------------------------------
// コールバック関数を用意する
// ------------------------------------------------------------
var callback:Function = function (args:*):* {

	// 出力テスト(JavaScript から得られるデータ)
	trace(args);

	// 任意のデータを返す(JavaScript にデータを渡す)
	return {};
};

try{
	// ------------------------------------------------------------
	// 外部に関数を公開する(メソッド名は、"MyFlashFunc" とする )
	// ------------------------------------------------------------
	ExternalInterface.addCallback("MyFlashFunc" , callback);

	// 公開を終了する(第02引数に null を指定)
	// ExternalInterface.addCallback("MyFlashFunc" , null);

}catch(e:Error){
	// 出力テスト
	console.log(e.message);
}
 

■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 が、別々のドメイン下に格納されている場合、動作しません。
 
制限は解除する事もできます。(リスクに注意)
 
allowScriptAccess パラメータに、"always" を設定します。
 
クロスドメインスクリプトについては、こちらで解説しています。
 

■ ExternalInterface.addCallback() メソッドの使用例

 
■ Flash 側の実装例
 
外部に MyFlashFunc 関数を公開する

import flash.text.TextField;
import flash.external.ExternalInterface;

// ------------------------------------------------------------
// テキストフィールド
// ------------------------------------------------------------
// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width  = stage.stageWidth  - 20;
text_field.height = stage.stageHeight - 20;
text_field.border = true;
stage.addChild(text_field);

// ------------------------------------------------------------
// コールバック関数を用意する
// ------------------------------------------------------------
var callback:Function = function (request_obj:Object):Object {

	// ------------------------------------------------------------
	// 出力テスト(JavaScript から得られるデータ)
	// ------------------------------------------------------------
	text_field.text = request_obj.message;

	// ------------------------------------------------------------
	// 返信データを用意する
	// ------------------------------------------------------------
	var receive_obj:Object = {
		message:"返信テスト",
		param:{}
	};

	// ------------------------------------------------------------
	// JavaScript にデータを返す
	// ------------------------------------------------------------
	return receive_obj;
};

try{
	// ------------------------------------------------------------
	// 外部に関数を公開する(メソッド名は、"MyFlashFunc" とする )
	// ------------------------------------------------------------
	ExternalInterface.addCallback("MyFlashFunc" , callback);

}catch(e:Error){
	// 出力テスト
	text_field.text = e.message;
}
 
■ 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>
 


 

JavaScript 実行のセキュリティについて

 


■ JavaScript 実行のセキュリティについて

 
JavaScript 実行のセキュリティについては、こちらで解説しています。