Creating A simple AIR Application

By Riyadh Al-Balushi | Flash CS4 | ActionScript 3.0 | Beginner | Page 1, 2, 3

This tutorial will teach you how to create and sign a simple AIR application using Flash CS4. AIR applications are standalone Flash programs that are installed on the end user's machine using the AIR runtime. Such applications are cross-platform and have deeper access to the system that web based Flash movies, yet they can communicate with the web directly to create a rich web experience on the desktop.

This tutorial will teach you how to create a simple AIR application in the form of a simple desktop clock. In addition to the clock, the application will include a custom close button and the ability to drag the window around.

The program will be exported in AIR 1.5 format, it will be coded in AS3 and will be created using Flash CS4. This is a beginner tutorial that does not require any special knowledge other than basic AS3 skills.

AIR Application - Clock Demo

You can download the sample AIR application from here.

Our tutorial will be divided into the following sections:

  1. Setting Up the Stage and Graphical Assets.
  2. Coding the Clock.
  3. Exporting and Signing the AIR Application.

Setting Up the Stage and Graphical Assets

This section will be divided into the following sub-sections:

  • Creating the FLA.
  • Importing the Graphical Assets - The Clock Body.
  • Importing the Graphical Assets - The Hours Hand.
  • Importing the Graphical Assets - The Minutes and Seconds Hands.
  • Importing the Graphical Assets - The Close Button.

Start off by creating a new FLA in Adobe AIR format.

Simple AIR Application - New FLA

Now save your FLA somewhere on your computer. You can name your FLA Demo. Now access the Properties Inspector and set the size of your stage to 400x400 pixels.

AIR Application - Set Stage Size

I am using the Essentials Workplace Layout - which is the default for Flash CS4. You can manually use this workplace by going through Window>Workplace>Essentials.

Importing the Graphical Assets - The Clock Body

We will now import all our graphical assets into the FLA. All the files necessary to create this clock can be found this zip file. Download the file and extract all the assets somewhere accessible on your computer. Once you do that go back to Flash, and go through File>Import>Import to Stage to import the Clock Body. This should prompt the Import Settings window. Check the option to Keep all paths editable for Objects and to Import as Bitmaps to maintain appearance for Text, then press OK.

AIR Application - Import Settings

While your clock body is selected now on the stage, access the Properties Inspector and assign the instance name body_mc to it. An instance name is a reference that makes it easy for us to manipulate an object via Actionscript later.

AIR Application - Instance Name

Now access the Timeline, rename our only layer as Clock Body, and then Lock the layer.

AIR Application - Layer Lock

The clock body is now ready, we will import the clock hands next.

Importing the Hours Hand

Our initial layer is now used up and locked. We need to create another layer for our clock hands. Click on the Add Layer button to create another one, then rename this layer to Clock Hands.

AIR Application - New Layer

We will now import our clock hands one by one. Start off with the hours hand, go through File>Import>Import to Stage and import the hours hand. That should directly import it as a bitmap. We need to convert this into a MovieClip in order to be able to manipulate it via ActionScript. To do this select the hours hand and go through Modify>Convert to Symbol. This should prompt the Convert to Symbol window. Set the instance name to Hours, the Type to MovieClip and the Registration point to the lower center point.

AIR Application - New Symbol

The Registration Point is the location at which the center of the object will be assumed. This center is the revolution point at which the point will rotate. The hands of a clock rotate from the tip of the clock and not from their center. That is why it is necessary to make this change.

Press OK once you are done. Then while your object is still selected, access the Properties Inspector and set the Instance Name to hours_mc.

AIR Application - Instance Name

Now you will need to manually move the hand to its right position. Make sure the the plus sign (+) cursor is placed over the black dot at the center of the clock body.

AIR Application - Hours Hand Aligned

Our hours hand is now ready for action. We need to repeat the same process for the other two hands now.

Importing the Minutes and the Seconds Hands

Start off with the minutes hand. Go through File>Import>Import to Stage and select the file. Then go through Modify>Convert to Symbol, set the name to Minutes, the Type to MovieClip and the Registration Point to lower center point. Now set the Instance Name to minutes_mc. Finally, position the hand at its proper position.

AIR Application - Minutes Hand Positioned

We will now do the same for the seconds hand. Go through File>Import>Import to Stage and select the file. Then go through Modify>Convert to Symbol, set the name to Seconds, the Type to MovieClip and the Registration Point to lower center point. Now set the Instance Name to seconds_mc. Finally, position the hand at its proper position.

AIR application - Seconds Hand Positioned

All of our clocks hands are now ready. The final graphical element in our project is the close button.

Adding the Close Button Graphic

Start again by creating a new layer, name it Close Button.

AIR Application

Now simply go through File>Import>Import to Stage and select the close button file. This should directly import your file as a bitmap. Once you have it on the stage, go through Modify>Convert to Bitmap and convert it to a MovieClip symbol, name it Close Button. The registration point doesn't matter here.

AIR Application - Convert Symbol

Now simply set the Instance Name of the button to close_btn. Then move the close button to the right side of the clock body as shown in the image below.

AIR Application

All the graphical assets of our clock application are now in place. We just need to write our ActionScript to make them movie. In the next section we will do that.

- Next Page.