Creating A simple AIR ApplicationBy 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.
Our tutorial will be divided into the following sections:
- Setting Up the Stage and Graphical Assets.
- Coding the Clock.
- 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.
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.
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.
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.
Now access the Timeline, rename our only layer as Clock Body, and then Lock the layer.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.