SWFs in HTML in Transparent Windows in AIR 1.5.2

One of the admittedly more annoying limitations of the Adobe AIR HTMLLoader implementation is that it does not render SWFs embedded in the HTML when displayed in a transparent window. In AIR 1.5.2, this restriction has been partially lifted.

The problem arises because, by default, Flash Player renders content into a separate window that is positioned on top of the correct location relative to the underlying HTML. This is the original browser rendering for plug-ins. It’s straightforward, but makes it impossible for the rendered plug-in content to participate in the blending of the transparent window’s contents against whatever lies behind the window.

Flash Player has for some time offered alternate rendering models in which the contents are drawn as part of the HTML content instead of as a separate window. This allows the content to be covered by HTML elements–drop down menus, for example. These modes are accessed by setting the “wmode” parameter to “transparent” or “opaque”. See this Tech Note for details.

Prior to AIR 1.5.2, the HTMLLoader refused to display any SWF when it was inside a transparent window in order to avoid the incorrect rendering that would otherwise result. Starting with 1.5.2, the wmode of the content is inspected. If the wmode is “window”–the default value–the content can still not be rendered correctly, and the old behavior still applies. However, if the wmode is “transparent” or “opaque”, the SWF will be rendered and, because it is rendered into the HTML content, will correctly participate in the window transparency.

One Response to SWFs in HTML in Transparent Windows in AIR 1.5.2

  1. Grant says:

    Hi Oliver, thanks for this tip. I am about to port a complex Flex application to AIR (just starting to learn AIR this week), and it requires wmode transparent. I understand how to set the wmode in Flex’s index.template.html, but I don’t see where you would enter that parameter in an AIR application.[If you’re porting a Flex application to AIR, none of this really matters; you don’t need to use SWF-in-HTML at all. Rather, the Flex application is the AIR application. You can set transparency on the main window of the AIR application in the application descriptor. –Oliver]