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

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

Copyright© N/A

HTML内にswfを表示しているときに、HTML内に記述したJavaScriptからswfの再生状態を制御したり、swf何らかのデータを渡してその動作を変化させたい場面が良くある。ここではJavaScriptからswf(ActionScript)を制御する場合の簡単な実装例を紹介する。この方法はJavaScriptを介してHTML内に表示した複数の異なるswfムービー間で通信することにも応用される。
関連項目:swfからJavaScriptを制御

JavaScriptからswfを制御

JavaScriptからswfの制御はPluginまたはActiveXオブジェクトに用意された様々なメソッドを用いることで、ムービー再生の開始・停止や、swf内変数への値代入、個々のムービークリップのプロパティ設定まで、細かに制御することが可能である。

メソッド 機能・動作
Play() ムービーの再生を開始する
StopPlay() ムービーの再生を停止する
IsPlaying() ムービーの再生状態を取得
GotoFrame(int frameNum) ムービーの指定したフレームにジャンプ
TotalFrames() ムービーの総フレーム数を取得
Rewind() ムービーの再生を最初のフレームに巻き戻す
SetZoomRect(int left, int top, int right, int bottom) ムービーの指定した領域を拡大表示。値の単位はtwips(1ピクセル=20twips)
Zoom(int percent) ムービーのズーム倍率を設定する
Pan(int x, int y, int mode) ズーム表示されたムービーの表示領域を移動する。設定値はmode=0でピクセル単位指定、1で%指定
PercentLoaded() ムービーのロード状況を取得(単位は%)
SetVariable(String name, String value) ムービー内の指定した変数に値を設定
String GetVariable(String name) ムービー内の指定した変数の値を取得
TSetProperty(String target, int property, String value)
ムービークリップ・インスタンスの指定したプロパティを設定
String TGetProperty(String target, int property)

ムービークリップ・インスタンスの指定したプロパティを取得
TCallFrame(String target, int frameNum)
ムービークリップ・インスタンスの指定したフレーム番号のフレームアクションを呼び出す
TCallLabel(String target, String label)
ムービークリップ・インスタンスの指定したフレームラベル名のフレームアクションを呼び出す

しかし、JavaScriptからムービークリップのプロパティ等の細部を直接制御するよりは、swfにテキストメッセージを送り、それによってswfを制御する(適当なプロトコルを用いて通信・制御を行う)ように構成した方が移植性が高く好ましい。実際に良く使うのはJavaScriptから合図を送ってswf内に用意したアクションを開始させる(トリガ)、またはデータ(パラメータ)を送る程度である。SetVariableを用いる例を紹介する。

JavaScriptからFlashオブジェクトのメソッドを呼び出すには以下のHTML修正が必要である。

(1)FlashPlayerオブジェクトのnameおよびid属性の設定
(2)FlashPlayerオブジェクトのswfLiveConnect属性の有効化

<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">
function setCookie() {
    // ブラウザによって制御すべきオブジェクトが異なるためブラウザ名で判定
    var swfMovie = (navigator.appName.indexOf("Microsoft") != -1) ? movie : document.movie;
    swfMovie.SetVariable("_level0.strCookie", document.cookie);
}
</script>

<input type=button value="SET" onClick="setCookie()">

InternetExplorerとその他のブラウザでは、Flash表示に用いられるオブジェクトが、それぞれActiveXオブジェクトまたはFlashプラグインと異なり、HTMLのDOM(Document Object Model)のパスも異なる。そのためブラウザのアプリケーション名で判定を行いメソッドを呼び出すべきオブジェクトのインスタンスを取得する必要がある。

swf制御のセキュリティ

swfファイルとHTMLファイルの置かれているサーバー(ドメイン)が異なる場合は、セキュリティ上の制限がありデフォルトではHTML内スクリプトからムービーを制御出来ないようになっている。制御を許可するにはActionScriptにおいてSystemオブジェクトに対して下記のようにHTMLの置かれているサーバードメインを許可ドメインに設定する。

System.security.allowDomain( "www.dawgsdk.org" );


Related links
FlashとJavaScriptの連携(2) - JavaScriptからswfを制御

Comments
FlashとJavaScriptの連携(2) - JavaScriptからswfを制御

Post a commentFlashとJavaScriptの連携(2) - JavaScriptからswfを制御