Adobe AIR: Transparent Application Window with Flex 4

This post is largely a trivia, since everything is described in the Adobe Tutorials. But when I was googling for the solution there was no a direct link to this stuff. Let's correct the situation.

The WindowedApplication class has 2 interesting properties:
- backgroundAlpha
- backgroundColor



But just setting them to some values will not do the job and your application window will not be transparent.

To make it work you need to open the application descriptor file and uncomment 2 lines there:


About the transparent proerty there is a following comment: Whether the window is transparent. Only applicable when systemChrome is none.

So now we have disabled the system chrome, and enabled the transparency. If we add now values for properties like:
backgroundColor="0x000000"
backgroundAlpha="0.6"

and run the application we will have transparency but we will not have any system window controls, like buttons for minimization, resizing, etc:


It's like a catch 22, you need to set "none" for system chrome in the descriptor in order to get the transparency enabled, but transparent window without chrome is useless.
To correct this we need to add the following style block to the application mxml code:


Now when you run the application it will be both transparent and with the spark chrome added: