- 2007-05-28 (月)
- tools
この週末、Wii と Flash を連携させようと勉強していたのだけれど、僕は JavaScript が得意ではないので、いちいち細かい部分をフォローしないと理解できない様子。
皆さんに教えていただいた「Flash / JavaScript Integration kit」も、コードを読んでもすぐに理解なかったので、ダウンロードフォルダ「FlashJavascriptGateway」の docs/readme.html ファイルをちまちま訳しました。
1時間ぐらい readme.html ファイルを読み進めつつ、並行して日本語訳していったので、翻訳の精度はいつも以上に悪いかもしれません。もし読まれるようなら、原文の補助として併読することをおすすめします。
翻訳も完了していませんが、なんとなく分かったので、一応この翻訳作業はここで終了ということで、次のステップに進むことにします。僕の翻訳見るよりググった方が早いかも。
関連:
「JavaScript and Flash Integration Kit」で Google検索
追記:
ヒムカンパニー様が同記事を翻訳&テストなさっておられました。翻訳&信頼性ともに、僕の翻訳とは比べようもなく素晴らしいので、そちら(記事ナンバー62番)を拝見させていただいた方がよさげです。
JavaScript and Flash Integration Kit (Beta)
このプロジェクトについて
JavaScript and Flash Integration Kit を使えば、開発者は Flash と HTML の隔たりを乗り越えて、 JavaScript から ActionScript の関数を実行したり、その逆のこともできるようになります。以下に挙げる、主要なデータ型をやりとりできるようになります:
- objects
- arrays
- strings
- numbers
- dates
- booleans
- nulls
- undefined
さらに、 JavaScript and Flash Integration Kit は主要ブラウザ&プラットフォームで利用できます。(詳細は「動作環境」の項をご覧ください)
最新情報と、最新バージョンのダウンロードファイルは下記アドレスから入手できます:
http://www.macromedia.com/go/flashjavascript
このプロジェクトは Macromedia の Christian Cantrell と Mike Chambers により、発足・運営されています。
インストール方法
JavaScript and Flash Integration Kit のインストールはとても簡単です。「installation」フォルダの中にある JavaScriptFlashGateway.js と JavaScriptFlashGateway.swf を、あなたのWebサイトのルートにコピペしてください。実際はどこに置いても良いのですが、いろんなプロジェクトからでも使えるような場所に置いておくことをお奨めします。
このキットを Flash 開発環境にインストールして使うためには、"source/flash/actionscript" 内のライブラリファイルを Flash 開発環境 や Flex にクラスパスが通る場所にコピーする必要があります:
com/macromedia/javascript/JavaScriptProxy.as
com/macromedia/javascript/JavaScriptSerializer.as
ファイルを移動させる時には、クラスパスが通るように、ディレクトリ構造を保持しておくようにしてください。
使い方
JavaScript から ActionScript の関数を実行する場合
JavaScript から ActionScript の関数を呼び出す場合は、下記のようにして、JavaScriptFlashGateway.js を html ファイルに組み込んでおいてください:
<script type="text/javascript" src="/path/to/JavaScriptFlashGateway.js"></script>
JavaScriptFlashGateway.js ファイルには、FlashProxy というクラスがあり、これを使って、Flash - JavaScript 間の関数呼び出しに使用できます。FlashProxy と、実行させたい関数を持つ Flash コンテンツは、ユニークID(固有のID) を共有しておかないといけません。これは FlashProxy に、ページ上のどの Flash コンテンツの関数を実行すればいのかを認識させておくためです。ユニークID を生成する最も簡単な方法は、タイムスタンプを使う方法です。ページの script タグ内で、次のようにしてユニークID を生成します:
var uid = new Date().getTime();
次に、FlashProxy (というJavaScript 側の)クラスのインスタンスを生成し、先ほど作ったユニークID と、JavaScriptFlashGateway.swf へのパスを渡します:
var flashProxy = new FlashProxy(uid, '/path/to/JavaScriptFlashGateway.swf');
ページに Flash コンテンツを追加する際、you have to pass in 同じユニークID を指定しないといけません。that you passed into the constructor of the FlashProxy using flashvars. JavaScriptFlashGateway.js ファイルには、Flash タグを簡単に生成するための方法が用意されていて、flashvars を使いたい時は、次のように指定できます:
<script type="text/javascript">
var tag = new FlashTag('/path/to/flashContent.swf', 300, 300); // 後ろ2つの引数は、幅と高さです。
tag.setFlashvars('lcId='+uid);
tag.write(document);
</script>
ユニーク ID は、lcId(ローカルコネクションIDの略語) という Flash の変数を経由して、あなたの Flash コンテンツに渡されます。これで、FlashProxy を使って、JavaScript から ActionScript の関数を実行するための用意ができました。次のようにFlashProxy インスタンスを使います:
flashProxy.call('myActionScriptFunction', 'my string', 123, true, new Date(), null);
上のコードの最初の引数は、実行したい ActionScript の関数名で、あとの引数は Flash 内で実行するその関数に渡す引数となります。objects, arrays, strings, dates, numbers, booleans, nulls, undefined といったデータ型が使えます。
Flash からの関数呼び出しを JavaScript で受け取る方法
Flash からの関数の呼び出しを受け取るためだけなら、JavaScript のコードを修正する必要はありません。ページに JavaScriptFlashGateway.js ファイルが組み込まれているなら、下記テクニックを用いて、任意の引数を渡しつつ、 Flash から JavaScript の関数を実行できます。
JavaScript の関数を ActionScript から呼び出す
繰り返しますが、JavaScriptFlashGateway.js が 実行したい JavaScript が記述されている HTML ページ内に組み込まれているようにしておいて下さい。
Flash プロジェクトに JavaScriptProxy クラスをインポートします:
import com.macromedia.javascript.JavaScriptProxy;
次に、JavaScriptProxy クラスのインスタンスを生成します:
var proxy:JavaScriptProxy = new JavaScriptProxy();
JavaScript の関数の呼び出し方は2通りあります。
1つ目の方法は、"call API" を使う方法:
proxy.call("javaScriptMethodName", "arg1", new Object());
1つ目の引数は、呼び出したい JavaScript の関数名です。残りの引数は、その JavaScript 関数の引数として渡されます。
(2つ目の方法としては)JavaScriptProxy クラス上で、直接メソッドを呼び出す方法で、メソッドは JavaScript にプロキシされます。次のように使います:
proxy.javaScriptMethodName("arg1", new Object());
JavaScript からの関数呼び出しを Flash で受け取る方法
JavaScript から Flash コンテンツ内の関数を呼び出す場合には、JavaScriptProxy クラスのインスタンスを作成し、関数がプロキシされるオブジェクトを指定します。
var proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);
コンストラクタには2つの引数を指定します。1つ目は、HTML ページから Flash コンテンツに渡す、ユニークID(上記を参照)。 第2引数は、オブジェクトやクラスインスタンス that function calls from JavaScript will be proxied to. 注意:Flash コンテンツが JavaScript からの関数呼び出しを受け取る場合のみ必要になります。
必要なコードはこれだけです。あらゆる JavaScript 呼び出しは、コンストラクタ内の引数で指定されたオブジェクトにオブジェクトに渡されます。
動作環境
JavaScript Flash Integration Kit は Flash Player version 6r65 、以下のブラウザを対象としています:
- Windows IE 6.0
- Windows Firefox 1.0
- Windows Opera 8.0
- Macintosh Opera 8.0
- Macintosh Firefox 1.0
- Safari 1.2.4 and 2.0
- Linux Firefox 1.1
既知の問題
- Undefined object properties in JavaScript may not be serialized and sent to ActionScript unless they are explicitly defined as undefined. If the variable is simply not defined at all, the property may be stripped out.
- デバッグプレイヤーを使っている場合は、JavaScript - Flash 間の呼び出しが遅いと感じるでしょう。呼び出しは、その他プラットフォームや、Webブラウザ、Flash Player では高速に実行されます。
- 循環参照しているオブジェクトや配列を渡すことはできません。JavaScript でも ActionScript でも、循環参照は無限ループしてしまいます。言い換えれば、もしオブジェクトが自分自身への参照をプロパティとして保持している場合、一連のコードは、無限ループになってしまいます。
This product includes software developed by Macromedia, Inc. (http://www.macromedia.com).
- Newer: 「寺子屋(仮)」→「TERACO」で、東京第1回
- Older: GAINER(ゲイナー)
Comment:0
Trackback:0
- TrackBack URL for this entry
- http://www.trick7.com/blog/mt-tb.cgi/548
- Listed below are links to weblogs that reference
- Flash / JavaScript Integration kit 日本語訳 from trick7.com blog



