JSでFLASH表示領域を広げる方法

某案件で”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の関数呼び出し失敗への対策