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
1 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.
[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.