Last year I had the pleasure to ride on the on AIR bus tour which visited 18 cities across the United States and Canada. People were genuinly excited about being able to create desktop applications using their existing web development skills. Another thing that I noticed during the tour is that many developers believed that they would need to learn Flex in order to get into Adobe AIR development. This couldn't be further from the truth. Although Flex is an excellent place to create Adobe AIR applications, Flash developers can now create applications right inside of Adobe Flash CS3 Professional. In this article, I will discuss the basics of creating applications with Flash CS3 Professional and will also talk about how to best decide whether an application is best suited for Flash or for Flex. (As a side note, Adobe is taking the on AIR tour to Europe starting at the end of March. For more information, visit the tour website.)

Using Flash CS3 Professional for Adobe AIR development

Flash CS3 Professional does not ship with any AIR functionality out of the box, but Adobe recently released a free update to enable the development and compiling of AIR applications directly from within the Flash CS3 authoring environment. This update, officially called Adobe AIR Update for Flash CS3 Professional, is available on both Mac and Windows and is very easy to install.

When you download and install the update, you will notice that there is a new Adobe AIR option in the Create New section of the welcome screen (see Figure 1). In the beta version of the update this is the only place where you can create a new Adobe AIR project. After creating a new Adobe AIR project you will notice that the Flash authoring tool looks exactly like it normally does when creating Flash files. This is because you will be building your applications pretty much the same way that you do for web-based Flash projects.

Figure 1. Create New section of the welcome screen

All Adobe AIR projects contain an XML-based configuration file, also known as the application descriptor file. In Flex you need to edit this file as raw XML, but in Flash there is a much more user-friendly GUI for editing this file (see Figure 2). If you look in the Commands menu you will see two new Adobe AIR related options. The first option, AIR – Application and Package Settings, will pop open this application descriptor editor. From this window you can set a wide assortment of properties for your application such as the name, description, icon, copyright and the type of window chrome that you want to use. The second command, AIR – Package AIR File, does exactly what its name implies. Selecting it will package your application and create an Adobe AIR file that you can then install or distribute. You can also package your application directly from the descriptor file GUI by clicking the Package button.

Figure 2. AIR application and installer settings

The AIR development environment inside of Flash is not perfect, though. First off, there is no Adobe AIR related help in the Flash help files. Furthermore, there is no code-hinting available for the Adobe AIR APIs when using the internal Flash ActionScript editor. Developers will also not see their trace() commands while testing Adobe AIR applications. You will need to run them in debug mode in order to see them show up in the Output panel.

Despite these shortcomings, this new update for Flash CS3 Professional is an excellent addition that will help Flash developers easily transition their skills to the desktop.

Knowing when to choose Flash over Flex

In my experience, any large-scale Adobe AIR application consists of both Flash and Flex. But for the purposes of this article, I'll focus on smaller applications that could be created in either technology.

The choice of Flash or Flex usually will come down to the nature of the application that you want to build. The following list presents a few scenarios where you may consider using Flash over Flex:

• Animation: This is a pretty obvious advantage that Flash has over Flex. The lack of a Timeline in Flex means that all animation needs to be coded from scratch using ActionScript. This is not necessarily a problem for today's code-heavy animators, but there are still many situations where using the Timeline is best. Flash CS3 Professional also has a great new feature where Timeline animations can be converted into ActionScript code, where you can then add in dynamic values. So any application that will make heavy use of animation would be an excellent candidate for Flash.
• Video: Anybody who has tried to do video in Flex will have noticed that the components available are very limited. The VideoDisplay component only displays video and does not offer any controls whatsoever leaving the developer to have to build them all from scratch. Flash CS3 Professional, however, ships with a wide range of advanced components that enabled developers to easily build and skin fully interactive video players. Any application that utilizes video will greatly benefit from being developed in Flash.
• Visual design: Another area where Flash excels is in the area of visual design. It is easy to design custom application skins inside of Flash thanks to its rich set of drawing tools. Flex, on the other hand, does not have any visual design tools and relies on the developer creating those assets elsewhere. Including a simple rectangle into a Flex application requires the developer to import an image file or SWF created in Flash.

Again, any substantial Adobe AIR application will end up being a combination of both Flash and Flex. Applications will typically be based in Flex and will embed SWF files that have been created in Flash. For smaller applications though, the new Adobe AIR update for Flash CS3 Professional allows Flash developers to stay in their world without having to learn Flex.

A sample application using Flash CS3

SpitEmOut was an application that I built entirely using Flash CS3 Professional. Upon launching the application, you will see a custom chrome FLV player. You need to drag an FLV file onto the application to get things started. As the video is playing, you can click the camera icon to take a snapshot of the video, which gets "spit out" onto the desktop (see Figure 3). To save the screenshot, you need to right-click the image and choose Download Screenshot. This allows you to encode the image to the PNG format and save it to the desktop. You can download both the AIR installer and source code for this application at http://theflashblog.com/?p=339.

Figure 3. SpitEmOut sample application

Where to go from here

For more information about Adobe AIR, visit the product page.

For more inspiration, check out the sample applications in the Adobe AIR Developer Center for Flash, Flex, and HTML/Ajax, as well as the Adobe AIR Developer Derby winners and the apps showcase.

To get started building Flash apps on Adobe AIR go to the Getting Started section of the Adobe AIR Developer Center for Flash or follow the instructions in Developing Adobe AIR applications with Adobe Flash CS3.

About the author