How to make a Flash movie with a transparent background

Question

This page from Adobe says to add a "wmode" parameter and set its value to "transparent": http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_1420

This works flawlessly in IE. The background renders correctly in Firefox and Safari, however as soon as you use the browser's scroll bar then mouse over the Flash control you must click once to activate the control. You can see this behavior if you try to hit the play button in Adobe's example.

Anyone know a way around this?

Answer 1

Hi There,

I've tried this in Firefox 3.0.1 and the adobe example seems to work successfully. What version of FF did you test it in?

Answer 2

Enabling windowless mode (wmode=) makes embedded flash act and render just like other elements. Without that, it's rendered in a seperate step and just overlaid on the browser's window.

Could the flash element be losing focus? Sounds like input focus is moved to the scollbar, then you have to move it back.

Also you weren't clear whether the focus issue was only in FF or also in IE.

Answer 3

The Adobe example "works" in Firefox 3.0.1 in the sense that the background is transparent. However, in Firefox 3.0.1 and Safari 3.1.2 you must click the play button twice to see the animation.

Answer 4

On another note; setting the wmode to transparent has a few kinks. For instance it can break the scrolling (the flash stays in the same place disregarding the scroll) in some older versions of Firefox (pre 2.0). I've also had issues with ALT-key combinations in textfields not working when wmode is transparent.

Also, if you need to place html-content above flash-content (not a good idea generally, but there are cases when it's useful) wmode=transparent is the way to go.

Answer 5

After spending some more time on this I agree with @grapefrukt. Setting wmode to transparent leads to all sorts of strange issues and in my opinion it should be avoided.

Instead I've resorted to passing the background color as a parameter. I use the following ActionScript to draw the background.

var parameters:Object = LoaderInfo(this.root.loaderInfo).parameters;
opaqueBackground = parameters["background-color"];

EDIT: Thanks to @grapefrukt for reminding me of the bgcolor param (which makes the ActionScript above totally unnecessary)

Answer 6

You know you can set the background color when you're embedding?

The following attributes are optional when defining the object and/or embed tags. For object , all attributes are defined in param tags unless otherwise specified:

bgcolor - [ hexadecimal RGB value] in the format #RRGGBB . Specifies the background color of the movie. Use this attribute to override the background color setting specified in the Flash file. This attribute does not affect the background color of the HTML page.

Cut 'n paste from http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701&sliceId=1