最近、Flash でプレイリスト付き音楽再生モジュールを制作する羽目になってしまい色々探していたら、こんなものを発見。
「驚くべきことに、これを使用すると、オブジェクトの型を保ったままJSとFlashでデータ通信ができるそうです。対応ブラウザも、モダンブラウザ全てサポート。」
引用：http://www.fladdict.net/blog-jp/archives/2005/06/flashjavascript_1.php
これは早速試すしかない！
ということで、優良なサイトを見つけましたので下に挙げます。
参考１：JavaScriptから ActionScriptの関数を起動
http://yoshiweb.net/blog/index.php?itemid=106&catid=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
の２つのファイルがありますが、Windowsの場合、この２つのファイルをテキストエディタなどを使って文字コードを BOM付UTF-8にして再保存します。
例えば、Tepaエディタの場合、一旦 Tepaエディタで開いた後、名前をつけて保存で下方の文字コードを UTF-8、改行コードをLFにして保存します。（改行コードは構わなくて良いかもしれません。）
・html側のライブラリ
FlashJavascriptGateway/installationフォルダに JavaScriptFlashGateway.jsと JavaScriptFlashGateway.swfがありますので、これを テストするhtmlから読み込める場所にコピーします。（同じフォルダで構いません。）
また、Windowsの場合、JavaScriptFlashGateway.jsの文字コードを Shift-jis、改行コードをCRLFで再保存します。
■ ActionScript側（参考１yoshiweb.NET-blogさんのまんまです。）
・テストファイル
試作したミュージックプレイヤー MusicPlayer.swf
・データ受信用関数の定義
私は、試作したミュージックプレイヤーに、
function ChangeMusic(str){
mySound.loadSound(str, true);
}
mySound.loadSound(str, true);
}
という簡単なコードを突っ込んで、曲を JavaScriptから変えられるようにしました。
JavaScript からはソースファイル名（文字列）を strに受け取ります。
・ライブラリのインポートと制御用インスタンス生成
import com.macromedia.javascript.JavaScriptProxy;
var proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);
var proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);
fla ファイルに上の２行を追加して、先ほどの 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'){// 引数が文字列の場合、曲名と考えてＢＧＭ変更
flashProxy.call('ChangeMusic', msrc);
}
}
onload = MusicPlayer;
--></script>
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'){// 引数が文字列の場合、曲名と考えてＢＧＭ変更
flashProxy.call('ChangeMusic', msrc);
}
}
onload = MusicPlayer;
--></script>
外部 Javascriptの読込コードの下方に上記コードを追加します。
参考１yoshiweb.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>
<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>
<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>
こちらの方が用途は広そうです。
この記事へのコメント
・制御用コード
if(!flashProxy){// Player が読み込まれていない場合
が正解です。