Chromeless AIR Application (Apple Shaped Application)

To make this project, you will need to use a *.gif file with a transparency.  YOu can use the apple in the downloadable file below.

1. Make a new Flex project (type AIR).

2. In the <project_root>/src folder, place your transparent GIF file.

3. in the first line of MXML, add the following attributes in bold below:
<mx:WindowedApplication  name="MyApple"  creationComplete="init()" showFlexChrome="false" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

4. In the <project_root>/src folder, open the XML file named "<your_project_name>-app.xml" and modify the two lines of code below:
       
         <!--<systemChrome>none</systemChrome>-->
          changed to:
        <systemChrome>none</systemChrome>

        and:

        <!--<transparent>true</transparent>-->
        changed to:
        <transparent>true</transparent>

Do this by removing the commenting characters.


5. Save and close the application descriptor file you modified in step 4.

6. Add the following style block to your project under the first line:

      <mx:Style>
        Application
        {
            /*make app window transparent*/
            background-color:"";
            background-image:"";
            padding: 0px;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
        }   
    </mx:Style>

Note that without this, you would still have the AIR chrome.

7. Add the main panel and rest of the visual elements of the application.  The code should now look like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication  name="MyApple"  creationComplete="init()" showFlexChrome="false" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Style>
        Application
        {
            /*make app window transparent*/
            background-color:"";
            background-image:"";
            padding: 0px;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
        }   
    </mx:Style>
 
     <mx:Image id="mainPanel"   x="42" y="10" width="363" height="343"
            source="assets/apple.gif" scaleContent="true" autoLoad="true"/>
        <mx:Text x="104" y="82" text="This is an Adobe AIR Application. 
        AIR allows you to define applications that break existing boundaries
        (examples - rectangles)." width="220" height="215"
        fontFamily="Verdana" fontWeight="bold" fontSize="20" textAlign="center"/>
</mx:WindowedApplication>


8. You can now build your application.  Note that you cannot move it or close it by interacting with it.  To close it, you have to right click or ctrl click on the dock icon and select "quit".

9. Add the new lines of code (in bold) to add these behaviors.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication  name="MyApple"  creationComplete="init()" showFlexChrome="false" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Style>
        Application
        {
            /*make app window transparent*/
            background-color:"";
            background-image:"";
            padding: 0px;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
        }   
    </mx:Style>
 
     <mx:Script>
         <![CDATA[
            import flash.display.Bitmap;
            import mx.events.CloseEvent;
           
             public function init():void {
            // Move the app when the panelis dragged
            mainPanel.addEventListener( MouseEvent.MOUSE_DOWN, startMove );
               
             }
            public function startMove(event:MouseEvent):void {
                   stage.nativeWindow.startMove();
             }
         ]]>
     </mx:Script>
     <mx:Image id="mainPanel"   x="42" y="10" width="363" height="343"
            source="assets/apple.gif" scaleContent="true" autoLoad="true"/> 
        <mx:Button x="176" click="close()" y="305" label="Close" width="60"
            height="21"/>
        <mx:Text x="104" y="82" text="This is an Adobe AIR Application. 
        AIR allows you to define applications that break existing boundaries
        (examples - rectangles)." width="220" height="215"
        fontFamily="Verdana" fontWeight="bold" fontSize="20" textAlign="center"/>
</mx:WindowedApplication>


10. Run your application!  Voila!