Menu

Beta — We’re reformatting our articles to work with the new site, but this is one hasn’t been done yet; it may contain formatting issues. No need to report this. We’re working on it.

Flash Strikes Back: Creating Powerful Web Applications

by Christine Perfetti
on August 20, 2002

Flash is a powerful tool that offers developers huge capabilities. Until recently,
developers mostly utilized Flash’s strengths to create complex animations or
fast-loading movies. However, the most recent versions of Flash offer developers
power that’s far beyond the tool’s original scope.

With the advent of Flash MX, we’ve seen that developers have the power to
create web applications with more sophisticated client- and server-side interactivity.
When integrated with sophisticated server-side software like ColdFusion Server
and JRun, Flash delivers the power and flexibility to become a serious contender
in the web application space.

Recently, we’ve been studying web applications that truly highlight Flash’s
benefits over traditional HTML-based applications. Web applications often involve
users completing a process, or a series of steps to get something done. Among
Flash’s greatest strengths, we’ve seen that it offers users the ability to
view all of the steps in the process in one visual display. Flash also enables
users to attack the application steps in their own order. These strengths dramatically
enhance the user experience by giving users control and understanding of an
application that’s not possible with traditional HTML.

Displaying the Big Picture

In our research, we’ve seen that Flash is a great tool for displaying a web
application’s user workflow. With HTML, users typically must access multiple
screens to complete a web application process, with little to no control over
the order of these steps. With Flash, developers can display all of the users’
necessary steps on a single screen, giving users a "big picture" view
of their workflow.

To illustrate, Volkswagen’s web site lets users configure their own car using
the Build Your Own Car function implemented
in HTML. Users can specify the type of engine, the color of the car’s exterior
and interior, and optional features.

To configure a car, the interface requires users to click through five different
screens. The problem is that users can’t see how many steps are ahead of them.
Users also don’t know if they can easily go back and change their specifications.
Choosing an interior trim that costs extra might be acceptable early in the
process, but when a more preferable option comes later, users may want to change
their interior again to reduce costs.

With the HTML application, users cannot tell if changing preferences will
be a simple process or not, thus adding an element of uncertainty to the experience
and increasing their chances that they will not complete the transaction.

In contrast, the developers of Volkswagen’s Asia Pacific application created
a car configurator implemented
in Flash. The configurator matches the functionality of the HTML implementation,
but it lets users choose all specifications on one screen. As a result, users
can drag and drop their specifications into a template to immediately see the
results of their actions.

(We do recognize that VW’s Flash-based application is not perfect. If we tested
this application, we would expect to see some users exhibit problems with the
design’s novel interface. However, Volkswagen’s Asia Pacific application does
a good job of demonstrating Flash’s ability to display an entire user workflow
on one screen, something not possible in HTML.)

In addition to the entire process being accessible on one screen, users get
immediate responses to their specifications, without having to wait for new
pages to load.

The Order of Things

Having a flexible application workflow also allows users to zoom into the
features that are most important to them first.

Imagine you want to revise your life insurance policy, but only want to change
your beneficiary information. In an HTML form, you may not be able to access
the beneficiary data until five screens into the process. Using Macromedia
Flash, developers can easily build flexible applications that let users attack
the process in their own order.

To illustrate, Moen
Design Center’s application
lets users build their own product on one
screen. Users can design their own kitchen by choosing the type of faucet
and the colors of the sink, countertop, cabinets, walls and windows.

In addition to viewing the entire workflow on one screen, users have control
over the order they specify preferences, something not easy to implement in
HTML. As soon as users specify the criteria, the visual display reflects their
choices.

While there are ways to create the Moen implementation with JavaScript and
HTML, it’s very clumsy and involves a great deal of download time. It would
require a JavaScript function that replaces one image, or choice, with another,
based on the colors selected. For Moen’s developers to do this with JavaScript,
they would need a separate picture of the kitchen with every possible color/sink
combination. This becomes very difficult for developers to manage.

Similarly, Timbuk2’s application lets
customers build their own messenger bag with control over the workflow. Users
can specify the size, material, color, and other features they want in a custom-made
messenger bag.

When buying a messenger bag, not all content is equal to users. For example,
some people who are price sensitive may want to jump across criteria, changing
the size and color of the messenger bag to make quick cost comparisons. Flash
enables designs to have a flexible workflow, allowing users to zoom into the
features that are most important to them first.

This article just scratches the surface of what is now possible using Flash
to create web applications. Flash’s leading-edge capabilities for creating
powerful interfaces and graphical displays are the first components in a new
wave of web applications. We’re confident that with the use of Flash, it will
be possible for developers to move far beyond the functionality possible with
traditional HTML-based applications.