swfobject

swfonjectは現在(2010年5月27日)バージョン2.2が安定しているという話を聞きます。
自分も今のところ一番問題の少ないバージョンであると認識していますが、
何か問題が起こったとしても責任は持てませんのであしからず。

設置方法

▼HTMLの<head>内に記述

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {menu:'false',wmode:'transparent'};
var attributes = {};
swfobject.embedSWF("img_top/movie.swf", "swfContents", "1000", "349", "8.0.0","img_top/expressInstall.swf",flashvars,params,attributes);
</script>

▼解説

  • swfobject.embedSWF(“swfのパス”, “swfの挿入場所のdivのid名”, “swfの幅”, “swfの高さ”, “想定バージョン”,
    “expressInstall.swfのパス”,flashvars,params,attributes);
    という順番に記述します。
  • パラメータを持たせるにはvar params = {};の中に書く。
    menuはメニューの表示。 (falseが非表示、trueが表示。)
    wmodeはswfの背景を透過させるかどうか。 (transparent:背景透過させる、opaque:背景透過させない)
    wmode:transparentを使いつつ、透過pngや透過gifとtransparentを使用するとデザインの幅が広がり、見た目は良くなりますが、
    確実にデータ量は重くなるのを理解のうえ使用してください。

▼HTML本文内に記述

<div id="swfContents">
<p><img src="代替イメージ" /></p>
<!--/swfContents--></div>

▼解説

  • 代替イメージを用意している場合、挿入する場所を表す<id=”swfContents”>内に記述。
  • 代替イメージには、swf内で伝えたい内容を全て含んだ画像にするか、FlashPlayerのインストールを促す画像にするのが一般的。

以上で完了ですが、このswfobjectを設置されたページを表示するエンドユーザーは以下のケースに振り分けられます。

【ケース1】想定バージョンより新しいFlashPlayerが入っている場合
通常どおりswfを再生。
【ケース2】想定バージョンで記述したバージョンより古いバージョンのFlashPlayerがインストールされている場合
Flash領域内で新しいバージョンのFlashPlayerのインストールを促すexpressInstall.swfが作動。
【ケース3】FlashPlayerがインストールされていないPCの場合
代替イメージを表示。

動作確認

Windows IE6-8
Windows Firefox3.5-3.6
Windows GoogleChrome 4.1.2
Macintosh Safari3-4

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です