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
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 4. Give your project a name and click Next.
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 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 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.
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 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 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.
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 14. There will now be an Adobe AIR application in your project folder. Double click on this to install and launch your application.
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.
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.
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!