Developer Connection Article

Six must-see Adobe AIR sample applications

Since the alpha release of Adobe® Integrated Runtime (AIR; formerly code-named Apollo) on March 19, dozens of next-generation rich Internet applications (RIAs) built on top of the Adobe® AIR™ runtime have been designed, developed, and distributed across the Internet. Internally, the development teams have been inspired by the imagination, creativity, and resourcefulness reflected in the Adobe AIR applications released so far.

For many of us here at Adobe, including myself, the reason we wound up in the business of building tools and runtimes like Flash Player and Adobe AIR is the pure excitement and satisfaction we get from seeing customers take technology and design to the next level. We're thoroughly looking forward to what you dream up next, so please don't hesitate to let the community know if you're working on something new.

Almost all of the Adobe AIR applications built so far have used the alpha version of Adobe AIR. With the release of the beta version, developers will have significantly more tools in their tool chest (and designers more brushes and paints for their palettes). Adobe AIR beta introduces support for the open source, cross-platform SQLite database, local file system dialog boxes, drag-and-drop support, major performance enhancements to the HTML component, and more.

In this article, I'd like to highlight six impressive Adobe AIR sample applications (which is but a small sample of the outstanding work I've come across in the past few months): Twitter, kuler desktop, Fresh, Finetune Desktop, DiggTop, and SearchCoders/Dashboard.

Twitter

Author Lee Brimelow of Frog Design has developed one of the most visually striking Adobe AIR applications I've come across. If you're not familiar with Twitter, it's a very simple way to keep in contact with friends and find out what they are up to, typically in the form of a sentence. For example, someone might publish a message that he or she is "checking out the Adobe AIR beta" or "washing my car" and this will be broadcast to friends of that individual using a variety of media, including the Twitter website, SMS messages, and instant messengers.

Lee Brimelow's Twitter application now extends that capability to the desktop. After you have created a Twitter account and added some friends, this application provides a clean interface for keeping tabs on what's happening in your own circle. As friends publish new comments, they will appear automatically within the application saving you from having to log into the website again.

When you roll over an entry, you'll see a tooltip displaying the name of the user as well as the time it was submitted to Twitter. Just below the list of entries sits a text box where you can publish your own comments from within the same user interface. In the upper right corner is a refresh button.

Some of things that stand out to me about this application include:

• A beautiful interface that takes advantage of the transparent and customized windows in Adobe AIR (look closely and you'll notice that you can see through the window as well as a very soft drop-shadow effect)
• The inclusion of your friends' icons (see Figure 1)
• Automatic background refreshing
• Offline support

For developers, this is a great example of incorporating the Twitter API into a desktop application.

Figure 1. Twitter takes advantage of the transparent and customized windows in Adobe AIR.

• Download Twitter

kuler desktop

For designers, color theory is an integral part of creating a differentiated experience that's consistent with the message he or she is trying to convey. The topic has been covered extensively in books and it's often required learning in art school. Fortunately, for those of us less familiar with these principles and guidelines, kuler can help print and web designers feel a bit more comfortable on the subject by providing useful suggestions.

kuler desktop is a rich Internet application (RIA) that has hundreds of community-contributed and -rated color schemes. Initially released as an application on Adobe Labs, the kuler team recently released an Adobe AIR version that is extremely stylish and useful. Some of the functionality includes:

• A gorgeous user interface that resembles a painter's palette (see Figure 2).
• A search capability for discovering themes that might match a certain mood or environment (such as "storm").
• The ability to copy color codes into the clipboard by clicking a color followed by the # character that then appears to the right. You can then paste these into your favorite design tool such as Adobe Dreamweaver or Adobe Photoshop.
• Additional information about the color scheme when you mouse over it, such as the author and number of downloads.

Figure 2. kuler desktop enables professional and aspiring designers to discover color schemes.

From a developer perspective, kuler desktop is interesting because it shows how an RIA can take advantage of RSS feeds to create dynamic user interfaces. In this case, an RSS feed is used to dynamically populate lists such as most popular or downloaded color schemes. The user interface components, both visually and in terms of interaction, establish an intuitive yet highly customized experience that's consistent with the website.

To learn more about kuler desktop, check out the snazzy tutorial.

• Download kuler desktop

Fresh

If you're behind on your favorite blogs and want to be able to read them on the go, I highly recommend downloading Fresh. This application enables users to view, manage, and share their RSS feeds.

Some of the features that I particularly like about Fresh include:

• A skinnable interface that enables users to customize the look and feel of the application using themes
• Offline support so you can access feeds when disconnected
• Ability to view extended entries as HTML pages within the application (see Figure 3)
• Import and export feeds using an XML-based file-format known as OPML
• Advanced preferences for turning on or off automatic background refreshes
• Keyboard shortcuts for performing common tasks (Tip: Click R to refresh all feeds and M to mark all feeds in the selected category as read)
• Statistics on the number of categories, feeds, and unread items

Figure 3. Fresh is a great example of an HTML-based Adobe AIR application.

From a developer standpoint, Fresh is a terrific example of an Adobe AIR application built using HTML and Ajax. The application was developed by an internal team at Adobe using a popular Ajax library developed by Jack Slocum called Ext JS. If you are an Ajax developer interested in learning more about how this application was built, I'd encourage you to download the source code from Adobe Labs and check out Jack Slocum's website.

• Download Fresh

Finetune Desktop

Finetune is an online music recommendation service that streams songs from your favorite artists and creates playlists tailored to your unique interests.

With the Adobe AIR version of the application, Finetune Desktop, you are no longer restricted by having the web browser run an instance of your media player. Instead, you can interact with the application directly. Finetune Desktop also enables you to play your favorite tunes right off the local machine, including those by Apple iTunes.

Finetune Desktop mixes web-based media content with information from your local MP3 library, enabling you to mix streamed and local content.

The following aspects to this application I find particularly appealing:

• A highly stylized user interface that includes 3D effects (see Figure 4)
• Automatic updates
• Integration with the local hard drive so I can play my local music files 
• Intelligent recommendation system (it really works!)

Figure 4. Finetune streams music tailored to your interests based on music you already like combined with its community-based recommendation engine.

• Download Finetune Desktop

DiggTop

Grant Skinner established himself as a Flash guru many years ago, and his design firm is well on its way to doing the same as an Adobe AIR application developer, as evidenced by their creation of DiggTop. This application demonstrates many advantages to the Adobe AIR runtime, including how well Adobe AIR applications can interface with web APIs such as the Digg API to create highly customized user interfaces.

Some of the features that really captured my attention include:

• A branded user interface that has the look and feel of the Digg website
• An integrated, customized video player (see Figure 5)
• Automatic slideshow creation by scanning image links within the source article (see Figure 6)
• A self-updating mechanism that will download automatically a new version of this application
• An advanced settings dialog box, which allows for intuitive filtering of articles and videos as well as control over notifications (see Figure 7)

Figure 5. DiggTop includes support for videos posted to Digg using the built-in video player.

Figure 6. In addition to video, DiggTop extracts images from articles and creates dynamically generated slideshows.

Figure 7. Customize your Digg feeds to your heart's content and even create your own keyword filters.

DiggTop packs an incredible amount of functionality into a small amount of visual real estate (roughly 515 pixels wide by 300 pixels high). DiggTop looks like a finished product, but I suspect that Grant Skinner is going to push the limits even further with the new drag-and-drop support in Adobe AIR beta.

• Download DiggTop

SearchCoders/Dashboard

The Flex developer community is pushing new ground every day. One way to keep up with the community is to install the SearchCoders/Dashboard, which makes extensive use of Adobe AIR capabilities. This Flex based application has many brilliant, community-focused features including:

• Integrated support for threaded discussion forums, chat rooms, job boards, RSS feeds, and notes
• Transparent, dynamic windows with drop shadows
• Customized window chrome
• A very advanced search system
• Extended functionality through a user login system

The search functionality is particularly useful for finding help about a particular conversation you might be interested in. For example, you can search for all posts from a particular person or a domain such as adobe.com. This is a terrific example of the type of a desktop application that can be targeted at a certain community and would have been prohibitively expensive to build with traditional desktop application building environments.

One other unique aspect to this application is that it includes a tasteful advertising component built into the user interface (see Figure 8). As Adobe AIR developers continue to build more advanced applications, it’ll be interesting to see how they support business models such as subscriptions and advertising.

Figure 8. The SearchCoder/Dashboard AIR application includes a tasteful advertising component.

• Download SearchCoder/Dashboard

Final note

I've discovered many other applications that I would encourage you to check out as well, including an application for exploring and managing widgets called yourminis. Many applications that are still under development and have not been publicly announced yet are sure to continue to inspire the community.

About the author