FABridgeを試してみた⇒swfobject2.0+Firefox+FABridge⇒上手く動かない疑惑。

  • このエントリーをはてなブックマークに追加
  • 80

FlashムービーをロードするためのJavaScriptライブラリ「swfobject – Google Code」の現バージョンである2.0RC1を使って表示したFlashムービーが、FlashムービーをJavaScriptから操作するAdobe製ライブラリ「FABridge」と組み合わせて使えない。どうやらブラウザをFirefoxにすると発生する現象のようだ。俺が今丁度その問題に直面している。

ということで、この件について色々検証してみた。

FABridgeの準備。

まず、FABridgeを使う準備。まずはインストールから。
Flex SDKを使ってる場合、SDK_HOME/frameworks/javascript以下にソースが置いてあるので、クラスパスを通すだけ。Flex Builder利用の場合は知らん。そんな高価なアプリ持ってる人は羨ましいですねぇとしか思えない。

で、次はコーディング。ActionScript3.0(*.as)だけで片付ける場合は、

JavaScript から Flash を操作できるツール、Flex-Ajax Bridge(FABridge) を試してみました。
JavaScript から Flash を楽々操作できる FABridge [てっく煮]

を参照してコードを書いてください。ただし、FABridgeインスタンスを格納する変数の位置は、てっく煮にあるコンストラクタ内のローカル変数ではなく、クラスのメンバのほうが良いと言う噂もある。FABridgeのサンプルソースはメンバにしてあった。こんな感じ。

ActionScript

  1. package {
  2.     public class Main extends Sprite{
  3.         import flash.display.*;
  4.         import bridge.FABridge;
  5.  
  6.         private var bridge:FABridge;
  7.         public function Main(): void {
  8.             bridge = new FABridge();
  9.             ・・・

確認は一切してないので、ローカル変数でOK論の方が正しい可能性大。

Flexを使う場合は、<mx:Application>タグの直下に、

  1. <mx :Application>
  2. <fab :FABridge xmlns:fab="bridge.*" />

と書き入れればいい。

次にhtmlの準備。結構簡単。

  1. <script type="text/javascript" src="js/FABridge.js"></script>
  2. <script type="text/javascript">
  3.         function useBridge() {
  4.             var flexApp = FABridge.flash.root();
  5.             ・・・(以下適当な処理)
  6.         }
  7. </script>

このようなタグを入れればいい。処理の部分には、メソッドを呼びつけたりプロパティをgetしたりする処理を記入。メソッドはpublicなものならそのままアクセス可能。プロパティはsetXXX/getXXXに変わってるらしい。

swfobjectの準備

次に、swfobject.jsを準備。「swfobject – Google Code」からgeneratorと本体をダウンロードし、解凍する。で、generatorの方のindex.htmlを開き、必要事項を入力してGenerateボタンを押すだけという超簡単な仕組み。何も変更せずにいきなりボタンを押すと、以下のコードが出来上がる。

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.         <script type="text/javascript" src="swfobject.js"></script>
  7.         <script type="text/javascript">
  8.             swfobject.registerObject("myFlashContent", "9.0.0");
  9.         </script>
  10.     </head>
  11.     <body>
  12.         <div>
  13.             <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="myFlashContent">
  14.                 <param name="movie" value="untitled.swf" />
  15.                 <!--[if !IE]>-->
  16.                 </object><object type="application/x-shockwave-flash" data="untitled.swf" width="800" height="600">
  17.                 <!--<![endif]-->
  18.                     <a href="http://www.adobe.com/go/getflashplayer">
  19.                         <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  20.                     </a>
  21.                 <!--[if !IE]>-->
  22.                 </object>
  23.                 <!--<![endif]-->
  24.            
  25.         </div>
  26.     </body>
  27. </html>

これで出来上がるのは、オプション1とか呼ばれてる代物。標準準拠マークアップを直接ページに埋め込んだ上で何がしかしているらしい。詳しくは「SWFObject v2.0 ドキュメント日本語訳 : Media Technology Labs (MTL) : メディアテクノロジーラボ ブログ」を参照のこと。

swfobjectバージョン1.5の時代だと、埋め込みタグは動的に生成されていた。バージョン2.0では、この機能はオプション2とか呼ばれてる。あらかじめhtml内部に適当なidを持つ<div>タグを生成し、そこにJavaScriptでFlashムービーを組み込む。

  1. <div id="flashContent">代替メッセージ</div>

  1. swfobject.embedSWF("untitled.swf", "flashContent", "800", "600", "9.0.0", "expressInstall.swf");

これで、Flashムービーが埋め込まれる。

Firefox登場で、FABridgeストップ祭!

と言うことで、上記の手順を経て作成したFlashムービーとhtmlファイルをFirefoxでロードし、早速FABridgeでFlashムービーを操作する。すると、Firebug上にこんなメッセージが出る。

  1. FABridge.flash has no properties
  2. var flexApp = FABridge.flash.root();

swfobjectのオプション1でもオプション2でも同じメッセージが出る。一方IEだと問題なく動作する。swfobjectのバージョンを1.5にした場合も、問題なく動作する。

Firebugで見たところ、swfobject1.5だと以下のタグがHTMLに埋め込まれることによってFlashムービーがロードされている。

  1. <div id="flashContent">
  2. <embed id="ビューワ" width="800" height="600" quality="high" bgcolor="#ffffff" style="" src="untitled.swf" type="application/x-shockwave-flash"/>
  3. </div>

見てわかるように、元の<div>タグが生きている。
一方swfobject2.0のオプション2の場合、このようになる。

  1. <object width="800" height="600" type="application/x-shockwave-flash" data="untitled.swf"/>

元の<div>タグが消去され、代わりに<object>タグが入ってる。この差が原因だろうか?誰か解決して下さい。俺はswfobject1.5を使います。

スポンサーリンク
スポンサーリンク
  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク