Flash コンテンツが z-index を無視して覆い被さってしまう件

えー恥ずかしながら・・・Flash について全くの素人で全然詳しくありません。

最近 Amazon から来ていたメールでお買い得ウィジェットってのを知って、面白そうなので使っていたんですけど、どうも z-index を無視して一番上に表示されてしまいます。Lightbox での画像拡大と非常に相性が悪いです。

こうなっちゃいます。

img01.jpg

拡大表示したい画像の上に Flash が永遠とぐるぐる表示されています。こりゃ堪らんわい。Flash と z-index の関係については過去にさんざん既出なので同じような解決方法は山ほど見つかると思いますけど、自分的メモとしてエントリしました。

- スポンサーリンク -

Flash コンテンツで z-index を有効にする方法

Flash に wmode ってパラメータがあります。このパラメータで Flash の背景を透明化または不透明化の設定が可能です。この透明化の機能を利用することで Flash コンテンツが z-index を無視して一番上に表示されてしまう不具合を解消することができます。

具体的には、Flash コンテンツの呼び出し部分の html ソースを以下のように赤文字部分を追記変更します。

<object>
<param  name="…"  value="…"  />
<param  name="…"  value="…"  />
<param  name="wmode"  value="transparent">
<embed  src="…"  wmode="transparent"  />
</object>

Amazon のお買い得ウィジェットを例にしてみます。

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_9075a896-039c-470e-bcaf-1d977db5f21c"  WIDTH="250px" HEIGHT="250px">
<PARAM NAME="movie" VALUE="http://ws.amazon.co.jp/widgets/q?ServiceVersion=20070822&MarketPlace=JP&ID=V20070822%2FJP%2Fdrk7jp-22%2F8009%2F9075a896-039c-470e-bcaf-1d977db5f21c&Operation=GetDisplayTemplate">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="bgcolor" VALUE="#FFFFFF">
<PARAM NAME="allowscriptaccess" VALUE="always">
<param  name="wmode"  value="transparent">
<embed wmode="transparent" src="http://ws.amazon.co.jp/widgets/q?ServiceVersion=20070822&MarketPlace=JP&ID=V20070822%2FJP%2Fdrk7jp-22%2F8009%2F9075a896-039c-470e-bcaf-1d977db5f21c&Operation=GetDisplayTemplate" id="Player_9075a896-039c-470e-bcaf-1d977db5f21c" quality="high" bgcolor="#ffffff" name="Player_9075a896-039c-470e-bcaf-1d977db5f21c" allowscriptaccess="always"  type="application/x-shockwave-flash" align="middle" height="250px" width="250px">
</embed>
</OBJECT>
<NOSCRIPT>
<A HREF="http://ws.amazon.co.jp/widgets/q?ServiceVersion=20070822&MarketPlace=JP&ID=V20070822%2FJP%2Fdrk7jp-22%2F8009%2F9075a896-039c-470e-bcaf-1d977db5f21c&Operation=NoScript">
Amazon.co.jp ウィジェット</A>
</NOSCRIPT>

対策した Flash タグで表示を確認してみます。正常に Lightbox の下に表示されていることが確認できました。

img02.jpg

もしも Flash コンテンツが Javascript 経由で出力されている場合はもう少し面倒です。
小粋空間: Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」 あたりを参考にしてみてください。

と書きつつ JavaScript 経由で Flash を出力している場合は、それなりに意味があるため JavaScript 経由になっている場合が多いため、コンテンツ供給元に対応をお願いするのも一つの手かと思います。

と言うわけで、僕もお世話になっております AMN さん Flash の出力に <param name="wmode" value="transparent"> を加えて頂けると嬉しいです。

img03.jpg

なお、この wmode を使った場合は、IE6/7、Firefox3、Safari3、Opera9 といったメージャーバージョンで意図するように下に隠れるようになりました。

wmode を設定する副作用について

wmode ってのを調べていく過程でいろいろ得た情報についてまとめておきます。なんとも微妙なパラメータですね。

[228635]wmode を transparent に設定した際の注意点

問題

Windows 版 Internet Explorer では wmode を transparent にすることで背景の透過は可能です。しかしながら日本語の文字入力領域を設定しても入力ができません。

回避策
半角英数文字の入力は可能ですが、日本語の入力が必要なケースは wmode を transparent に設定することを避けてください。
なお、上記以外の環境では、transparent 設定自体が対応しておりませんのでご注意下さい。

FLASHのFPSを正常に - 3ping.org

FLASHを作る際、1秒間に再生するフレームの数を指定できるのですが、IE6を通して貼り付けられたFLASHを再生すると、指定したフレームレートより遅く再生されます。最初は自分のPCの処理速度が関係しているのかと思いましたが、他のブラウザーで同じFLASHを見ると正常なフレームレートで再生されていたので、どうやらIE6だけがこの現象になるようです。
どんなに処理の軽いFLASHを作ったとしても、IE6では指定したフレームレートより遅く再生されてしまうので、スピード感を強調させたいFLASHムービーやゲーム系FLASHなどでは問題ですね。

graffiti-blog: wmodeのクセ

wmode指定なし
再生速度がやや遅くなるが,ホイール操作,キー入力,日本語入力等スムーズに行える.
wmode指定あり
ホイール操作,キー入力,日本語入力が使えないが再生速度が通常になる.


う〜ん・・・Flash もなんだかいろいろと問題があるだねー。

- スポンサーリンク -

関連する記事&スポンサーリンク