ieha * Web Design ieha * Web Design

swfobject

正直これまでほとんどFlash触ってませんで。

2年ほど前のWebスクール時代、初めて作ったサイトでやたらFlash使いまくって失笑を買ったのがなつかしい。

「これではいかん」てなかんじで(遅いけど)始めてるわけです。とりあえずは更新案件などで、jqueryで済ましてた写真ギャラリー等をFlash化したり徐々に取り入れ中。

で、超簡単ギャラリー作ったはいいが設置できん。
できんてか、ドリームウィーバーでガツッと埋め込むのとか絶対違うよな。と。

調べると、swfobject.jsなるものが。さらには「Flash設置のお作法」がいろいろあったので、メモっとこ。

——————————————————————–
ダウンロード)swfobjectオフィシャル
http://code.google.com/p/swfobject/

参考01)HTML内SWF埋め込みについて
http://hyhy.wordpress.com/tag/swf%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF/

参考02)将来を見据えた、新たなHTML内SWF埋め込み用コードの考察
http://www.adobe.com/jp/devnet/flash/articles/spark_project_swf_embed.html
——————————————————————–

以降、設置ソース。

■head内
[html]
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
<!–
var flashvars = {url : "yourflash.swf?"};
var params = {quality: "high", scale : "noscale", salign : "tl", menu : "false", scale : "noscale", wmode : "transparent"};
var attributes = {id : "swfContents"};
swfobject.embedSWF("yourflash.swf", "swfContents", "300", "400", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
swfobject.createCSS("#swfContents");
//–>
</script>
</head>
[/html]

■body内
pタグでかこまれた「******」にはjavascript切ってある場合に表示するコンテンツを入れましょう!
[html]
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="400">
<param name="movie" value="yourflash.swf" />
<param name="FlashVars" value="value" />
<!–[if !IE]>–>
<object type="application/x-shockwave-flash" data="yourflash.swf" width="300" height="400">
<!–<![endif]–>
<param name="FlashVars" value="value" />
<p>******</p>
<p><a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
<!–[if !IE]>–>
</object>
<!–<![endif]–>
</object>
</div>
[/html]

■古いWebブラウザや特定の環境無視な感じ
[html]
<div id="swfContents">
<object data="yourflash.swf" width="300" height="400" type="application/x-shockwave-flash">
<param name="movie" value="yourflash.swf" />
<param name="FlashVars" value="value" />
</object>
</div>
[/html]

…何でIE用の条件分岐してんのかとか、いろいろは参考サイトにあるので見てくらさい。

※20100406追記
なんか、以下の方がいいみたいです。
■head内
[html]
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("id", "9.0.0", "expressInstall.swf");</script>
</head>
[/html]

■body内
[html]
<div id="swfContents">
<object id="id" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="200">
<param name="movie" value="yourflash.swf" />
<!–[if !IE]>–>
<object type="application/x-shockwave-flash" data="yourflash.swf" width="300" height="200">
<!–<![endif]–>
<div>
<p>無償のフラッシュプレイヤーをダウンロードしてください。</p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!–[if !IE]>–>
</object>
<!–<![endif]–>
</object>
</div>
[/html]

コメントする

必須 が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。
※コメントは即時反映されない場合があります。

page top