Write your Own Adobe Air Application

You want to create your own Adobe Air Application which you can distribute to your friends, say for example an application to let people watch your stream? I followed a quick guide online using nothing more then Notepad and dos prompt and ended off with an Application that runs on all platforms.

Step 1 – Install Adobe AIR & the Adobe AIR SDK

If you haven’t done so already, head over to Adobe to download and install the Adobe AIR Runtime, and the Adobe AIR SDK.

When you install the Adobe AIR SDK, you will want to add it’s bin/ directory to your environment path.

Step 2 – Create Some Directories

Next we need to create some directories for our code, create the following directories:

/appname/
/appname/source/
/appname/source/icons/
/appname/build/

Step 3 – Create an Application Descriptor

Your application descriptor is an XML file that sets some properties for your application.

Let’s call this file application.xml and place it in /appname/source/

<?xml version=”1.0″ encoding=”UTF-8″?>
<application xmlns=”http://ns.adobe.com/air/application/2.5″>
<id>com.example.fullysquared</id>

<version>1.0</version>
<filename>FullySquared</filename>
<initialWindow>
<content>index.html </content>
<visible>true</visible>
<width>608</width>
<height>435</height>
</initialWindow>
<icon>
<image16x16>icons/Victor_16.png</image16x16>
<image32x32>icons/Victor_32.png</image32x32>
<image48x48>icons/Victor_48.png</image48x48>
<image128x128>icons/Victor_128.png</image128x128>
</icon>
</application>

It should be pretty obvious what to put for all the values, the icon values will be used as your application icon, you can omit these if you don’t really want to create the PNG’s, but it’s kind of cool to see your own icons.

http://www.iconarchive.com/ – Good Place for Icons

There are a lot more optional tags you can add, check out the templates/descriptor-template.xml file in the Air SDK.

Step 4 – Create your Application

The next step can be as detailed as you like, but really all you need to do is create an index.html file.

<html>
<head>
<title>FullySquared</title>
</head>
<body>
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=”400″ height=”320″ id=”utv243923″><param name=”flashvars” value=”autoplay=false&amp;brand=embed&amp;cid=2352803″/><param name=”allowfullscreen” value=”true”/><param name=”allowscriptaccess” value=”always”/><param name=”movie” value=”http://www.ustream.tv/flash/live/1/2352803″/><embed flashvars=”autoplay=false&amp;brand=embed&amp;cid=2352803″ width=”600″ height=”400″ allowfullscreen=”true” allowscriptaccess=”always” id=”utv243923″ name=”utv_n_129718″ src=”http://www.ustream.tv/flash/live/1/2352803″ type=”application/x-shockwave-flash” /></object>
</body>
</html>

If you want to add CSS, JavaScript, or images, you can create subfolders in your /appname/source/ folder for those assets, and use them just like you would in a normal web application.

Step 5 – Test your Application

You are probably getting pretty anxious to test your new Adobe AIR application, to do that it’s pretty simple.

Open up a command prompt, or shell and navigate to /appname/source/ then run the following command:

adl application.xml

If all goes well your application should launch. There is a good chance however that you ignored my suggestion to add the airsdk/bin directory to your system environment path, in which case you got something like adl not found. If that is the case then simply append the full path to your SDK bin to the command, for example:

c:\air\bin\adl application.xml

Step 6 – Package Your Application

Once you have tested your application, or are ready to show your friends, or just want see how your icon looks in the Dock you are ready to packing your Air Application.

This step will be a bit cumbersome the first time because all Adobe Air application code must be digitally signed. Code signing, is a bit like using SSL, you get a certificate from a trusted source, and then people will know who wrote the application. This is important because the Adobe AIR platform allows you to access local files, and do all sorts of things that could really screw things up.

Chances are you really just want to show your new application to a few people, and not the entire world. If that’s the case then you can easily create a self signed certificate. It is important that the Certificate is not placed in your source directory, so let’s place it in the root of our application: /appname/

adt -certificate -cn SelfSign -ou Dev -o "Example" -c US 2048-RSA cert.pfx password

Now once we have a code signing certificate we can create an Air application Package. Change directories back into source and run:

adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/FullySquared.air application.xml .

You should now have an AppName.air file that you can send to your friends, or simply run it on your own computer.

Share

Comments are closed.

Download mp3