某案件で”JSを使ってFlashの表示領域を広げたり縮めたりしたい”というのがあったので、
今回はそのことについて書きます。
STEP1. FLASH側-JSを呼び出すASを記述
Flash側ではこんな感じでスクリプトを書きます。
//js関数の名前をセット var area_big:String = "area_big"; var area_small:String = "area_small"; //マウスイベント作成 big_btn.addEventListener(MouseEvent.CLICK, big); small_btn.addEventListener(MouseEvent.CLICK, small); //big_btnがクリックされたら実行 function big(event:MouseEvent):void { ExternalInterface.call(area_big).toString(); } //small_btnがクリックされたら実行 function small(event:MouseEvent):void { ExternalInterface.call(area_small).toString(); }
今回初めて知ったのですが、
ExternalInterface.call( “呼び出したいjsの関数名” );
という感じで指定してやるとFlash(swf)とHTML(JavaScript)を連携させることができます。
今回は、範囲を広げる関数をarea_big、縮める関数をarea_smallにしてます。
ちなみにFlashのステージ上では、big_btnとsmall_btnというインスタンス名でオブジェクトを配置している設定です。
STEP2.HTML側-FLASHを埋め込み
ここにSWFが配置されます
swfobjectでFlashを埋め込みます。
(一応ソースを書いているのですが、script typeで囲むと表示されないのですね…)
STEP3.HTML側-JS関数を記述
// サイズ変更関連 var timerID; var h = 200; function area_big() { timerID = setInterval("f_open()", 10); } function area_big() { timerID = setInterval("f_close()", 10); } function f_open() { if (h>=540) { clearInterval(timerID); } else { h += 5; $('#flash_area').css("height", h); } } function f_close() { if (h
おそらくこれで動くはずです。
ちなみに、ExternalInterfaceは色々トラブルが多いようで、
今回の案件ではIEで見事にハマりました…
ExternalInterfaceトラブル色々
・ExternalInterfaceのはまりどころを再検証
・ExternalInterfaceでActionScriptの関数呼び出し失敗への対策