Objectタグと、Embedタグを併用する様のMacromedia(Adobe)の標準のFlashの埋め込み方は既にご存知のことと思います。Flashのソフト上からパブリッシュした際のデフォルトの出力方法になっているので、互換性も高く、多くのブラウザをカバーしています。

しかしながら、プラグイン検出がないので、ユーザーによっては、コンテンツ表示が崩れたり、見れなかったり、プラグインをインストールしていないIEユーザーには「ActiveXをインストールしますか？」というダイアログボックスが表示されたり、Mozillaベースのブラウザでも、似たような問題が起きるいくつかの問題点があります。

特に、embedというタグは、どのバージョンのHTML、XHTMLにもありません。しかし、object タグの仕様の違い（あるいは、サポートしていない、バグの多さ）の為に、保険としてembedタグが使われています。HTMLにswfファイルを埋め込む際にembedタグやobjectタグを使わずにSWFObjectを使うという方法があります。それでは、今回紹介する「SWFObject」というFlash/FlexをWeb ページに貼りつけるのに便利なJavaScriptライブラリです。swfobject_logo

ライセンスは「MIT License」ですから、使い手が良いものとなっています。

[使用方法]

１）、次のURLから最新版をダウンロードして解凍したのちサイト内に設置。(http://code.google.com/p/swfobject/downloads/list )、まず利用するページにてswfobject.jsを呼び出す。

  1. <script type=”text/javascript” src=”swfobject.js”></script>

２）、swfを挿入するブロックをid付きで設置しておく

  1. <div id=”swfContents”>javascriptが有効じゃなかった時のコンテンツ</div>

実際の呼び出し（ヘッダでもどこでもいいので）

  1. <script type=”text/javascript”>
  2. swfobject.embedSWF(”swfのURI”, “挿入するID”, “幅”, “高さ”, “プレイヤーのバージョン”);
  3. </script>

３）、flashvarsやparamタグに値を渡したり、objectタグにidなどの属性をつけたりするには

  1. swfobject.embedSWF(”swfのURI”, “挿入するID”, “幅”, “高さ”, “プレイヤーのバージョン”, “expressInstall.swfのURI”, flashvarsオブジェクト, paramsオブジェクト, attributesオブジェクト);

という記述になる。上記のflashvarsオブジェクトとかは以下のような感じで記述して渡してあげるといい。

  1. var flashvars = { name1 : ‘hello’, name2 : ‘hoge’ };
  2. var params = { menu : ‘false’ };
  3. var attributes = { id : ’swfPlayer’, name : ’swfPlayer’ };

渡す値がないって場合には

  1. var flashvars = {};

というように空のオブジェクトで渡すとか、

  1. var flashvars = null;

でもいいみたい。
ちなみに”expressInstall.swfのURI”っていうのはswfobjectをダウンロードして解凍したら一緒に入っているのでそれも合わせてサイト内に設置しておく。

[関連リンク]

・http://code.google.com/p/swfobject　公式サイト

・http://blog.deconcept.com/swfobject/ 作者のブログ

・http://www.adobe.com/jp/devnet/flashplayer/articles/swfobject.html SWFObject 2を用いたFlash Playerのバージョン検知とSWFファイルの埋め込み

・http://blg.emzah.com/archives/295  SWFObjectを使う場合のご注意。

・http://phpspot.org/blog/archives/2006/10/flashhtmljavasc.html  Flashプレイヤーの検出とHTML埋め込みを簡単に行えるJavaScriptライブラリ「SWFObject」

・http://www.drk7.jp/MT/archives/001481.html  swfobject.jsを使って Flash と代替画像を切り替える方法

・http://www.scratchbrain.net/blog/ver2/entries/000481.html  SWFObject （1.5と2.0）のFlash Playerバージョンチェック注意

メインコンテンツEND ■
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4.33 out of 5)
Loading ... Loading ...

Posted on Thursday, 14th May 2009 by admin

Tags: , , ,
Posted in Flash, Flash Project, Flex | Comments (2) | 21,401 views

Related Posts

2 Responses to “SWFObject: Flash/FlexをWeb ページに貼りつけるのに便利なJavaScriptライブラリ”

  1. SWFAddress: SWFObject と共にFlashの各コンテンツの遷移に対してパーマリンク提供する便利なライブラリ | DigiTechLog Dot Com Says:
    June 2nd, 2009 at 10:33 pm

    [...] 移に対してパーマリンク提供する便利なオープンソースのライブラリです。※SWFObjectについては、SWFObject: Flash/FlexをWeb ページに貼りつけるのに便利なJavaScriptライブラリを参考できます。 [...]

  2. PNGPong: フィルタもしくは複雑なJavaScriptとCSSを使用せず透明PNG表示する問題を解決するオープンソースのライブラリ | DigiTechLog Dot Com Says:
    June 8th, 2009 at 8:14 pm

    [...] ※swfobject.jsについて、以前の「SWFObject: Flash/FlexをWeb ページに貼りつけるのに便利なJavaScriptライブラリ」を参考してください。 [...]

Leave a Reply