HTMLへFlashを埋め込む際、いろいろな埋め込み方がありますが、
僕はaflax.jsを使うのが好きです。理由はコードが少なくてすっきりするからですが
まぁ、実物を見た方が理解は早いと思うので、こちらを見て下さい。
実行環境
aflax.js ver1.1
flash actionscript3.0
HTMLにjsファイルをインクルードします。
prototype.jsは0004.jsで使っています。
HTMLにFlashを埋め込むソースは1行だけです。
insertFlash()で指定している”swfLoaded“は、
0004.js(下で説明)に記述されたメソッドです。
Flashがロードされた時に、FlashからswfLoaded()をコールしてもらうように、ここで指定します。
insertFlashがコールされるとaflax.jsでは、flashアプリに対してGETコマンドを投げてFlashを呼び出します(下記のようなURL)。
flashアプリはこのクエリを解析し、callback=の後のswfLoadedをコールバック関数とみなし、コールバックをコールしているようです。
※aflax.jsのサンプルだと、aflax.swf?callback=goとなっていて、goという名前のコールバックメソッドをここではswfLoadedという名前に変更しています。
あとは0004.jsを用意します。
/**
* Road swf
*/
var flashpath = "swf/logoaction.swf";
var aflax = new AFLAX(flashpath);
onload=init;
// swfがロードされた際にswf側からコールするメソッド
function swfLoaded(){
$('debug').innerHTML = "swfのロードがFlashから通知されました。5秒後にJavascriptがFlashのテキストを更新します。";
setTimeout( function(){ updateText(); },5000);
}
// swf側のテキストを更新するメソッド
function updateText(){
aflax.callFunction("updateDisplay","Set to JavaScript");
$('update_form').style.visibility = 'visible';
}
// HTMLロード時にコールされるメソッド
function init(){
$('update_form').style.visibility = 'hidden';
$('update_button').onclick = updateText2;
}
// 更新ボタンが押下された際にコールされるメソッド
function updateText2(){
var value = $('update_text').value.substr(0,16);
aflax.callFunction("updateDisplay",value);
}
最後にFlashを用意します。
Flashアプリロード時にJavascript側で指定してきたコールバック関数(swfLoaded())をコールするため、
RootDocumentClass(ドキュメントクラス)のコンストラクタの最後でjscall(”callback”)というメソッドをコールしています。
このメソッドは、location.swf?callback=swfLoaded というクエリからswfLoadedを抜き出し、
swfLoadedをjavascriptのコールバック関数とみなして、実行します。
jscall()をコールしている位置は、どこでもよいと思います。
Flashアプリのロードが完了したと思う位置に入れればよいと思います。
ここではRootDocumentClassのコンストラクタで指定しているため、
描画の開始と同時にcallbackが呼ばれることになります。
package{
import flash.ui.*;
import flash.events.*;
import flash.net.*;
import flash.display.*;
import flash.system.*;
import flash.external.ExternalInterface;
public class RootDocumentClass extends Sprite {
// 変数
public var container_mc:BackGroundContainer;
//コンストラクタ
function RootDocumentClass(){
// javascript側からコールする関数を宣言
ExternalInterface.addCallback("updateDisplay", updateDisplay);
jscall("callback");
}
// jsのコールバック関数をコールする
// location.swf?callback="name"のnameをjsのコールバック関数とみなす
public function jscall(name:String){
var param:Object=LoaderInfo(this.loaderInfo).parameters;
if(param[name] != null){
ExternalInterface.call(param[name]);
}
}
public function updateDisplay(value:String){
container_mc.setTextB(value);
}
}
}