JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル Firefox & Safari

JavaScriptからActionScriptの関数を呼び出す最も簡単なサンプルをご紹介します。

盛りだくさんになりそうなので、最初に全体構成を示しておきます。

1. はじめに
2. 環境を整える
3. ActionScriptの中身
4. HTMLでSWFファイルを読込む
5. JavaScriptからActionScriptの関数を呼び出す
6. おわりに

Flexがオープンソース化され、より気軽にFlashプログラミングが楽しめるようになりました。今までFlashと言えばムービーやゲームなどリッチコンテンツのイメージで、ActionScriptとはそれらにインタラクティブな機能を実装するためのモノでした。

でもActionScriptはそれ単体でも面白いのです。例えば、

• IMEのON/OFFを操作をしたり
• クロスドメイン通信ができたり
• インストール済みフォント一覧を表示したり
• 画像フィルタを適用できたり
• mp3ファイルの再生ができたりします。

ではFlashというインターフェースから解放されたActionScriptをどうやって単体で動かすのでしょう？そう、タイトル通りJavaScriptから呼び出す事が出来るのです。では、JavaScriptとActionScriptを連携させる最も簡単なサンプルをご紹介します。
連携させる方法はFirefoxとSafariが対象です。IEはその方法が大きく異なるので、説明をよりシンプルにするため別のエントリでご紹介します。

環境が整っていないと何も動きません。作業環境と実行環境を整えましょう。

まずは作業環境としてFlexをインストールしましょう。Flexの一機能であるActionScript3.0コンパイラを利用します。
Flexのインストールには以下のサイトが参考になりました。

Macなら「Mac に Flex 2 SDK をインストールする」。
Windowsなら「第２回：実践！Flex 2のインストール」。

インストールと言っても基本的にバイナリファイルをダンロードしてPATHを通すだけです。注意としてはダウンロードしたディレクトリ構成を変更しないことです。
私はbinディレクトリの中身だけが必要だと思い、その他を捨ててしまったのですが、ActionScriptコンパイラはJavaで実装されているようで、外部ライブラリを利用しているため、binディレクトリ以外も必要なようです。

もう１つ、実行環境を整えます。
今回はActionScript3.0を利用しますので、ブラウザで動かすにはFlash9 Playerが必要です。Adobeからダウンロードしてインストールして下さい。

これで環境整備は完了です。

今回は最もシンプルなActionScriptのサンプルを示します。機能は単純。関数を呼び出すと「Hello, JavaScript. This is AS3.0.」という文字列を返します。
ではサンプルプログラムをどうぞ。

package {
  import flash.display.Sprite;
  import flash.external.ExternalInterface;
 
  public class Test extends Sprite {
    function Test() {
      ExternalInterface.addCallback("callFlash", hello);
    }
 
    public function hello():String{
      return "Hello, JavaScript. This is AS3.0";
    }
  }
}

このファイル名は必ずclass名のTestを使って「Test.as」として下さい。それがルールです。

ActionScript3.0はJavaプログラミングをした事のある人なら何となく分かるような構文規則になってますが、とりあえず説明をします。

package {...}

ActionScript3.0はプログラム全体をpackage化する必要があります。パッケージ名を指定して、

package adamrocker {...}

とすることも可能です。Javaと同じく、世界でたった１つだけのパッケージ名とするよう、ドメイン名にするのが多いみたいです。

今回は2つのライブラリを利用します。

import flash.display.Sprite;
import flash.external.ExternalInterface;

Javaと同じくimportで読込みます。

クラスを定義します。

public class Test extends Sprite {...}

publicにしないとpackage外からアクセスできません。
Spriteクラスを継承しているのは、ActionScriptだけをコンパイルしてSWFファイルを作るときには必ず継承しなければならないためです。

コンストラクタ内でActionScriptと外部関数（今回はJavaScript）を連結します。

function Test() {
  ExternalInterface.addCallback("callFlash", hello);
}

ExternalInterfaceのaddCallback関数は第1引数は外部関数から呼び出す関数名を指定し、第2引数は実行されるActionScript関数名を指定します。簡単に言うと、JavaScriptからcallFlashという関数を呼び出すとActionScriptのhello関数が実行されます。

hello関数の中身を記述します。

public function hello():String{
  return "Hello, JavaScript. This is AS3.0";
}

hello関数の機能は「Hello, JavaScript. This is AS3.0」という文字列を返します。

それでは、ActionScriptプログラムをコンパイルしてSWFファイルを作成します。

コンパイルが成功すると「Test.swf」というファイルが作成されます。
このSWFファイルをHTMLで読込みJavaScriptで利用します。

JavaScriptでActionScriptを利用するため、HTML内でSWFを読込んでおきます。
Dreamwaver等では非常に複雑なHTMLを生成するようですが、FirefoxとSafariにブラウザを限定し、ActionScriptだけで構成されるSWFと制限を付けると実はとても簡単にSWFファイルを読込めます。

<embed src="Test.swf" name="as" allowScriptAccess="always"/>

なんとこれだけです。とても簡単ですね。

embedタグでオブジェクトを埋め込みます。

<embed ... />

embedタグの詳細については「HTMLリファレンス-オブジェクトの埋め込み」を参照して下さい。

SWFファイルをsrcで読込みます。

src="Test.swf"

絶対パスでも相対パスでも問題ありません。

JavaScriptから利用するためname属性を必ず付けます。

name="as"

nameの値は何でもOKです。他のembedタグのname属性と重複しない名前を設定して下さい。

外部スクリプトからSWFへのアクセスを許可する属性値を設定します。

allowScriptAccess="always"

alwaysは外部スクリプトによるSWFへのアクセス全て許可します。
その他にも、never（外部スクリプトは全て拒否）やsameDomain（同一ドメイン内の外部スクリプトのみ許可）があります。

これだけでSWFファイルをHTMLに埋め込むことができ、JavaScriptから利用できるようになります。

HTMLに埋め込んだSWFファイルをJavaScriptで利用する事でActionScriptの関数を利用できます。
サンプルのActionScriptが「Hello, JavaScript. This is AS3.0」という文字列を返すだけの関数なので、その文字列を受け取りalert表示するJavaScriptをご紹介します。
これもとても簡単なので、気楽にどうぞ。

  var str = document["as"].callFlash();
  alert(str);

たったこれだけです。スゴイ簡単！

FirefoxとSafariではdocumentでHTML内に埋め込まれたSWFオブジェクトにアクセスできます。ここの「”as”」はembedタグのname属性の値です。
そして、ActionScriptで外部スクリプトと連携した関数名「callFlash」でActionScriptの関数の「hello」を呼び出します。hello関数は「Hello, JavaScript. This is AS3.0」という文字列を返してくれるはずなので、それを変数strで受けalertで表示しています。

ではサンプルをどうぞ。


このボタンをクリックすると「Hello, JavaScript. This is AS3.0」というalert表示が表示されるはずです。

ネットで調べてみると複雑だったFlash ActionScriptとJavaScriptとの連携ですが、意外とシンプルに実現できる事が分かりました。
今回はActionScriptが単純でしたが、ActionScriptならではの面白く便利な機能を利用したサービスが続々と出てきてくれる事を期待しています。
では、次回のエントリではIEでFlash ActionScriptとJavaScriptとを連携させる方法をご紹介します。

• JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル IE

• はてなブックマークのブックマーク・コメントを見るブックマークレット
• JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル IE
• 超シンプルなJSONP入門
• はてコ - はてなブックマーク コメント -
• JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル Firefox & Safari
• Google AJAX Feed APIでとても簡単にRSS Readerを作ってみる