Just a quick post on a snippet of code I always forget (I think it must be my age). I use SWFObject (v2.x) to include Flash into pages, but I always forget how to embed it with a transparent background; not anymore:
1 2 3 4 5 | var flashvars = {}, params = {wmode:"transparent"}, attributes = {}; swfobject.embedSWF("/swf/yourSWF.swf", "anim", "300", "200", "9.0.0","/swf/expressInstall.swf", flashvars, params, attributes); |
It’s just so simple, I have no idea why I never remember it. Simply pass an object with “wmode” set to “transparent” when you call embedSWF().
On a side note you can always load SWFObject from the Google AJAX Libraries API:
1 2 3 4 | <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("swfobject", "2.2"); </script> |
It can take some pressure off your own server in serving the file and there’s a chance that the user will have the file cached from a previous site using SWFObject.
Update: Have removed the quotation marks around wmode as it was causing issues, thanks junats!
junats on March 4 10 / 62 Permalink
had some issues doing it like this (with quotations ):
var params = {“wmode”:”transparent”};
but this did the trick (without quotations ):
var params = {wmode:”transparent”};
Matt on March 4 10 / 62 Permalink
Strange how that didn’t occur on mine, maybe it depends on the browser.
Thanks for the feedback, I’ll update the code.
Anderson on August 11 10 / 222 Permalink
Nice man, thanks!
Tal on November 18 10 / 321 Permalink
actually wmode=transparent is not recomended at all , it causes performance issues.
“Flash Player 10.1 hardware rendering is automatically enabled on supported devices, and it’s not necessary to add the wmode=gpu embed parameter to enable it. However, when working with Flash Player 10.1, the wmode=opaque or wmode=transparent embed parameters will disable hardware rendering, causing the software to render the graphics.”
http://www.adobe.com/devnet/flashplayer/articles/fplayer10_1_hardware_acceleration.html
Matt on November 18 10 / 321 Permalink
Thanks for the info Tal. I guess you just have to be careful that you only add ‘transparent’ to the movies that actually need it. Unless anyone knows of another way to enable the alpha channel on an embedded flash movies.
Adam Fehnel on November 18 10 / 321 Permalink
Exactly what I needed. Thanks!
prosem on March 31 11 / 89 Permalink
Thanks! FYI it will not work if you leave the flashvars and attributes variables off.
Ivan on July 4 11 / 184 Permalink
Thank you man! The solution worked like a charm.
Really needed this as I’m using an old method for embedding swfs called “flash satay” (used adobe’s “object only” and embed stuff too, but these are so useless and buggy…)?
And I have problems with… yes… IE browser, the active x stuff are constantly popping out and this frustrates me and my visitors.
Swimmer on August 10 11 / 221 Permalink
it works fine for my project, thanks!
matt on August 25 11 / 236 Permalink
Wow, I am having issues…
My setup:
var flashvars = {},
params = {wmode:’transparent’},
attributes = {};
swfobject.embedSWF(“flash/banner.swf”, “flashcontent”, “1054″, “453″, “9.0.0″, flashvars, params, attributes);
…//here is the Div:
Works fine as desired…but cannot get transparency to work…
Thanks for any clues you could lend…cheers.
matt
Ilich on September 1 11 / 243 Permalink
Try this:
var flashvars = {},
params = {},
attributes = {};
swfobject.embedSWF(“flash/banner.swf”, “flashcontent”, “1054″, “453″, “9.0.0″, null, null, null, {wmode:’transparent’});
essel on September 3 11 / 245 Permalink
for the comment on Aug 25 11, try it inside a function. the params worked for me inside the function but did not when I did it outside the function. doesn’t seem to work on older browser versions of IE.
function embedPlayer() {
var flashvars = {};
params = {wmode:”transparent”};
swfobject.embedSWF(“flash/banner.swf”, “flashcontent”, “1054″, “453″, “9.0″, null, null, params, null);
}
function init() {
embedPlayer();
}
$(init);
rahul on January 6 12 / 5 Permalink
thanks a lot