■ FlashとJavaScriptの連携(1) - swfからJavaScriptを制御

swfムービーとHTML内のJavaScriptとの通信(実装リファレンス1)

Copyright© N/A

HTML内に表示したFlashムービー(swf)において、HTML内に記述したJavaScriptとの間で何らかの同期を取ったり、データの受け渡しをしたい場面が良くある。ここではその中でswf(ActionScript)からJavaScript関数を呼び出し、その制御等を行う場合の実装例を紹介する。この方法はJavaScriptを介してHTML内に表示した複数の異なるswfムービー間で通信することにも応用される。
関連項目：JavaScriptからswfを制御

swfからJavaScriptを制御(1) - fscommandの使用</h3>

swfからJavaScriptを制御する標準的な方法はこのfscommandを使用する方法である。fscommandを用いるにはあらかじめHTMLの修正など幾つかの準備が必要である。

HTMLの修正箇所
(1)FlashPlayerオブジェクトの<strong>nameおよび<strong>id属性の設定
(2)FlashPlayerオブジェクトの<strong>swLiveConnect属性の有効化
(3)fscommandプロシージャ(VBScriptおよび<strong>JavaScript)の記述</p>

標準のムービー表示用HTMLに上記の修正を加えたHTMLコードは次のようになる。(FlashMX)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
    id="movie" width="480" height="360">
<param name=movie value="movie.swf">
<param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
<embed src="movie.swf" quality=high bgcolor=#FFFFFF width="480" height="360"
    swLiveConnect=true id="movie" name="movie"
    type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

<script Language="JavaScript">
// fscommandを呼び出した際に実行されるコード
function movie_DoFSCommand(command, args) {
   if (command == "popup") alert(args);
}
</script>
<script Language="VBScript">
' ---- VBScriptコード(IE用)
Sub movie_FSCommand(ByVal command,ByVal args)
    call movie_DoFSCommand(command,args)
End Sub
</script>

ActionScript内でfscommandを呼び出すと、呼び出しの際に与えられた2つの引数をそのまま引数とする形でHTML内の&quot;ムービー名_DoFSCommand"というJavaScriptの関数が呼び出されるので、そこに必要な処理を行うJavaScriptの実行コードを記述しておく。

*Internet Exploererの場合はVBScriptの&quot;ムービー名_FSCommand"というサブルーチンが呼ばれるため、そこからJavaScriptの関数を呼び出して同じ結果が得られるようにしている。

これでムービー内のActionScriptにおいて、適当なパラメータを引数にしてfscommandを呼び出すことでJavaScriptに値を渡すことが出来る。なお、fcommandの二つのパラメータは、この例のようにswfを単にHTML内に表示するだけの場合には、特にパラメータ値に制約はなく、その内容に応じて処理を変えるなどの用途で自由に使用することができる。

// ---- ポップアップ
fscommand("popup", "hogehoge");

swfからJavaScriptを制御(2) - getURLの使用</h3>

単純にJavaScriptの関数を呼び出すだけで良ければ、簡易な方法としてActionScriptでgetURL関数を用いて下記のように行うことも出来る。

// 定数を引数としてJavaScriptの関数を呼び出す場合
getURL("javascript:void(alert('hogehoge'))");

// 変数値を引数としてJavaScriptの関数を呼び出す場合
// (パラメータ値内の&quot;'"を全てエスケープ)
getURL("javascript:void(alert('" + param.toString().split("'").join("\\'") + "'))");

この方法を用いるにはHTMLのembedタグの<strong>swLiveConnect属性をtrueに設定しておく必要がある。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
   width="480" height="360">
<param name=movie value="movie.swf">
<param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
<embed src="movie.swf" quality=high bgcolor=#FFFFFF width="480" height="360"
    swLiveConnect=true
    type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
< /embed>
</object>

この方法は非常に簡単で良いが、一部の環境(特にWindows+IE)では、これを呼び出すとブラウザがページを移動したと判断し、ページ内に配置されたアニメーションgifの再生などを止めてしまう等の問題が起こる。そのため多少面倒でも前述のfscommandを用いる方法を採った方が安全である。

Posted at December 21, 2004, 00:34