Main Content

Adobe Air Application Tutorial for Web Developers

This tutorial covers the very basics of creating an Adobe AIR application that will work on Mac, Windows and Linux. It will show you what software to install and how to turn some web code into an Adobe AIR application. You will get enough information to get you started and from there you can create the next great Adobe AIR application.

Step 1. Get Aptana Studio – It’s free. http://www.aptana.com

Aptana Studio Logo

Get Aptana Studio

Step 2. Get the Adobe AIR plug-in for Aptana Studio. http://www.aptana.com/air

Step 3. Create a new project in Aptana by going to File -> New and choosing Adobe AIR Project.

Step 3

Step 3 - New Project

Step 4. Give your project a name and click Next.

Step 4

Step 4 - Project Name

Step 5. Ensure the ID, and file names, have no spaces in them. Fill in the version number, description, and copyright if you’d like, however it’s not required at this time. Click Next.

Step 5

Step 5 - No Spaces

Step 6. Change the window options as you please. You can choose to show or hide the systems toolbar, set the height & width, maximum height & width and resizing options. For my example, I’m choosing 300×500 and resizable. It’s good to ensure that your minimum height or width is not larger than your window width or height. Click Next.

Step 6

Step 6 - Window Properties

Step 7. I’m not up on my Ajax, so I skip this step. If you know your Ajax, then choose what you like here. Click Finish.

Step 7

Step 7 - Ajax

Congratulations! You’re basic Adobe AIR application has been created. Lets customize it now.

Step 8. Click on the projects tab and click the arrow next to your project folder. Inside you’ll see all the files that make up your project. You can double click on any file to edit it.

Step 8

Step 8 - Your Project

Step 9. Your application’s icons are stored in the icons folder. You’ll want to replace them with new creations of your own. You can right click on the folder and go to Explore Icons to see where they are saved on your computer and replace the images with your own creation. Transparent PNGs work the best.

Step 9

Step 9 - Icon Images

Step 10. The HTML file that has your project name on it is your index page. This is the default page that shows when the Adobe AIR app opens. It’s basic HTML so edit it as you please. The code that is auto generated can be replaced with that of your own creation.

Step 11. Start customizing! It’s just HTML so go ahead and code away. You can create new documents by going to File -> New HTML file. Linking to other files is all relative to your index page, just like on the web. You can also link to URLs and images to the web if you’d like. Your CSS file is called sample.css.

Step 11

Step 11 - Customize HTML

If you’re not a huge fan of Aptana’s editor, locate the files on your hard drive and use your favorite HTML editor.

Step 12. application.xml is the file that has all your application’s identifying information in it. The application name, version number, description and more. Feel free to edit that as need be.

Step 13. Now lets create and test our Adobe AIR application. Simply click the AIR folder in the toolbar and hit finish.

Step 13

Step 13 - AIR App Creation

Step 14. There will now be an Adobe AIR application in your project folder. Double click on this to install and launch your application.

Step 14

Step 14 - AIR App

That’s it! You now have a very basic Adobe AIR application that works on Mac, Windows or Linux. You can continue to edit and configure your project files as much as you want. To re-package and test the application, simply follow steps 13 and 14 again.

TwisterMc's Basic Example

TwisterMc's Basic Example

To share this application, you can email someone the .air file or use the Adobe Air Badge Builder app to allow one click installs from a web page.

Something I’ve found handy is to use iFrames and mobile versions of a website to create desktop versions of web apps. Below, I put in the iPhone version of Weather Underground and it works quite well.

Weather Underground App

Weather Underground Application Example

It’s now up to you to use your talents to create the next great Adobe AIR application.  As you create applications, come back and share yours.  I’d love to see what you come up with!

4 Responses

  1. Bob says:

    thanks for the tutorial, may be some day i will develop some adobe apps.

  2. Craig says:

    Perfect, this was exactly what I needed in order to get started with creating Adobe Air releases! Thanks for the pointers 🙂

  3. Cyber says:

    At last!!!

    Thx for this simple and amazing tutorial!!! It’s perfect!!! 😀

  1. 5/7/2009

    […] Adobe Air Application Tutorial for Web Developers […]

Leave a Reply