mootools1.2のSwiffクラスの使い方

2008年 11月 23日

カテゴリー: weblog — masato kimura @ 9:00 PM

mootools1.2でSwiffクラスを使うと、

  • swfobject.jsなしでHTMLにflashをクロスブラウザで埋め込める
  • javascriptとflash間で相互通信が自由にできる
    (flashからjsの関数を呼び出したり、jsからflashの関数を呼んだりうひゃー)

という素晴らしい世界が開けるのですが、実装する際に必要な作業がままあったのでメモをば。

必須条件として、

  • Swiffでflashファイルを表示させるためにはFlashPlayerバージョンが9以上でなくてはならない
  • 埋め込むswfにはExternalInterfaceコンポーネントがコンパイルされてないと動かない

という点に注意。

しかも公式ドキュメンテーションにあるサンプルソースそのままコピペしても動かない(ぇー
もう、actionscriptがわるいのかjsの書き方がわるいのかそもそも仕様なのか分からず泣きそうだったよね。
それでは実例をば

まずはflash側のswfのソース

import flash.external.*;
// flashからJavaScript の関数を呼び出す
var msg:String = "Hello!!";
ExternalInterface.call(test, msg);
// javascriptからflashの関数を呼び出す
ExternalInterface.addCallback('hogeFlash', null, hoge);
function hoge():Void {
//いろいろ
}

冒頭のimport flash.external.*ってのは必須
次にjavascript側のソース

var swfObject = new Swiff('test.swf', {
id: 'swiffFlashObj',
container: $('swf'),
'callBacks': {
test: function(txt) {alert(txt);}
}
});

このサンプルだと、”swf”というidをもったタグ内(divとか)に”swiffFlashObj”というidを持つobjectタグ(swf)を生成してくれます。
んで、このswfをロードした時点で、jsのSwiffクラス内で定義した”test”という関数が呼ばれるんだぜ
かつ、js側から”hogeFlash”関数を呼べば、flash側の”hoge”関数にアクセスできるぜー

こんな感じのjsソースを追加してね↓

Swiff.remote($('swiffFlashObj'), 'hogeFlash');

これでflash内の”hoge”という関数が呼べますよ、と
ちなみにこのSwiff.remoteっつー関数が厄介だた。
第一引数にSwiffインスタンス、第二引数にFlashムービー内で実行したい関数名を突っ込む、とかドキュメントにあったんだが、例えば、この第一引数にさっきnewしたSwiffの戻り値を突っ込んでもエラーになてしまう↓
【間違い例】Swiff.remote(swfObject , 'hogeFlash');
ここでいうswfObjectがnewしたSwiffね。もうね。これは罠だね。
だから、第一引数にはちゃんとHTMLオブジェクト要素(Swiffで生成したobjectタグ)を指定してあげましょう。
いやーはまったぜー


2009/1/29 追記
Swiffで生成したobjectタグを含む要素をdisplay:noneしてしまうと、
Swiff.remoteが使えない。注意が必要。
変わりにvisibility:hiddenを使うんだ!

トラックバック URL

コメントはまだありません »

(;´Д`)

コメントをどうぞ