SWFを読み込む際、wmodeをtransparentにした時のバグ

SWFをページに読み込む際にwmodeの設定をtransparentにするとバグが発生するということが多々あります。「wmode、バグ」で検索すると多くの事象が確認できます。対応策を検索しているとAdobeのHelpには、「transparent 設定自体が対応しておりませんのでご注意下さい。」との記述があります。使わないのが一番です。

今回はtransparentを使わざる得ない状況で、SWFの一部が欠けてしまうバグが発生し、対応策を調査しているところ、同じような事象を見つけました。
ChromeでFlashをwmode=transparentにすると欠ける問題
これに対する対応策を見つけましたので報告します。

まず、バグの事象を確認してください。
20130412_img
※クリックするとFlashが表示されます。
※chromeで確認してみてください。

複数のオブジェクトを同時にトゥイーンすると、SWFの一部が欠けて背景の色が透けて見えてしまうことが分かると思います。バグの発生の条件は以下になります。

  1. wmodeがtranseparent
  2. アウトラインが複雑なベクターデータ
  3. 複数同時にトゥイーンアニメーションを適用

※トゥイーンはタイムラインでかけても、サードパーティーのTweenライブラリ等、スクリプトでかけてもバグは発生します。

発生条件でアウトラインが複雑なベクターデータとありますが、アウトラインがシンプルなもの(四角や丸)ではこのバグは発生しません。なので対応策としてはトゥイーンをかけるMovieClipの中で、以下のように背景を敷いてアウトラインをシンプルなものにする事で回避できます。
20130412_img02
※サンプルでは、わかりやすくするために背景に色を敷いていますが、完全に透過させても結果は同じになります。

環境依存するバグなので、これで解決できるかわわかりませんが、とりあえず試してみてください。