So I decided it was time to start doing a few Adobe AIR application tutorials especially with the recent updates. This one is going to be a short tutorial on how to get your first AIR application going. The first thing we are going to do is get everything we need to start running and building air applications. This tutorial requires a small knowledge of Flex, if you need some tutorials on this we have plenty.

The first thing we are going to get is a trial for Flex Builder 3, right here. This will install the SDK and the proper stuff to get going. We are also going to install the runtime for AIR, this will enable you to be able to install AIR application using a .air file, grab this right here. Note though this tutorial is written in Beta 1. Now we are ready to get going.

You can install the application we will be building today by clicking the badge below (javascript needed) or downloading the air package. In the application you can do two simple things: if you click the load image button a file browser will pop up and then you can select an image off your computer, which will then be displayed in the application (and will resize when you resize the application). The second feature is a little cooler - you can drag and drop images onto the application and they will show up.


When you fire up Flex Builder and create your first AIR Project, just like we would create any other project, you will notice that we have another file in the root folder. In this case it is StartingAirProject-app.xml. This files holds some configuration information about our application. If we open up the file we see a bunch of comments and some xml tags. The important ones are explained in the file, basically though just make sure you set the appID in the opening application tag and a give it a name. My file looks like the following without the comments.


Now we are going to get started on the Flex code. Like most other tutorials, we start with a simplistic interface. This includes the root application, which you may notice is now a WindowedApplication, an image, and a button (both the image and button are nested inside a VBox with some padding). The WindowedApplication tag is the main AIR application tag, it has a few new properties - one, showStatusBar, we set to false because we do not need the bottom status bar. We end up with some starting interface code like below:


To get an image loaded in we are going to add a click event to the button, which changes the button like so:


Next we can start writing the actionscript code to load the image. We start by adding a <Script> tag after the opening application tag and inside we import a couple of items, create a private variable for the image file, and write our loadImage function. This function first creates a FileFilter for the pop up browser to filter the items and then sets our image file equal to a new File. Then we can call browseForOpen on our file and lastly add an event listener for when the file has been selected. Now we need to write a function that gets called on the file select, which in my case is imageSelected(event:Event). All this function does is set the source of our image to the url of the file the user selected. This gives us the following code:


Now we can take a look at the more interesting feature of dragging an image onto our application. We start this by updating our application tag to call a function on creationComplete event. The update tag is below:


The actionscript function goes into the script tag we started above. Inside the function we add two event listeners, one for NativeDragEvent.NATIVE_DRAG_ENTER and one for NativeDragEvent.NATIVE_DRAG_DROP, these are two new events in AIR for handling drag and drop events from the operating system. We can then create the functions that are used for the events, dragEnter and draggedImage respectively. In the first we use the DragManager class to tell AIR that this application should accept items dragged onto it. In draggedImage we grab a reference to the files we dragged on (although here we really only care about the first one) and use its url to set the source of our image component. The new actionscript functions are below:


Yes that is really all that is needed to drag images onto our AIR application. Below is the final code for our main mxml file.


Only thing left to do is create the actual .air package so you can redistribute your awesome creations. In flex builder this is done very easily by going to the project menu then to "Export AIR Package..." and then you select what files should be used for the AIR package. Usually you shouldn't have to change any of the options (except maybe the destination filename).

With that step finished we now have gone from knowing little to nothing about creating AIR applications to exporting our first AIR package. The only thing left to do is install your application. Now remember, this is only the beginning of what can be done with Adobe AIR - check back soon for some more cool tutorials on Adobe AIR and Flex. If you have any questions don't hesitate to leave a comment.