初心者向けSWFObject埋込

Flash埋め込みには swfobject.js を使うのが一般的になっている昨今、
知らないうちにSWFObjectが2.2になっていて(2011/5/26現在)
2.2では従来のタグでは動かないって、あぁた。知らなかったよ。
(もちろん2.2にしなかったらそのままでいいんだけど)

だもんで、埋め込み方法を1からおさらいです。
今回は?初心者向けに、やさしく解説してみます。うふん。

まず、必要なjsはGoogle Code上で配布・管理されています。
(Google Codeは作ったソースコードとかを無償配布したりしてるサイトと思ったらいいお)

このページの左メニュー http://code.google.com/p/swfobject/
Downloads て所にswfobject_2_2.zipがあるのでそれをDLして使います。

解凍して中身を開いたらいくつかファイルがありますが
swfobject.js が本体です。あとは書き方のサンプルhtmlとかとかです。

フォルダの中身の内容を簡単に書くと

・2種類のhtmlの書き方(index.htmlとindex_dynamic.html)
・テスト用のswf(test.swf)
・expressInstall.swf ・・・Adobe Flash Playerを自動でアップデートさせたい時に任意で使うswfです。(今回の下記タグでは使ってないです)
・swfobject.js これが本体。

必要なのはswfobject.jsだけですがHTMLコードを参考にしたい場合は index_dynamic.html を見てみたらいいです。
(index.htmlの方はちょっと難しい方法なのでやめときましょう)

index_dynamic.htmlも、この記事で書いているタグとはちょっと並びとか違いますが大体おんなじ事やってます。
お好きな方をどうぞ。

さて、ようやっと埋め込み方法です。

貼りつけたいhtmlと、swfデータは用意出来ましたか?
もちろん下のタグはご自分のhtmlファイルによって相対パスを書き換たり、ID名を変えて使って下さいね。

まず利用するページの内にswfobject.jsをリンクさせるよ。
(body以下に書いてもいいけど今回はhead内に書きましょか)


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

そして次に、body内の表示させたい部分にIDを付けて、
中にタグを書いていくよ。

9行目のscriptの意味はこれだよ。これも変えて使ってね。
swfobject.embedSWF(“swfへのパス”, “flashを表示させたいブロックのID名”, “flashの幅”, “高さ”, “FlashPlayerのバージョン:小数点も表示OK”, “背景色”);


<div id="aaa">

(↓swfが表示されない時に、代わりに表示される内容をここに入れます↓)
<img src="daitai.jpg" width="640" height="480" alt="代替画像">
	<p>このコンテンツを表示させるには Adobe Flash Player が必要です。</p>
	<p><a href="http://www.adobe.com/go/getflashplayer">Flash Player を入手する</a></p>

<script type="text/javascript">
	swfobject.embedSWF("aaa.swf", "aaa", "640", "480", "9.0.0", "#ffffff");
</script>

</div>

何個もflashを埋め込むサイトなら、ID名を●●.swfの名前●●と同じにしといたら、かぶらなくていいって書いてたのを見たから、IDとswfの名前を同じにしてるけど、もちろんどんな名前でもいいよ。(↑のaaa部分)

さてさて、無事表示されたかしら?
最初のうちは、jsへの相対パスや、ID名とかがあってるかを要確認だよ!

丸々コピペだけじゃなくて、何を書いてるのかなんとなく考えながらやろうね。

swfobject とは flashを表示させるだけじゃなく、
環境を判別して代替画像を表示させたり、FlashPlayerのバージョンを調べたり
flashでアップロードとか出来たり、ほぼ全てのブラウザに対応して動いたり

色んな機能がついている、すごいヤツなのです。チャーン!

1 comment