Flex transparency in HTML pages

Just in case there are some more Flex developers out there who haven’t spent the last 5+ yrs coding Flash apps ;)… To get a fill transparency of your Flex app sitting in an HTML page, backgroundAlpha is not enough.

You also need to set the wmode attribute of the object/embed tag you’re using to place the swf on your page. Don’t forget to do that also in any JS code you might use to embed the SWF in your page (that was what I was running into for the last hours – args!).

o WMODE is browser-dependent. Most recent Mac and Win browsers offer it, but none on Linux yet do… Firefox/Linux should be soon.

o There are browser quirks. Safari and Opera/Mac have had problems with HTML/JS navigation overlays… WMODE has sometimes affected printing… scrolling problems were once common… many strange little symptoms have been traced back to WMODE in particular browsers.

o There’s a slight hit on rendering speed, but logic speed should be unaffected.

o Putting “wmode=transparent” into the OBJECT and EMBED tags can do two things: layer the SWF among HTML’s DIVs (like a JavaScript menu atop a Flash display); and turn background pixels of the SWF transparent (Flash applets with irregular shapes).

o Overlaying two live things atop each other can get into timing issues… a SWF overlay atop some other video stream would be very configuration-dependent.

wmode transparent in flex (flash player 9) still seems to suffer from the same problems with non US keyboard layouts as earlier versions of the flash player did, namely, if you have a non US keyboard layout and you try to type into a transparent flex app, you will get US coresponding characters to a key, not what you should get.