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

配布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>に、
<script type="text/javascript" src="swfobject.js"></script>
という1行を描き加えます。

FLASHを表示したい部分に以下のソースをコピペし、マーカーされている部分の文字を書き替えます。
複数表示したい場合は、以下を表示したい個数だけ貼ればOK
<script type="text/javascript">
var flashvars = {
ここに引数
}
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にリンクをはっておく等。

参考

以下のサイトを参考にさせていただきました。
SWFObject2.0 公式ドキュメント
SWFObject v2.0 ドキュメント日本語訳
このエントリーをはてなブックマークに追加 はてなブックマーク - swfobject 2.x を使ってFLASH埋め込み RSS mailform

見る

▲このページを読み返す

次に書いたページ  MT4.21について

前に書いたページ  JavaScriptでページナビゲーション

このページのタグ

関連するページ
関連する本
このページへリンクする


このページへトラックバック

※ このページに言及してない記事からのトラックバックはSPAMとみなして削除します。
※ 管理人が承認するまでトラックバックは表示されません。

コメントする

あにめはっく.jpとは?
イラスト等の講座サイトです。
個人でやってます。
本館は 銀の月動画計画

玉英って誰?
アニメ作ったりイラスト描いたり
プラグインやフォントや素材作ったり
色々してる謎の人です。
プロフィール

■無料フォントダウンロード等
よく訓練されたフォント屋
■背景素材・絵コンテ用紙等
よく訓練された素材屋@あにめはっく.jp
西洋ファンタジー風誤変換人名辞書データベース もめいよふ オンラインボイスの総合カタログ VoiceFL@G▼
■参考サイト リンク集
アキツセントラルTV
■作品のサイト
超法戦隊S.T.7
霊珠

玉英/ザラスドットコム作品一覧

参考書籍等紹介

おすすめ一覧

リンク・RSS

リンクはご自由にどうぞ。

相互リンクご希望の方

このサイトは、次のライセンスで保護されています:
CCライセンス■表示-非営利-継承
クリエイティブ・コモンズについて

購読する このブログの読者になる

QRコード モバイル版こちら

作品購入

このサイトのバナー
Powered by Movable Type 4.01