Externalinterfaceの練習 その2

「Externalinterface」の練習中。

JavaScriptからActionScriptを呼び出す場合、「ExternalInterface.addCallback」を利用します。




まず、ActionScriptでJavaScritから呼び出す関数を用意します。

public function setText(str:String="null"):void
{
   var t:TextField=new TextField();
   t.autoSize=TextFieldAutoSize.LEFT;
   t.defaultTextFormat=new TextFormat(null, 20, 0xffffff);
   t.text=str;
   addChild(t);
   t.y=40;
}

そして、これをJavaScriptで呼び出せるように登録します。

// JavaScriptから、setFuncという名前で呼び出せるようになる。
ExternalInterface.addCallback("sefFunc", setText);

JavaScript側からは、以下のようにして呼び出します。

<script type="text/javascript">
// SWFObjectでswf埋め込み
swfobject.embedSWF("test.swf", "myContent", "100%", "100%", "9.0.0", "swfobject/expressInstall.swf",{},{bgcolor:"#000000"});

// 埋め込まれたムービーを取ってくる関数
function getMovieName(movieName)
{
    if (navigator.appName.indexOf("Microsoft") != -1) {
       return window[movieName];
    }
    else {
        return document[movieName];
    }
}

// 呼び出したい場所に以下を記述する。引数も渡せる。
getMovieName("myContent").sefFunc("call from JS !");
</script>

これで、JavaScriptからActionScriptの関数を呼び出せるようになります。





超簡単なサンプはこちら。

サンプルの流れとしては、ASからJSの関数を呼び出し→その関数の中でJSからASの関数を呼び出し って感じ。

HTMLとasファイルのまとめたのはこちら。

Externalinterfaceの練習

「Externalinterface」とは、ActionScriptとJavaScript間で連携を行う際に利用します。

ActionScript側から、JavaScriptに記述してある関数を呼び出すには、「Externalinterface.call」を利用します。




まず、JavaScript側で関数を作成する。今回はブラウザ判定の関数を作りました。

<script type="text/javascript">
function getBrowserType()
{
    var isBrowser;
    if(navigator.userAgent.indexOf("MSIE") != -1) isBrowser = "IE";
    else if(navigator.userAgent.indexOf("Firefox") != -1) isBrowser = "FireFox"
    else isBrowser = "What is this browser !?";

    return isBrowser;
}
</script>

あとは、ActionScript側で呼び出して終わり。

//  関数名を指定して呼び出し
var type:String=ExternalInterface.call("getBrowserType");

呼び出しが失敗した場合はnullが帰ってきます。




ちなみに、引数を持って行くこともできます。

JavaScript側で引数を持って行く関数を作って。

<script type="text/javascript">
function calcSum(n1, n2, n3)
{
     return (n1 + n2 + n3);
}
</script>

ActionScript側で呼び出す場合に引数を渡します。複数渡したい場合は引数を複数書けばOK。

// 引数に1,2,3を指定。帰り値は6が帰ってくる。
var sum:int=ExternalInterface.call("calcSum", 1, 2, 3);

割と簡単に出来てしまった。

一応動作サンプル。

HTMLとasファイルをまとめたのはこっち（SWFObjectは同梱してません）。

SWFObjectで全画面表示swfの復習。

有名なSWFObjectの復習です。

いつもFlexBuilderでリリースしたものを使っているので、SWFObjectをしっかり使ったことがなかったもんで。





サイトからzipをDLして解凍すると、中には複数のファイルが入っています。

「expressInstall.swf」、「swfobject.js」の2つのファイルを使います。

同梱してある２つのhtmlファイル、「index.html」、「index_dynamic.html」ともSWFObjectの使い方のサンプルファイルで、2つのHTMLでそれぞれ別の記述方法で書いてあります。

自分は今回は、「index_dynamic.html」に記述してある方法を利用しました。

<script type="text/javascript">
  swfobject.embedSWF("test.swf", "myContent", "100%", "100%", "9.0.0", "swfobject/expressInstall.swf",{},{bgcolor:"#000000"});
</script>

サンプルの方法に、背景色の指定を加えました。

また、幅と高さを100%で全画面表示に。





ただ、このままだとIEではうまくいったのですが、FireFoxやOperaで正しく表示されませんでした。

解決方法は以下のサイトにありました。

nondelion.com - swfobject で flash を Window 内に全画面表示


ここにあった通り、以下のCSSを記述。

<style type="text/css">
<!--
     body
　　{
         position: absolute;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
     }

     html, body {
         overflow: hidden;
     }
-->
</style>

一応、これでIE、FireFox、Operaでうまくいきました。



ちなみに、以下の記事を参考に、swfのキャッシュも防いでいます。

SWF ファイルのキャッシュを防ぐ方法




一応、動いているサンプル。

ちゃんと動作していると思います。




ちなみに、ローカルで動かない場合や、セキュリティサンドボックス侵害とかが出る場合は、SWFObjectに渡すパラメータをいじってやるとうまくそうな。

「allowScriptAccess」を「always」にするとローカルでうまくいくとかね。

パラメータの指定場所は、以下のサイトが詳しく書いてあります。

SwfObject - SWFObject(swfobject.js) 2.1についてメモ