WebScripter.jp » Flash/ActionScript http://webscripter.jp HTML、CSS、Javascript、ActionScript、php、デザインなどWeb制作に関する備忘録 Sat, 16 Jan 2010 02:11:19 +0000 http://wordpress.org/?v=2.8.5 ja hourly 1 Flashと代替コンテンツをswfobject.jsで切り替え http://webscripter.jp/flash_as/post74/ http://webscripter.jp/flash_as/post74/#comments Tue, 18 Aug 2009 08:02:36 +0000 huevo@ws http://webscripter.jp/?p=74 仕事でFlashの代替画像を入れる必要があったので、Flashのパブリッシュ時に書き出されるAC_RunActiveContent.jsで出来るのか試してみましたが…
javaScriptオン、FlashPlayerオフ、もしくは使用できない状態では代替画像を表示する事は無理なようで、他に代わるものは無いかと調べてみたら、swfobject.jsといういいものがありました。しかも設置はとても簡単です。

ダウンロード先：swfobject - Project Hosting on Googole Code

設置方法は２通りあります。

1）オブジェクトタグを使って静的に埋め込む
2）javascriptを使って動的に埋め込む

1）の方法だと、IEでアクティブコントロールの許諾要求がでるようなので、2）の方法で記述してみます。

<head>〜</head>タグ内に以下のコードを記述

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="swfobject.js"></script>

swfもしくは代替コンテンツを表示したい場所に以下のように記述

PLAIN TEXT
HTML:
  1. <!-- swfの表示 -->
  2. <script type="text/javascript">
  3. swfobject.embedSWF(
  4. "hoge.swf", //swfファイルへのパス
  5. "noFlash",//代替コンテンツを表示するオブジェクトのid
  6. "720",//表示されるswfの幅
  7. "520",//表示されるswfの高さ
  8. "9.0.0"//flashPlayerのバージョン
  9. );
  10. </script>
  11.  
  12. <!-- 代替コンテンツの表示 -->
  13. <div id="noFlash">
  14. <img src="hoge.jpg" width="720" height="520" alt="代替画像">
  15. </div>

swfobject.embedSWFの引数に代替コンテンツを表示するオブジェクトのidを指定するだけで代替コンテンツが表示されるようになっています。とても便利。
代替コンテンツの表示部分にはもちろん画像だけでなく、いろいろと要素も入れられます。
このスクリプトの良い所は、JavaScriptオフ、FlashPlayerオン、またはその逆、またはどちらもオフの場合でも代替コンテンツが表示される事です。
これからかなりお世話になりそうなアイテムです。

このサイトに詳しい事が載っています。

»SWFObject v2.0 ドキュメント日本語訳

今までSWFが見られない人のために代替コンテンツを埋め込む事など、あまり意識していなかったのでWebデザイナーとして恥ずかしい限りなのだが、現在のユーザの端末は、PCだけでなく、携帯へも広がっていてPCの様にリッチなFlashコンテンツを読込めないものもあり、今後は意識していかなければならないことでしょうね。

]]> http://webscripter.jp/flash_as/post74/feed/ 0