Transparent Windows and Alert Popups without Overlay in AIR

January 4, 2008 5:32 PM
Adobe AIR supports easy creation of transparent windows. All you need to do is set transparent to true and systemChrome to none in the initialWindow section of the application descriptor. However, there is an additional property to set if your Flex AIR application has mx:Application¹ as the root tag in the main MXML file or if you are developing an HTML AIR application. visible has to be set to true as well.

Here's an example of the application descriptor file:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M6">
  <id>AirApp</id>
  <filename>AirApp</filename>
  <version>v1</version>
  <initialWindow>
    <!-- For an HTML AIR app, point to HTML file instead of swf -->
    <content>AirApp.swf</content>
    <systemChrome>none</systemChrome>
    <transparent>true</transparent>
    <!-- only if it's an HTML AIR app or your Flex App has
	 mx:Application as the root tag -->
    <visible>true</visible>
  </initialWindow>
  <name>AirApp</name>
</application>

Great, now we have windows that can be of any shape and is totally independent of any chrome. But one annoying problem pops up when you do a modal Alert.show() on your non rectangular application. A rectangular overlay appears over the parent window. Needless to say, this spoils the entire look of our fancy circular (or donut-shaped?) application. Thankfully, this is easy to fix with a little help from CSS styles.

   Alert
   {
       /* it can be set to 0 for no effect at all on the parent
        * window. But setting it to 0.1 retains the nice blur effect
        * without having the rectangular overlay visible */
       modalTransparency: 0.1;
   }

Wrap the above in a mx:Style tag and your non-rectangular application is ready to go.

CategoryAIR Comment(s)

^[1] mx:Application is used instead of mx:WindowedApplication in the main MXML file's root tag when you don't even want the AIR chrome.