swfobject 2.x を使ってFLASH埋め込み

2008.08.31 15:54:57 , Posted
2008.08.31 22:02:14 , Update by Gyokuei

配布FLASH素材をあなたのサイトにのせる手順

あにめはっく.jpではFLASHのmp3プレイヤー素材を配布しているのですが、せっかくデザインをシンプルにしているのに、FLASH公式のパブリッシュで出てくる埋め込み用の記述が長ったらしくて気持ち悪いのと、いちいち同じ説明するのも冗長なので、埋め込み方法の説明ページとサンプルページを分けることにしました。
やってることはFLASHをhtmlにjavascriptで埋め込んで、flashvars（引数を渡す）とparamのwmodeをtransparentに（背景を透明に）しているだけなので、従来の方法で埋め込んでる方はあわてて変更しなくてもだいじょぶです。

1.swfobject(2.1)をダウンロード

私は2.1で動作確認していますがver2.x系なら使い方同じだと思います。

こちらのページからダウンロードします。↓
Google code:swfobject (※英文サイトです)

ページの右の方に「Featured Downloads:」というのがありますので
swfobject_2_1.zip(2008/08/31現在)を右クリック→名前をつけて保存
解凍して出てきたファイルの中から「swfobject.js」だけを使います。

2.FLASH素材をダウンロード

ダウンロードして解凍しておきます。

私のmp3プレイヤーFLASHは、動作確認にサンプルのmp3ファイルも必要なので、
手持ちのがない方はこちらもダウンロード test.mp3(.lzh、222kb)

3.swfobject.jsとFLASH素材をアップロード

あなたのホームページの、htmlファイルがあるのと同じフォルダに、swfobject.jsとFLASH素材の.swfファイルをアップロードします。

mp3プレイヤーご利用の方はtest.mp3もアップロード

4.htmlファイルを書き換える

FLASHを埋め込みたいhtmlファイルを以下のように書き換えます。

まず、<head> ～ </head>に、

という１行を描き加えます。

FLASHを表示したい部分に以下のソースをコピペし、マーカーされている部分の文字を書き替えます。
複数表示したい場合は、以下を表示したい個数だけ貼ればOK

ここに引数

}
var params = {
wmode: "transparent"
};
var attributes = {};
swfobject.embedSWF("mp3moji.swf", "mp3moji", "180", "15", "9.0.0","", flashvars, params, attributes);
</script>
<div id="mp3moji">
[<a href="test.mp3">voice01</a>]
</div>

具体的に、何と書けばよいのかは、素材ごとに違いますので、解説ページを参照ください。

2～4行目
var flashvars = {

ここに引数

}
各素材で使える引数の設定。
私のmp3プレイヤーでは、背景の色の変更や、読み込むmp3ファイルの設定をここで行います。

9～10行目
swfobject.embedSWF("mp3moji.swf", "mp3moji", "180", "15", "9.0.0","", flashvars, params, attributes);
swf(FLASH素材)ファイル名、置き換えるオブジェクト名(あとに記述したdivタグのidと同じにします)、FLASHの横の長さ、縦の長さの設定をここで行います。

11～13行目
<div id="mp3moji">
[<a href="test.mp3">voice01</a>]
</div> 代替テキスト。
FLASHが使えるブラウザの場合、この<div>～</div>を、FLASHで置き換えます。
FLASHが使えない場合は、<div>～</div>を普通に表示しますので、普通のhtmlを書きましょう。文章や画像等。
mp3プレイヤーの場合、直にmp3にリンクをはっておく等。