Ok so we start with the “main-app.xml” file. This is the AIR specific configuration file, where we can change the Application specific parameters like:

  1. Application Name
  2. Version
  3. Description etc...

But we’ll directly move to the following settings which allow us to change the windows related settings. When dealing with custom chrome window, following settings need to keep in mind.

  1. SystemChrome
    • For creating skinnable application, this parameter should be “none”
  2. Transparent
    • This parameter should be “true”

Initially in the configuration file, both the properties (1 & 2) may be commented, so you need to remove the comment for these parameters & then set their values.

 

There may be a possibility that our Application doesn’t require resizing of the window (because of the odd shape). So we can remove the resizing option by changing the “resizable” parameter value to “false”.

 

Ok that’s all we need to change in the configuration file.

 

Now we can move to “main.mxml” file. This is our main UI where we want to set the Application skin. Here we need to set the following properties.

 

  1. borderStyle = “none”
    • By setting this value, window won’t show the border around it.
  2. backgroundAlpha = “0”
    • This will make windows background transparent. This’ll be helpful when you place an transparent image (PNG file with alpha transparency) on the main Application interface.
  3. showTitleBar = “false”
  4. showStatusBar = “false”
    • By default Title Window & Status Bar display is true (Even if the background is transparent, because default value is true). We need to set these values to false.
  5. horizontalScrollPolicy = “off”
  6. vertical ScrollPolicy = “off”

<mx:WindowedApplication

      xmlns:mx="http://www.adobe.com/2006/mxml"

      width="350" height="350" layout="absolute"

      borderStyle="none" backgroundAlpha="0"

      showTitleBar="false" showStatusBar="false"

      horizontalScrollPolicy="off" verticalScrollPolicy="off"

      initialize="{evntAppInit()}"

      applicationComplete="{evntAppComplete()}"

>