Makeovers

[ LiB ]

You don't have to just take my word for it that Flash can deliver RIAs; I'll show you it can. The following section walks you through a few examples of rich Internet apps and point out both where they succeeded and where they leave a bit to be desired.

Broadmoor Hotel

This example gets a lot of airtime from Macromedia even though it's not exactly state of the art. (It came out in 2001.) In any event, it's useful as an example of an RIA because, for one thing, people can identify with the problem it solvesnamely, making a hotel reservation efficiently . If you visit www.broadmoor.com and follow links to make a reservation, you'll see a single-screen reservation tool, as shown in Figure 1.3.

Figure 1.3. In one screen, you can book a room at the Broadmoor Hotel.

One key feature is that you'll never make a request only to find out the dates aren't available, because everything is updated while you make selections. When you click Date Ranges in the calendar on the left, for example, any room types unavailable for those dates are immediately removed from the list in the center. Similarly, when you select a room type, the dates for which that room is unavailable are removed from the calendar. Another cool feature is that you're given a photo of the room right inside this interface. The icons provide another subtle, but useful visual clue (statuses such as available, unavailable, or available for a checkout date only). Finally, you can pay for the room and complete the reservation from the column on the right. Unlike some particularly frustrating sites, you won't fill in a form only to be told you're missing key information (and then have to fill it in again). You never leave this "oneScreen" interface (as it's called by the developer iHotelier.com).

Although this example doesn't include a "before and after," if you've ever made any sort of reservation online, I'm sure you can appreciate some of the advantages of this interface. Note, however, a legitimate criticism of the Broadmoor example: The text is hard to read. If they would have only had the Flash 2004 Alias text option, I think it would have looked a lot better.

XML News Aggregator

Macromedia has been great at deploying useful Internet apps (using Flash) for their own needs. The registration form to their MAX conference provides an excellent example. So does the DevNet Exchange, where you can search and display a variety of extensions to Macromedia products. The only problem with these examples is that rarely are non-RIA versions available for comparison.

The XML News Aggregator is a good example to study, too, because it has both an HTML and Flash version. These two versions of the same tool gather headlines from a variety of Macromedia- related weblogs (also called blogs ). This app enables you to scan just the headlines, with various icons identifying attributes of the story, and to link to read more (see Figure 1.4).

Figure 1.4. The HTML version of Macromedia XML News Aggregator is nice, but it lacks the features found in its Flash counterpart .

You can check out the HTML version yourself at www.markme.com/mxna. This version is perfectly useful. In fact, the text display can be easier to read and more transferable if you try copying. In this example, however, the HTML version can't be customized very much. About all you can do is limit the list to articles in a single category.

The Flash version drops the "Macromedia" because you can actually customize it to import and display feeds from anyone 's blog (provided the blogger has an RDF syndicated version and uses standard tagsmore about RDF in Chapter 6). Figure 1.5 shows what the Flash version looks like.

Figure 1.5. The all-Flash News Aggregator enables you to customize which blogs to monitor.

This version doesn't really include much "rich" media. However, a few attributes do stick out. First, several animated icons appear while the app is busy downloading. Just seeing the animation tells you the app is working. Also, the entire display's colors, fonts, and layout are presented exactly as the designer wanted. For example, there were no restrictions on what typeface to use like there is when using HTML. On top of this, the layout will look the same on any machine using Flash. Finally, the Tree component was used represent a hierarchy of nested folders in a space-efficient manner.

Overall, the Flash version uses space more efficiently. If they had gone further, they would have let users arrange and resize the different panes. Keep in mind, however, that you can actually pick through the code for this application because it's included in Macromedia DRK 3 (Developer Resource Kita quarterly CD-ROM available by subscription or individual purchase). Finally, realize that this app is the real thing: I can use it to monitor several blogs that follow without actually surfing anywhere .

Stampede Cattle

The following example highlights an application I built to extend an existing HTML-based cattle auction site with a real-time auction component. That is, they had and still have an "eBay-like" auction site where buyers can explore the catalog of available cattle. Buyers can place bids in advance and, eventually, the cows will go to the highest bidder. Naturally, this can take several days. My client had planned the real-time auction long before the Flash Communication Server (FCS) was available. It was like a product made for their application. What I built with the server-side developer was a Flash app that serves as a virtual sales ring. You're welcome to attend a live auction at www.stampedecattle.com (see Figure 1.6).

Figure 1.6. While keeping the look and excitement of a real auction, Stampede Cattle can move $3 million worth of cattle in a matter of hours (without getting their hands dirty).

Bidders still place bids in advance using the existing HTML site (and the highest pre-bid shows up during the live auction). Then on the day of an auction, you can enter the Flash interface and see each lot go up for sale. The auctioneer makes a few last-minute announcements and JPGs of the cattle show up in the ring. Then the clock starts ticking. Buyers can place bids, and everyone sees the state from which the bid arrives. It feels like a real auction because you'll often see a buyer from one state trying to outbid another. There are a bunch of other features, including an auditing feature that archives every auction. In addition, the auctioneer has a different view of the applicationone with more details, such as a list of connected buyers. It's a kick to watch (which you're welcome to do by logging on as a spectator). To me, the most amazing part is the sheer volume of cattle involved. Each sale that lasts about 1 hour involves about $3 million in cattle!

I wanted to point out this example because it's not a case where we tried to replace an existing site. This app is integrated with what they already had. We used Flash where it could do something uniquespecifically, enable bidders to connect to the same set of data and to be notified of changes in real time. There was a fair bit of audio and animation, too. Although these may seem gratuitous, in fact the goal is to engage the user . It's no secret the objective is to encourage bids. A live auction has a lot of emotion, so by adding a sense of urgency with sound effects and timing we made this app effective.

[ LiB ]