Building AIR apps in Flex Builder 3 with AS3 and hardly any flex

Flex Builder is awesome for many reasons, for one it’s insanely easier to write actionscript than flash itself.
SO: I wanted to build myself an air application in flex builder, but I don’t know any flex…
After some serious googling and piecing together some tutorials I found a way to work around my limited knowledge of Flex.
Here’s how:

First of all, create a new Flex project and choose Desktop Appilcation(runs in air) as the application type.

In the src-folder there should be a file named ‘yourAppName-app.xml’. Open this file and change the following:

<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<!-- <systemChrome></systemChrome> -->
<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
<!-- <transparent></transparent> -->

To this:

<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<systemChrome>none</systemChrome>
<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
<transparent>true</transparent>

Now Create your AS3 class that will act as the main AS3 class for your application, make sure it extends some sort of displayObject (most likely Sprite) so you can add it to the stage.
In my case i’ll call it Application.as extending Sprite.
For Demonstration purposes, this class just draws a black square in the top left of the screen.

package
{
	import flash.display.Sprite;
	
	public class Application extends Sprite
	{
		public function Application()
		{
			this.graphics.beginFill(0x000000);
			this.graphics.drawRect(0,0,100,100);
			this.graphics.endFill();
		}

	}
}

Once your Actionscript class is in place, open the one flex file named ‘main.mxml’ or ‘yourAppName.mxml’, which should sort of look like this

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
</mx:WindowedApplication>

Change the whole thing to this:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 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[
			private function init():void
			{
				nativeWindow.maximize();
				nativeWindow.x = 0;
				nativeWindow.y = 0;
				nativeWindow.stage.align = 'TL';
				nativeWindow.stage.scaleMode = 'noScale';
                                //this line adds the AS class to the stage, so change the name if you picked another one than 'Application'
				nativeWindow.stage.addChild(new Application())
			}
		]]>
	</mx:Script>
</mx:WindowedApplication>

And you’re done! Have fun coding.

By the way: if someone knows an easier way, please share