Download SBI Perspectives

March 2003
SBI Perspectives
Developing Rich Web Interfaces With Flash
By: Erik Botsford
Report 066
Developing Rich Web Interfaces with Flash | 1
Introduction
Macromedia Flash continues to be one of the most heavily used rich media platforms
for website development on the Internet. Flash products can be found on the web in
animated introductions, complex interfaces, navigation bars, games, and narrative
mini-movies, as well as in kiosk applications, on PDAs, cell phones, dedicated CDROMs, and even ATMs. However, the reputation of Flash has seen its ups and
downs. Its very name seems to say it all: glitz, speed, and not much substance. While
this may have been true in the past, when Flash-based “brochureware” and “Skip
Intro”-style introductions were typical of many major websites, Flash is changing.
Macromedia has added significant new functionality to expand Flash’s use into the
realm of web applications and database-integrated interfaces. These new directions
mean that companies can consider Flash as a stable, cross-platform solution for
delivering dynamic, database-driven, and engaging experiences to users.
What is Flash?
At its core, Flash is a software application produced by Macromedia for the creation
and production of rich media content. Users can view Flash files on their web
browsers, cell phones, and PDAs using the free Flash Player. Here are the two types
of Flash platforms in more detail:
Copyright © 2003 SBI and Company. All rights reserved. SBI and Company is a registered trademark.
Flash
Development
Software
FlashMX is the latest software tool used by designers and developers to create
Flash files or applications. Designers and developers use this software to create
Flash applications, in much the same way as you may use Microsoft Word to create
written documents. The different versions of Flash (Flash 2, Flash 3, Flash 4, Flash
5, and FlashMX) contain significant differences in functionality and capabilities.
Early versions were primarily web animation tools, while more recent versions have
added capabilities that move well beyond animation into the area of Web
applications. Flash 5 and FlashMX are the most commonly used versions and have
the most sophisticated capabilities.
Flash produces two different file types as outputs: FLAs (pronounced flahs) and
SWFs (pronounced swiffs). FLAs are editable “work in progress” files. From these
FLAs, designers and developers publish final, non-editable files as SWFs for
delivery to the client and display.
Flash Player
The Flash Player is the application used to view Flash files. The Player is bundled
as a plug-in with all major browsers, allowing Flash files to be viewed as a
component of webpages. Today, Macromedia claims that 98% of browsers in use
have some version of the Flash Player installed and that 72% of web users in the
United States have the latest, Flash 6 Player
(http://www.macromedia.com/software/player_census/flashplayer/penetration.html).
The Flash Player can also be used outside of a browser as a standalone application
if Flash files are viewed from a CD-ROM or in a kiosk application. Flash Players,
similar to Flash software, have different evolutionary versions (Flash Player 2
through 6) with varying capabilities and levels of functionality.
Why now, and why Flash?
We are at the cusp of a major change in the quality of web application interfaces.
Traditional HTML and browser-based interfaces have thrived because they offer
unprecedented reach, accessibility, and ease of deployment. While IT organizations
have embraced browser-based applications for these reasons, the end results are
often less than ideal.
The many inherent limitations of HTML-based interfaces impede usability when
they’re employed for true applications. It is difficult to design HTML interfaces
Developing Rich Web Interfaces with Flash | 2
optimized for certain tasks. HTML offers a limited set of interaction possibilities,
making tasks that increase efficiency (like dragging and dropping) difficult or even
impossible. Tasks that users expect to complete in one step must often be completed
across multiple pages in multiple steps. Extensions such as Dynamic HTML can
remedy some of these problems, but run the risk of significant cross-browser and
cross-platform compatibility issues.
Take, for example, the task of booking a vacation package online. With a traditional
HTML-based interface, users must specify dates, room preferences, flight
information, and purchase details across multiple pages. Each step of the process
requires loading heavy pages of redundant interface code in order to tease out
information about available flights or room availability. Errors made in entering
information usually require navigating back to the original page and often mean that
users must re-enter all of their choices.
The new Flash suite overcomes these limitations by enabling the design of
applications that offer the best of all worlds: the reach, accessibility, and ease of
deployment of browser-based applications; the robust interfaces and functionality
we’ve come to expect from desktop applications; and the rich palette of design and
animation that are Flash’s traditional strength. Further, the growing library of pre-built
interface components speeds development time by letting developers focus on
application logic, not basic interface functionality.
Copyright © 2003 SBI and Company. All rights reserved. SBI and Company is a registered trademark.
The Broadmoor Hotel online reservations system
(http://reservations.broadmoor.com/) illustrates the benefits of Flash-based
applications. On a single screen, users can select dates for hotel stays, view room
availability, see room photos and descriptions, and secure reservations with a credit
card. Content is real-time and dynamic: clicking on a room type updates the calendar
to show available dates, without the need for a page reload. In a traditional HTMLbased interface, this task would take five or six pages to complete.
Flash applications offer rich interaction possibilities (e.g., drag and drop, widgets that
change state based on user events), experience fewer compatibility problems
(developers can largely avoid browser and platform differences), use bandwidth more
effectively (it’s not necessary to download an entire page, just the data that’s
changed), and fit into typical J2EE and .NET architectures.
The recent advances in Flash functionality mean that companies need not commit to
all-Flash solutions to harness its unique capabilities: Flash modules can be plugged
into standard HTML interfaces. For example, E*Trade developed a Flash-based
quote module that is a component of its larger HTML site. The module, which is one
of the site’s most popular features, allows users to access quotes quickly without
reloading the HTML page. Separate Flash modules on an HTML page can also now
talk to each other, meaning that an extension to E*Trade’s implementation could
allow quote data to pass into Flash-based portfolio wizards or trading modules.
So what’s the business case? All business cases depend on sites actually being
used, and, as with any application, use can’t be legislated. Unless the interface
effectively supports users’ tasks, and does so in a satisfying way, business owners
run the risk of lower adoption—and lower benefits. Too many sites today never
garner the adoption, and benefits, expected. The need for a solid ROI is driving the
adoption of Flash development for rich user interfaces. With the new generation of
Flash, it becomes easier for skilled interface designers to create applications that are
adopted and used.
What does Flash offer?
Flash provides users a sophisticated level of interactivity that cannot be easily
achieved using non-Flash technologies such as HTML, Dynamic HTML, Scalable
Vector Graphics, or Java. The technology used to display and deliver Flash content,
Developing Rich Web Interfaces with Flash | 3
Macromedia’s Flash Player, has one of the largest installed user bases of any
browser plug-in, ensuring that users, clients, and customers can access Flash
content without any downloads or software installation. The benefits of using Flash
are numerous and have multiplied with the recent release of FlashMX and Flash
Player 6, the browser plug-in used to view Flash files.
Advanced Flash application development capabilities
Flash offers benefits beyond clean interfaces and smooth interactivity. The recent
release of FlashMX added significant capabilities that expand its potential as a
dynamic web application platform.
Local data storage: A Flash application can store data on a user’s local hard drive.
The local data can contain information similar to that stored by a cookie, including the
user’s personalization preferences, personal information, and identifiers that can
integrate with back-end systems for more powerful uses. Local data can also contain
references to Flash objects, functions, and methods.
Local connections: Flash files running in separate sections of a webpage, or in
separate open windows, can establish connections with one another and pass data
back and forth. This could allow the placement of multiple separate Flash
applications on a webpage, separated by HTML content that can talk to one another
as if they were a single application. Thus project teams may consider Flash-intensive
pages without committing to an all-Flash site structure.
Copyright © 2003 SBI and Company. All rights reserved. SBI and Company is a registered trademark.
Flash components: Historically, one of Flash’s great strengths has been the ability
to reuse graphics and movie clips within a file and across different files, thereby
reducing file sizes and download times. FlashMX takes this concept one step further
by allowing developers to create reusable pieces of functionality that can be
preprogrammed and plugged into multiple Flash applications. For example, a
developer could create a pulldown menu component and distribute it to the entire
development team. Each team member could then drag the component into their
Flash project and utilize its functionality immediately.
Database integration and Flash Remoting: To move beyond Flash’s traditional
movie-like presentation style into the realm of true web applications, Flash must be
able to respond to users’ needs and provide content and information dynamically. A
critical part of such functionality is the ability to integrate with and pass data to and
from databases. Flash5 and FlashMX both contain methods that allow Flash to read
from and write data to databases such as MySQL, SQL, and J2EE using XML, PHP,
ASP, or JSP as intermediaries. This eliminates one of the major concerns related to
Flash: the difficulty in updating and maintaining content. Now, data can be
maintained through normal content management procedures and then pulled into
Flash for display.
Perhaps the most exciting and promising new development in FlashMX is the
introduction of Flash Remoting and the Flash Communications Server. These tools
allow Flash to interact directly with back-end databases without using intermediaries
such as ASP or JSP to pass data to and from the Flash Player.
Remoting involves placing server-side ActionScript on the server, the methods of
which can then be invoked from the client-side Flash Player to query the database
and exchange data. Flash Remoting removes the middle layer between the client
and the server, allowing for simplified and rapid communication between the two.
Flash Communications Server allows the Flash Player to receive, manipulate, and
display streaming, real-time data. For example, Flash could be used to display
streaming real-time market data that users could manipulate to view from different
angles. At the same time, users could chat in real time about the data and could
share ideas collaboratively using “whiteboard” functionality within the same Flash
application.
Developing Rich Web Interfaces with Flash | 4
In short, with its advanced capabilities, Flash no longer has to “look like Flash” to be
effective. Flash can provide an elaborately animated interface, but can also sit quietly
and serve as the engine behind dynamic web applications.
High quality graphics and page display
High quality animations and transitions between sections of content are the most
obvious benefits of using Flash, providing users with smooth, seamless interactive
experiences. Instead of frequent page reloads and the hard-edged type that are the
hallmarks of traditional HTML development, users can interact with content that has
clean, smooth designs and without page reloading.
FlashMX also allows for the integration of QuickTime video files directly into Flash
files, meaning that video content can be embedded in a Flash file. Products can
include Flash-based controls for playing, stopping, rewinding, and zooming of video
content, removing the need for separate media players and pop-up windows.
New scripting tools also allow for the dynamic, script-based creation of vector
graphics, such as lines, fills, circles, curves, and polygons. Shapes can be drawn on
the fly, used as any other movieclip, and removed, without using significant amounts
of memory or storage space.
Efficient, lightweight files
Copyright © 2003 SBI and Company. All rights reserved. SBI and Company is a registered trademark.
Delivery of rich content via the web necessitates close monitoring of file sizes. Most
Internet users still connect via dial-up connections; waiting for content to load is an
extremely frustrating experience that could potentially drive customers and users
away from your website.
Flash allows designers and developers to strike a balance between rich graphical
presentation and functionality and lightweight file sizes. Flash files are optimized for
the delivery of vector-based graphics, which require much less file size than
comparable graphics presented as images on HTML webpages. Flash also
incorporates advanced compression algorithms for music, video, and non-vector
image files that reduce size without sacrificing quality.
Most importantly, applications based on Flash and integrated with databases or realtime data connections do not require full page reloads to refresh data. Whereas
HTML applications must continually pass the full HTML file from the server to the
user, Flash allows you to pass only the refreshed data, eliminating redundant
bandwidth use and server loads.
Increased accessibility and usability
As the imperative to do business via the web grows, companies and users (not to
mention judges and juries) are calling for increased levels of accessibility and
usability on websites. Flash has been the subject of much criticism from both usability
professionals and advocates for the disabled for its impenetrability to web assistive
devices (such as screen readers) and its lack of usability standards support.
FlashMX specifically addresses these criticisms for the first time. Flash movies can
now be tagged with text comments accessible to screen readers and other assistive
devices. New scripting methods can detect the presence of an active assistive device
on a user’s system, allowing specific content to be targeted to users with disabilities.
Developers can also make use of features that enhance usability by letting users
navigate through Flash movies with the browser’s Back and Forward buttons and
bookmark specific sections of a Flash movie.
Developing Rich Web Interfaces with Flash | 5
Deep penetration of Flash Player
Unlike traditional HTML content, which can be viewed simply by opening a page in a
browser, users need to install a special plug-in application for Internet Explorer or
Netscape before they can access Flash content. The good news is that this plug-in,
the Flash Player, has come pre-bundled with every major browser release. This
means that the vast majority of users will be able to access your Flash content
without any downloads or installations, just as they would regular HTML content.
Managing a Flash development project
The unique nature of Flash products demands a unique approach to Flash
production. SBI has extensive experience in developing Flash solutions for clients
and, as a result, has identified best practices that enhance Flash project efficiency
and success.
1. There must be a willingness to recognize that site architecture, design, content
development, and interface development can be more complex with Flash
projects. For example, since both logic and presentation can be embedded in the
FLA files, the project can lose time in transferring files from designer to interface
developer. Close communication among team members of various disciplines will
shorten feedback loops and encourage sharing of expertise—helping to avoid
delay.
Copyright © 2003 SBI and Company. All rights reserved. SBI and Company is a registered trademark.
2. Flash liberates information architects, designers, and developers from the
constraints of HTML and enables them to adhere to the familiar conventions of
desktop applications. While this can lend immense value to your project, it also
runs the risk of producing websites and products that are visually confusing,
difficult to use, or non-compliant with usability standards. Flash does not
eliminate the need for skilled information architects and interface designers.
3. Project organization is of ultimate importance for Flash projects. Team members
must maintain and regularly consult a centralized source for asset description
and storage. File, asset, code, and script nomenclature must be as clear and
specific as possible to enable efficient progress and a smooth hand-off of project
assets. Because of the time involved in creating final publishable files, a clear
client sign-off process is even more important than with traditional HTML
development.
4. Flash does not eliminate the need to consider the users’ system capabilities.
While Flash mitigates some of the effort involved in dealing with various
platforms and browsers, different versions of the Player do have different
capabilities. Accordingly, content can be developed based on the Player version
with the most limited functionality, or a strategy for prompting Flash Player
upgrades can be adopted.
Conclusion
Flash has long been the gold standard for delivering visually engaging and welldesigned content on the web. The increased emphasis on web application
development (and the limitations associated with such applications), together with the
recent release of FlashMX, has opened a new chapter in the use of Flash on the
web. Flash-based applications allow for rich, interactive interfaces; robust, stable,
and widely available viewing platforms; low-bandwidth, single-step task completion;
and integration into existing architectures. As individual and business Internet users
become aware of the benefits of rich web user interfaces, Flash-based components
and applications will become more important in realizing the Internet’s promise of
increased efficiency and value.
Developing Rich Web Interfaces with Flash | 6
Copyright © 2003 SBI and Company. All rights reserved. SBI and Company is a registered trademark.
Appendix
Ford Motor
Company
SBI created a complex, in-depth Flash website for Ford’s Centennial
celebrations. In addition to managing and displaying a large amount
of Flash-based content, SBI developed functionality that allows users
to enter in personal recollections of Ford Motor Company vehicles,
which are then stored in a database and dynamically added to the
Flash site.
International
Flavors &
Fragrances
SBI designed and developed a three-minute Flash-based marketing
CD-ROM showcasing IFF’s strengths and service offerings. Complex
animations and transitions were fully controlled by scripting, creating
a lighter and more efficient presentation of high-resolution imagery.
adidas
SBI has developed numerous flash based sitelets for adidas. We
have launched several new products such as the Kobe, T-Mac, and
T-Mac II. SBI integrated the flash micro sites into an overall
integrated marketing strategy that combines advertising, database
marketing, and promotions. Overall, abandonment is significantly
down, length of visits are up, and retailer referrals are consistently
rising.
Cartier
Cartier chose SBI to design a Flash sitelet showcases the renovation
and reopening of its flagship New York store.
U.S. Trust
U.S. Trust wanted to highlight its recently updated website for client
account access (also designed and developed by SBI), and asked
SBI to create a Flash demo. The demo was designed to be modular
and easily expandable, which has saved U.S. Trust time and money
when featuring newly added sections of the website.
CEMEX
SBI added a dynamic animated element to Cemex.com with a Flashbased navigation system.
HBO
SBI designed and developed the online companion to HBO’s Band of
Brothers television series. Exclusive web episodes featured rich
content, including audio commentary and complex infographics and
animations.
Mattel Corp.
(Mattel.com,
Barbie.com &
myscene.com)
SBI designed and developed the Mattel corporate site, barbie.com,
and myscene.com – our newest project where SBI helped to launch
the latest product line of dolls targeted at a new market. Rich media
is being effectively used to create a much more interactive
experience increasing total visit time to the sites.
Developing Rich Web Interfaces with Flash | 7
About the Author
Erik Botsford ([email protected]) is a Senior Interface Developer at
SBI.
About SBI
SBI and Company is a leading professional services firm that delivers measurable
business value to market leading companies in a focused set of industries. SBI helps
clients:
•
Develop meaningful customer relationships through effective integrated and
interactive marketing.
•
Improve collaboration with employees, partners, and suppliers through realtime enterprise systems, Web services, Intranets, and portals.
•
Improve business performance through digital dashboards, enterprise
content management, business process design, and program management
offices.
These solutions combine insight-driven design, technology expertise and business
process knowledge.
SBI has offices in major cities across the United States and a European base of
operations in London.
Copyright © 2003 SBI and Company. All rights reserved. SBI and Company is a registered trademark.
If you have any comments, suggestions or questions, please contact Christian Juhl at
SBI and Company.
Christian Juhl
SBI and Company
[email protected]
tel + 1 415 369 6506
fax + 1 415 284 7090
410 Townsend Street, First Floor
San Francisco, CA 94107
For more information visit: www.sbiandcompany.com.
SBI Perspectives are edited by Perry Hewitt ([email protected]), Director
of Marketing Programs.