BlackMoon Design

In this tutorial we’ll create a simple (yet very usable;) AIR application.

This is a calculator widget with custom, chrome window.
The main point of this tutorial is to show how to create chrome windows, add your own window managment functions (to close, minimalize and move the window) and create key based events.

Design

We can create the design of our widget straight in Flash CS3 or import it from other software (like Photoshop). For this tutorial we’ll use the design made straight away in Flash CS3.
There’s no difference in creating the design and animation for AIR compared to regular Flash Player file.
In our case we’ve created dynamic text for calculator screen and set of animated buttons.
btw. This design is released under CC licence – if you would like to use any part of it in personal / commercial projects – by all means please do so. (same goes for the code)

AS 3.0 Calc Class

We’ll create a class to handle all the calculator functions. This is not very needed, but let’s keep it “the right way”. You can check the class here.

package{
	public class Calc{
		public static function sum(liczba1:Number,liczba2:Number):Number{
			var wynik = liczba1 + liczba2;
			return wynik;
		}
		public static function deduct(liczba1:Number,liczba2:Number):Number{
			var wynik = liczba1 - liczba2;
			return wynik;
		}
		public static function multiply(liczba1:Number,liczba2:Number):Number{
			var wynik = liczba1 * liczba2;
			return wynik;
		}
		public static function divide(liczba1:Number,liczba2:Number):Number{
			var wynik = liczba1 / liczba2;
			return wynik;
		}
	}
}

Nothing special actually ;)

Code

Let’s go through the more interesting bits of the code. I’ll try to comment it as much as I could.

import flash.desktop.NativeApplication;
//we need that to handle our chrome window
var myCalc:Calc = new Calc();
//let's create our Calc object
function calculateResult()
{
	//we take two elements and perform the operation
}
function removeTrailingZeros()
{
	//we don't need any 0 at the end, right?
}
function calculatorInterface(action:String)
{
       //this is calculator interface - we pass action String telling the
       //function what to do next
}
//listener for Keyboard events
//when a number key or any "action" key is pressed - the function
//passes the action String to calculator interface function
function reportKeyDown(event:KeyboardEvent):void
{
	//trace(String.fromCharCode(event.charCode))
}
stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);
//code for moving, minimalise and close chrome window
theCalc.moveButton.addEventListener(MouseEvent.MOUSE_DOWN, moveWindow);
function moveWindow(event:MouseEvent):void {
        //move window
	stage.nativeWindow.startMove();
}
theCalc.calcCloseButton.buttonMode = true;
theCalc.calcCloseButton.addEventListener(MouseEvent.MOUSE_DOWN, closeWindow)
function closeWindow(event:MouseEvent):void {
	//close window
	NativeApplication.nativeApplication.exit();
}
theCalc.minimizeButton.buttonMode = true;
theCalc.minimizeButton.addEventListener(MouseEvent.CLICK, minimize_CLICK);
function minimize_CLICK(event:MouseEvent):void
{
       //minimize window
       stage.nativeWindow.minimize();
}

AIR Deployment

Till this point we’ve just created a ordinary AS 3.0 Flash file – time to make it AIR.
First we go to File – Publish Settings. Choose “Flash” tab and change “Version” to “Adobe AIR 1.0″.
Than choose the Commands option from the main menu and go for “AIR – Application and Installer Settings”.

Here you can setup how your AIR application installer will be created.
For now – we can leave everything as default, exept the window style – we change it to “Custom Chrome (transparent)”.

Last step is to add your certificate. You don’t need it to create AIR applications – but without it users won’t know if to trust your app or now :)

Download

Here are all the files:
BlackMoon Calculator installer
BlackMoon Calculator .fla and .as

As I said before – you can use those files for whatever purpose you like.
Looking forward for your comments.