SWFObject v2.0 を使った Flash 埋め込み « others« javascript « ActionScript3.0 プログラミング入門 for designers

以前に SWFObject のバージョン 1.5 の使用方法を紹介しましたが、最近では、バージョン 2.0 のほうがよく使うので使用方法についてメモしておきます。この記事は、下記のサイトを参照しました。

バージョン 2.0 では、Flash を埋め込む方法として2つのオプションが用意されてるようです。

1 つ目は、標準準拠のマークアップを使った Flash 埋め込み方法で、現状の標準準拠のマークアップでコーディングでき、JavaScript に頼ることなく Flash コンテンツを挿入できる仕組みになっているようです。
つまり、JavaScript がオフでも Flash コンテンツが見ることがでるということですね。
具体的には、入れ子にした object 要素を使用しますが、コードの記述が冗長で、個人的には好きではありません。

2 つ目に用意されているオプションが、バージョン 1.5 と同様に Flash コンテンツをダイナミックに埋め込む方法で、JavaScript が代替 HTML コンテンツ部分を Flash コンテンツに置き換えてくれます。

これは、Flash が表示されない場合の代替コンテンツを通常のHTMLでコーディングしておき、そのコンテンツ部分に id を設定しておくことで、その id で指定された要素の部分をすべて Flash コンテンツに置き換えるというものです。この代替 HTML の部分は、通常のHTMLとしてコーディングできますので、SEO（検索エンジン最適化）対策にもなるでしょう。

またこの方法では、IE で Flash の埋め込まれたサイトを訪れたとき Flash を一度クリックしないとアクティブ化できない問題も回避できます。

オプション 2 の紹介をします。

Flashコンテンツを埋め込みたい部分に代替となるHTMLを記述します。そしてそのコンテンツを囲むブロック要素に id を設定します。
下記の例は、代替 HTML を囲む div 要素に id 名 flashContent を設定しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject v2.0 を使ったFlash コンテンツのダイナミックな埋め込み</title>
  </head>
  <body>
    
    <div id="flashContent">
      <!-- 代替コンテンツ -->
    </div>
    
  </body>
</html>

次に、HTML ページの head 要素に SWFObject JavaScript ライブラリを読み込ませます。

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

次に、swfobject.embedSWF() 関数を使って swf を埋め込みます。

swfobject.embedSWF( swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes );: パラメータ：; swfUrl:String : swf ファイルの url を指定。; id:String : flash コンテンツと入れ替えたい html 要素（代替コンテンツを内包している要素）の id を指定。; width:String : swf ファイルの幅を指定。; height:String : swf ファイルの高さを指定。; version:String : swf を再生するのに必要な Flash Player のバージョンを指定。; expressInstallSwfurl:String （オプション） : Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75／日本語資料 http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html ] をインストールするための SWF ファイルへの URL を指定。; flashvars （オプション） : オブジェクト形式で指定可能; param （オプション） : オブジェクト形式で指定可能<; attributes （オプション） : オブジェクト形式で指定可能<

swfUrl, id, width, height, version が必須項目です。

下記の例では、最小限の設定で、myFlash.swf ダイナミックに埋め込んでいます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 を使ったFlash コンテンツのダイナミックな埋め込み</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("myFlash.swf", "flashContent", "320", "240", "9.0.0");
</script>
</head>
<body>
  <div id="flashContent">
    <!-- 代替コンテンツ -->
  </div>
</body>
</html>

SWFObject v2.0 を使った Flash 埋め込み

trackback (0)

Post your comment