透過Flashの設置

Wednesday, Sep 28, 2005 - 05:58 +09:00

※この記事は追記・編集して新サイトへ移行されています。

親要素の背景画像が透けて見えるように、Flashコンテンツを設置する方法。

XHTML+CSSで制作されたStrictなサイトは、IE-winがPNGのアルファチャンネルに対応していないこともあって、画像の透過処理に弱い。なのでデザインによっては部分的にFlashを使ったほうが良いこともある。Flashでの透過は至極簡単です。

ただしFlash側で透過処理を施しても、普通に置くだけでは下にある背景画像を透過してはくれない。たとえばbody要素に指定した背景画像を、Flashコンテンツが透過してくれるように設置するには、以下のように指定する。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="750" height="98" id="fNavi" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="flash/navi.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent">
  <param name="bgcolor" value="#ffffff" />
  <embed src="flash/navi.swf" wmode="transparent" quality="high" bgcolor="#ffffff" width="750" height="98" name="fNavi" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

たとえば各階層ごとに背景画像が違うサイトで、ナビゲーション部分を統一させたい時なんかに有効。

ナビゲーションという重要な要素にFlashを使用することにはSEO的に難あり、と切る人もいっぱいいると思う。透過処理にそれほど拘らないなら、IE-win以外のモダン・ブラウザでだけPNGを使用するとか、AlphaImageLoaderを利用するとか、他にも幾つか方法はある。でもナビゲーション用の画像を5セットも6セットも用意するくらいなら、Flashファイル1つに絞った方がスマートでもある。

何事も時と場合による。特に仕事なら1つの案件に注げるコストは限られてるってことで、ま~選択肢のひとつとしてはアリ。

posted in HTML/CSS | Comment (1) | Trackback (0)

1 Comments

1. Sig. / September 29, 2005 at 05:52

下記のブラウザで動作確認済み。

  • IE-win(5.0/5.5/6)
  • Opera 8, Firefox, NN 6/7
  • IE-mac, Firedox-mac

何故だかSafariでは無効の模様。
透過処理を施したFlash画像(ムービー)を設置すると、背景を白く塗りつぶして表示される。

Trackback

このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/71

« Previous Entry - Next Entry »