2006年08月30日

JavaScriptから ActionScriptの関数を呼び出す

FSCommandがタイムライン制御を行うのに対し、FlashとJavaScriptの相互通信ライブラリ(JavaScriptFlashGateway)を用いると Js - As間で情報をやり取りできます。

最近、Flash でプレイリスト付き音楽再生モジュールを制作する羽目になってしまい色々探していたら、こんなものを発見。

「驚くべきことに、これを使用すると、オブジェクトの型を保ったままJSとFlashでデータ通信ができるそうです。対応ブラウザも、モダンブラウザ全てサポート。」
引用:http://www.fladdict.net/blog-jp/archives/2005/06/flashjavascript_1.php

これは早速試すしかない!

ということで、優良なサイトを見つけましたので下に挙げます。

参考1:JavaScriptから ActionScriptの関数を起動
http://yoshiweb.net/blog/index.php?itemid=106&catid=2
参考2:ActionScriptから JavaScriptの関数を起動
http://www.ark-web.jp/blog/archives/2006/02/javascriptflash_1.html?rssatm

お約束のコードさえ書いてしまえば、非常に簡単にかなり高度な事が可能になるなぁという印象です。





■ まずはライブラリを取得して配置

・ダウンロード
http://weblogs.macromedia.com/flashjavascript/
こちらの「Download the latest・・・」というリンクから FlashJavascriptGateway.zipを取得して解凍します。

・フラッシュ側のライブラリ
FlashJavascriptGateway/source/flash/actionscriptフォルダに comフォルダがありますので、このcomフォルダをフラッシュの作業フォルダへコピーします。

com/macromedia/javascript/と辿って行くと・・・。
JavaScriptProxy.as
JavaScriptSerializer.as
の2つのファイルがありますが、Windowsの場合、この2つのファイルをテキストエディタなどを使って文字コードを BOM付UTF-8にして再保存します。
例えば、Tepaエディタの場合、一旦 Tepaエディタで開いた後、名前をつけて保存で下方の文字コードを UTF-8、改行コードをLFにして保存します。(改行コードは構わなくて良いかもしれません。)

・html側のライブラリ
FlashJavascriptGateway/installationフォルダに JavaScriptFlashGateway.jsと JavaScriptFlashGateway.swfがありますので、これを テストするhtmlから読み込める場所にコピーします。(同じフォルダで構いません。)

また、Windowsの場合、JavaScriptFlashGateway.jsの文字コードを Shift-jis、改行コードをCRLFで再保存します。


■ ActionScript側(参考1yoshiweb.NET-blogさんのまんまです。)

・テストファイル
試作したミュージックプレイヤー MusicPlayer.swf

・データ受信用関数の定義
私は、試作したミュージックプレイヤーに、
function ChangeMusic(str){
   mySound.loadSound(str, true);
}

という簡単なコードを突っ込んで、曲を JavaScriptから変えられるようにしました。
JavaScript からはソースファイル名(文字列)を strに受け取ります。

・ライブラリのインポートと制御用インスタンス生成
import com.macromedia.javascript.JavaScriptProxy;
var proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);

fla ファイルに上の2行を追加して、先ほどの comフォルダの中の asクラスファイルをインポートし、制御用のインスタンスを生成します。(専用のコードは、ここだけです。)

・パブリッシュして swf を生成
先ほどの comフォルダ以下は、パブリッシュで組み込まれますので、swfには不要になります。


■ HTML側

・ライブラリの読込
<script type="text/javascript" src="JavaScriptFlashGateway.js"></script>

head内に上記のコードを入れて、外部JavaScriptファイルとして読み込みます。
参考は、同一フォルダにある場合です。

・制御用コード
<script type="text/javascript"><!--
flashProxy = null;
function MusicPlayer(msrc){
   if(!flashProxy){// Player が読み込まれていない場合
      // マクロメディア提供ライブラリを拡張する
      FlashTag.prototype.innerHTML = function(id){
         document.getElementById(id).innerHTML = this.toString();
      }
      var uid = new Date().getTime();// ID生成
      var tag = new FlashTag('musicplayer.swf', 135, 20);// content の instance
      tag.setFlashvars('lcId=' + uid);// IDセット
      tag.innerHTML('MusicPlayer');// 拡張機能で書き出し
      flashProxy = new FlashProxy(uid, 'JavaScriptFlashGateway.swf');// ゲートウェイに登録
      flashProxy.call('ChangeMusic', "data_mp3/WorldVoyage.mp3");// 最初に起動する曲
   }
   if(typeof(msrc) == 'string'){// 引数が文字列の場合、曲名と考えてBGM変更
      flashProxy.call('ChangeMusic', msrc);
   }
}

onload = MusicPlayer;
--></script>

外部 Javascriptの読込コードの下方に上記コードを追加します。

参考1yoshiweb.NET-blogさんから、色々コードを拝借しています。
比較することで理解が深まるのではと思います。

ちなみに FlashTag.write(object)は使っていません。
結局は、document.writeなので、任意の場所に入れ込むために FlashTagクラスを拡張しています。
FlashTag.innerHTMLを定義して、id='MusicPlayer' のタグに書き出すようにしてあります。(div要素など)
さらに。 FlashTag.write(object)は、うまく書けない事があります。制御用コードの前に div要素(空はNG)を document.writeしてやるとうまく行きます。

MusicPlayer関数は、一度も呼び出された事がないと MusicPlayer.swfを書き出します。
また引数に文字列がある場合、ActionScript側の ChangeMusic関数にその文字列を渡します。


・ユーザーインターフェース

<div id=MusicPlayer></div>
<a href="javascript:" onclick="javascript:MusicPlayer('mp3ファイル1.mp3')">Music1</a><br>
<a href="javascript:" onclick="javascript:MusicPlayer('mp3ファイル2.mp3')">Music2</a><br>
<a href="javascript:" onclick="javascript:MusicPlayer('mp3ファイル3.mp3')">Music3</a><br>


div要素の中に作成した swfが入ります。
このほか。

<div id=MusicPlayer></div>
<select size="1" onchange="MusicPlayer(this[this.selectedIndex].value);">
   <option value="mp3ファイル1.mp3" selected>Music1</option>
   <option value="mp3ファイル2.mp3">Music2
   <option value="mp3ファイル3.mp3">Music3
</select>


こちらの方が用途は広そうです。
posted by HiFa at 00:57 | Comment(1) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする
>>> スパムコメントは消してますよん。 お互い無駄な労力は避けましょう。 <<<

この記事へのコメント

ミスコードがありました。
・制御用コード

if(!flashProxy){// Player が読み込まれていない場合

が正解です。
Posted by HiFa at 2006年08月31日 20:52
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。