Home > tools > Flash / JavaScript Integration kit 日本語訳

Flash / JavaScript Integration kit 日本語訳

この週末、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

このプロジェクトは MacromediaChristian CantrellMike Chambers により、発足・運営されています。

Top

インストール方法

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

ファイルを移動させる時には、クラスパスが通るように、ディレクトリ構造を保持しておくようにしてください。

Top

使い方

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 呼び出しは、コンストラクタ内の引数で指定されたオブジェクトにオブジェクトに渡されます。

Top

動作環境

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

Top

既知の問題

  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.
  2. デバッグプレイヤーを使っている場合は、JavaScript - Flash 間の呼び出しが遅いと感じるでしょう。呼び出しは、その他プラットフォームや、Webブラウザ、Flash Player では高速に実行されます。
  3. 循環参照しているオブジェクトや配列を渡すことはできません。JavaScript でも ActionScript でも、循環参照は無限ループしてしまいます。言い換えれば、もしオブジェクトが自分自身への参照をプロパティとして保持している場合、一連のコードは、無限ループになってしまいます。

Top

This product includes software developed by Macromedia, Inc. (http://www.macromedia.com).

Comment:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Remember personal info

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

Home > tools > Flash / JavaScript Integration kit 日本語訳

持っている Flash & ActionScript 関連本の中から、自分的おすすめの読む順番をご紹介。各書籍のレビューは books カテゴリからご覧頂けます。
この順番でどう?(AS3.0)
  • Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD付)
    Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD付)

    デザイン方面からFlashデビューして、そのままAS2.0を使うようになった人が、難しいと評判のAS3デビューする時の最初の1冊として、とにかく目を通しておくと良いかと思います。プログラミング経験の少ない方でも、サンプルをじっくり読めば、ゼロからのAS3デビュー可。
  • ActionScript 3.0 アニメーション
    ActionScript 3.0 アニメーション
    洋書「Making Things Move!」の日本語訳本。ActionScript3.0で数学的アニメーションを作ることがメインテーマなのですが、前半部分でAS3.0の基礎を分かり易く解説されています。後半の重力, IK, 3D表現等のアニメーション解説も楽しい。僕はこれのAS2.0洋書版を読んでFlashの面白さに気付きました。
  • Essential ActionScript 3.0 (Essential)
    Essential ActionScript 3.0 (Essential)

    900ページ以上ある相当分厚い本。基礎からOOPまでを解説。ほぼ網羅しているので、これを抑えておけばAS3博士になれそう。
  • Actionscript 3.0 Cookbook
    Actionscript 3.0 Cookbook

    ActionScript3.0のリファレンス本。問題とその解決法が1ページぐらいで細分化されているので空いた時間にちょっとずつ読み進められる。WebでAS3のソースを見て勉強する時の字引としても使う。ただ、時期的に初期の本なので、AS3自体が仕様変更してたりするので正誤表は必読。
  • Object-Oriented Actionscript 3.0
    Object-Oriented Actionscript 3.0

    7/23に発売されたFlash&OOP本。AS2.0版は持っているのだけど、オブジェクト指向の初歩的な解説から入って、後半は僕の理解を超える難度になっていきました。今度こそ理解できるか?
この順番でどう?(AS2.0)
  • Foundation Actionscript Animation: Making Things Move (Foundation)
    Foundation Actionscript Animation: Making Things Move (Foundation)

    スクリプトでアニメーションさせる方法を学べる。プログラムの知識というよりも数学や物理の知識が必要。バネの表現や3D表現など、汎用性の高いテクニックを身に付けられ、個人の表現力をレベルアップするのに最適。参考までに、僕が調べた英単語リスト。2007年4月に、AS3対応版も発売されました。
  • ゲーム開発のための数学・物理学入門 Beginning Math and Physics for Game Programmers
    ゲーム開発のための数学・物理学入門  Beginning Math and Physics for Game Programmers

    「Making Things Move!」の世界を突き詰めたい人用のステップアップのための本。行列や物理運動、2D/3D表現。Flashの本ではなく、じっくり読むタイプの本なので、あとまわしにしてもいいかも。
  • Flash 8 Essentials
    Flash 8 Essentials

    Flash8の新機能を紹介。全10章が独立した構成で、興味のある部分から読めます。フィルタやビットマップ、ビデオの使い方とかを、基礎から順を追って理解していけるので、ゼロからスクリプティングできるようになる。僕はビットマップ関連の作業の際のリファレンスとして常用しています。
  • .fla―Idea of Flash Creation
    .fla―Idea of Flash Creation

    上の本でFlash8の基本を身に付けて、それをどう面白い表現に落とし込むかを学べます。深津さんの、試行錯誤・実験しやすいスクリプティング、クラス設計に凄さを感じました。YouTubeやFlickrのAPI、PHPとの連携記事も。
  • FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]
    FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]

    ここまでで表現力が付き、テンションが上がるので、その勢いで難解なオブジェクト指向に挑戦。プログラム経験のない人がいきなり英語のOOP本を読むのは厳しい。この本で継承とかインターフェースとかポリモーフィズムとかの用語を理解しておくといいかも。
  • オブジェクト指向でなぜつくるのか―知っておきたいプログラミング、UML、設計の基礎知識―
    オブジェクト指向でなぜつくるのか―知っておきたいプログラミング、UML、設計の基礎知識―

    Flashの本ではありませんが、OOPの概念を気軽に読めるボリュームで解説してくれます。英語と日本語のOOP用語の対応を図るためにも「Object-oriented Actionscript for Flash 8」と併読するのがおすすめ。なんとなく読んでおくだけでも結構違うのでは。
  • Object-oriented Actionscript for Flash 8
    Object-oriented Actionscript for Flash 8

    前半はOOPの利便性や基本の紹介。デザインパターンやMVCの理解。13章からグッと難しくなって大変。Flash8対応。
  • Essential Actionscript 2.0
    Essential Actionscript 2.0

    上の本よりもさらにOOPプログラマ向け。同じOOP本ということでやや重複しており、こちらはMX2004時代の本なので見送ってもいいかも。分かりやすい英語で良著。この本のAS3版が出たら間違いなく買い。

Page Top