How to make a Flash movie with a transparent background

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?

Answers


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


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.


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.


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.


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)


Need Your Help

TestFlight couldn't find the build

iphone ios ipad testing testflight

Yesterday have I uploaded 2 builds to iOS beta testing platform - TestFlightApp. Unfortunately none of the testers, including me, can access those builds. It was working for us fine before.

Disable the admin bar for specific user

wordpress plugins

I have a WordPress site. There are many users. I want when an author logs in, the author who currently is currently logged on couldn't access the "edit page" menu in the admin bar.