Flash/ActionScript

FlashとJavascriptを連携させる!

FlashからJavascriptにシームレスにアクセスする「ExternalInterface」を使用して、ブラウザ名を表示します。

執筆者:渡辺 大介

FlashからJavascriptにシームレスにアクセスする「ExternalInterface」をご紹介します。
完成イメージ
FlashからJavascriptに通信しブラウザの名前を答えます。
Adobe Flash 8 Professionalを使用してサンプルを作成しています。

Javascriptと通信する「ExternalInterface」

FlashとJavascriptの間で通信するには3つの方法があります。

1. 「getURL()」を利用して「getURL('javascript:関数名;')」の形で送信する。
一番簡易的な方法ですが、一部ブラウザではページ遷移を行ったものと解釈されページ内の他のコンテンツに影響を与える場合があります。また別途戻り値を取得する仕組みを用意する必要があります。

2. 「fscommand()を利用外部スクリプトにアクセスする。
主にVBScript等のテクノロジーにアクセスする機能ですが、Flashではセキュリティ制限が厳しく使い所が難しいものです。どちらかと言うとオフラインコンテンツを作成する際に使うべきでしょう。

3. ExternalInterfaceを利用して、外部スクリプトにアクセスする。
Web上の主にJavascriptと通信することを目的に用意されている機能です。比較的モダンなブラウザを要求しますが、引数や戻り値の受け渡しが簡単で今後JavascriptとFlashの通信はこちらを使うことが推奨されています。

今回は「ExternalInterface」について説明していきたいと思います。


FlashからJavascriptの関数を実行する

サンプルの概要
1. サンプルのFlashをここからダウンロードしてください。内部にはJavascriptにアクセスをするためのボタンと実行後にJavascriptからの戻り値を表示するテキストボックスを用意しています。

2. レイヤー「action」の1フレーム目のActionscriptを確認してください。
import flash.external.ExternalInterface;

btn.onRelease = function( {
	retuneText.text = ExternalInterface.call("jsMethod","ブラウザの名前は?");
}
1行目でExternalInterfaceをインポートしています。
2行目からがボタンを押した際に実行される関数です。
3行目は戻り値を表示させるためのテキストボックスにテキストを挿入しています。「ExternalInterface.call("Javascriptの関数名"),"Javascriptに渡す引数")」で、FlashからJavascript上の関数を実行することが出来ます。
このようにJavascriptの関数の実行や戻り値の取得を特に意識せずシンプルに使用することが可能です。

3. 次にHTML上に以下のJavascriptを記述してください。
<script language="JavaScript" type="text/javascript">
function JSMethod(i){
alert(i);
return navigator.appName;
}
</script>
簡単に説明すると「JSMethod」という関数があり、Flashからの引数「ブラウザの名前は?」というアラートウィンドウを表示させます。また、戻り値としてブラウザの情報を返すというシンプルなJavascriptです。

4. 最後にローカル環境で動作チェックするために<object>タグ内の以下の記述を追加してください。
まず<param>タグに以下の記述を追加します。
<param name="allowScriptAccess" value="always" />
次に<embed>内に以下の記述を追加します。
<embed src="comp.swf" allowScriptAccess="always"(以降略)
実行結果
5. 実行結果は図の通りになります。Flash単体ではブラウザ情報は取得出来ませんが、Javascriptの機能を借りれば簡単に取得することが出来ます。

FlashとJavascriptは同じローカルPC上で動作するプログラムです。Javascriptだけでグラフィカルなインターフェイスを作成するのは手間がかかりますし、Flashだけでは出来ない機能も多々あります。そこで、こういったスクリプト間の通信が必要となります。 Flashだけでは難しい部分は積極的にJavascriptと連携して乗り越えていってはいかがでしょうか?
【編集部おすすめの購入サイト】
Amazonで Flash 関連の書籍をチェック!楽天市場で Flash 関連の書籍をチェック!
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます