2011年1月26日水曜日

swfのhtml読み込み:SWFObject

http://www.e-ssp.net/how_to_03.html

※IE6.7では下部にマージンがでる現象あり。

例)
<div id="headerFlash">
<script type="text/javascript" src="js/swfobject.js"></script>
<a href="www.adobe.com/go/getflashplayer"><img src="images/top/get_flash_player.jpg" alt="" /></a>
<script type="text/javascript">
var so = new SWFObject("index.swf", "topmovie", "900", "350", "9", "#000000");
so.write("headerFlash");
</script>
</div>



SWFObjectはMacromedia Flashのswfを埋め込むためのJavascriptです。
埋め込み方法も簡単です。検索エンジン対策(SEO対策)にもなり、HTML、XHTML 1.0に使用できます。
※ページはtext/htmlにてご利用ください。application/xhtml+xmlのページでは使えません。
1)http://blog.deconcept.com/swfobject/#download からDownload SWFObject 1.4をダウンロードしてください。
解凍してできたフォルダの中に「swfobject.js」があるかを確認しておきます。
ダウンロード ⇒  http://blog.deconcept.com/swfobject/#download
2)Webサーバーのwwwルート(トップページのindex.htmlを置いている階層)に任意のフォルダ(ここでは「js」)を作り、その中にswfobject.jsを入れます。
3)HTMLページにJavascriptを記述します。
このページを例にしたFlashムービーを埋め込む為の記述が以下です。
<div id="headerFlash">
<script type="text/javascript" src="js/swfobject.js"></script>
<img src="img/ssp_c.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />
<script type="text/javascript">
var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
so.write("headerFlash");
</script>
</div>

以上が、このページで記述しているJavaScriptです。
4)それでは各コードを説明します:
<div id="content_swf">
<script type="text/javascript" src="js/swfobject.js"></script>
<img src="img/ssp_cf.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />
HTML内に、Flashムービーを入れる為の要素(ここでは任意のdivタグ)を用意します。
swfが実行されない時には、代替機能としてimg画像が表示されます(alt属性が検索エンジン対策にもなりますので、SEOに不利といわれるFlashの対策にもなります)。
var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
新規にSWFObjectをつくり、必要なパラメーターを渡します。
"menu_n.swf"  埋め込むswfのファイル名をパスで指定します。
"ssp"  オブジェクトやembedタグのIDとなります。任意の名前で構いません。
"600"  Flashムービーの幅 (width)
"120"  Flashムービーの高さ(height)
"6"   必要とするFlashPlayerのバージョン(version)。 「メジャーバージョン.マイナーバージョン.リビジョン」のようにドット区切りの数字で指定することができます。(例: "6.0.65")メジャーバージョンの数字だけを"6"のように指定することもできます。
"#000000"  背景色(background color)を指定できます(例:#FFFFFF)
so.write("content_swf");
(ユーザーの環境に条件を満たすバージョンがあった時に)ページにFlashコンテンツを表示させるスクリプトを出力するように命令します。これはHTML要素の中身を置き換えることで実行されます。
以上です。
SWFObjectは現行のの全てのブラウザに対応しています。
PC環境では、IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, Opera、MacではIE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+で動作し、以降のバージョンに対してもほぼ対応しています。
SWFObjectは上記のブラウザに対し、Flash playerのバージョン3以降の検出ができます。またユーザーに対し「activating」問題(※クリックしないといけません)に関する余計なクリックを求めることもありません。

0 件のコメント: