flash application design solutions the flash usability handbook

Flash Application
Design Solutions
The Flash Usability Handbook
Ka Wai Cheung
Craig Bryant
5947FM.qxd 1/27/06 1:26 PM Page i
Flash Application Design Solutions:
The Flash Usability Handbook
Copyright © 2006 by Ka Wai Cheung and Craig Bryant
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-59059-594-7
ISBN-10 (pbk): 1-59059-594-7
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail ,
or visit www.springeronline.com.
For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA
94710. Phone 510-549-5930, fax 510-549-5939, e-mail , or visit www.apress.com.
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution
has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability
to any person or entity with respect to any loss or damage caused or alleged to be caused
directly or indirectly by the information contained in this work.
The source code for this book is freely available to readers at www.friendsofed.com in the
Downloads section.
Credits
Lead Editor
Chris Mills
Technical Reviewer

Paul Spitzer
Editorial Board
Steve Anglin, Dan Appleman, Ewan Buckingham,
Gary Cornell, Jason Gilmore, Jonathan Hassell,
James Huddleston, Chris Mills, Matthew Moodie,
Dominic Shakeshaft, Jim Sumser, Matt Wade
Associate Publisher
Grace Wong
Project Manager
Beth Christmas
Copy Edit Manager
Nicole LeClerc
Copy Editors
Nicole LeClerc and Marilyn Smith
Assistant Production Director
Kari Brooks-Copony
Production Editor
Ellie Fountain
Compositor
Dina Quan
Proofreader
Dan Shaw
Indexer
Lucie Haskins
Artist
April Milne
Cover Designer
Kurt Krames
Manufacturing Director
Tom Debolski

5947FM.qxd 1/27/06 1:26 PM Page ii
DEDICATION
To Mom and Dad
— Ka Wai Cheung
To the fondest reader I’ve known, Peggy M. Bryant
— Craig Bryant
5947FM.qxd 1/27/06 1:26 PM Page iii
CONTENTS AT A GLANCE
About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
About the Technical Reviewer
. . . . . . . . . . . . . . . . . . . . . . . . . . . xvi
Acknowledgments
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Introduction
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
PART ONE: INTRODUCING FLASH USABILITY
Chapter 1: Flash: Then, Now, Later
. . . . . . . . . . . . . . . . . . . . . . . . . 1
Chapter 2: Setting Up Your Flash Environment
. . . . . . . . . . . . . . 13
PART TWO: THE USABILITY SOLUTIONS
Chapter 3: A Basic Selection System
. . . . . . . . . . . . . . . . . . . . . . . 19
Chapter 4: Navigation Menus
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Chapter 5: Content Loading
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Chapter 6: Inventory Views and Selection Devices
. . . . . . . . . . . 109
iv

5947FM.qxd 1/27/06 1:26 PM Page iv
Chapter 7: Data Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Chapter 8: Forms
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Chapter 9: State Management and Storage
. . . . . . . . . . . . . . . . 197
Chapter 10: Help Tips
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Chapter 11: Browser History
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Chapter 12: Liquid Layouts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Chapter 13: Embedding Flash
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
PART THREE: PUTTING THE PIECES TOGETHER
Chapter 14: Planning for Usability
. . . . . . . . . . . . . . . . . . . . . . . . 285
Chapter 15: The Usable Bookstore
. . . . . . . . . . . . . . . . . . . . . . . 299
Appendix: Recommended Reading
. . . . . . . . . . . . . . . . . . . . . . . 309
Index
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
v
5947FM.qxd 1/27/06 1:26 PM Page v
CONTENTS
About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
About the Technical Reviewer
. . . . . . . . . . . . . . . . . . . . . . . . . . . xvi
Acknowledgments

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Introduction
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
PART ONE: INTRODUCING FLASH USABILITY
Chapter 1: Flash: Then, Now, Later
. . . . . . . . . . . . . . . . . . . . . . . . . 1
The brief, turbulent history of Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Flash MX 2004 and the release of ActionScript 2.0 . . . . . . . . . . . . . . . . . . . . . . . 3
New features introduced by ActionScript 2.0 . . . . . . . . . . . . . . . . . . . . . . . . 4
Usability benefits of ActionScript 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
The advantages (and disadvantages) of Flash over HTML . . . . . . . . . . . . . . . . . . . 4
Flexibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Cross-browser and cross-platform compliance . . . . . . . . . . . . . . . . . . . . . . . 6
Asynchronous processing and state management . . . . . . . . . . . . . . . . . . . . . 6
Robust design capabilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Flash vs. Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Breaking the Flash usability stigma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Why Flash usability is important . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Current trends in web development . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Future developments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Chapter 2: Setting Up Your Flash Environment . . . . . . . . . . . . . . 13
Setting up the source directory structure . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Creating a classpath . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Applying a Flash library structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
vi
5947FM.qxd 1/27/06 1:26 PM Page vi
PART TWO: THE USABILITY SOLUTIONS
Chapter 3: A Basic Selection System

. . . . . . . . . . . . . . . . . . . . . . . 19
Selection systems in HTML vs. Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Introducing the Flash selection system . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Blueprinting the selection system solution . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Examining the base classes for the selection system . . . . . . . . . . . . . . . . . . . 24
The UIButton base class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
The SelectionSystem base class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Using and customizing the selection system . . . . . . . . . . . . . . . . . . . . . . . . 30
Creating the book item button clip . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Creating the book selection system movie clip . . . . . . . . . . . . . . . . . . . . 32
Adding the initialization code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Creating the BookItemButton class . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Creating the BookSelectionSystem class . . . . . . . . . . . . . . . . . . . . . . . . 37
Wrapping up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Chapter 4: Navigation Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Exploring the HTML menu conundrum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
The simple text menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
The select box list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
The customized drop-down menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Devising an optimal Flash menu solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Building the Flash solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Building the scrolling menu frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Creating the panel clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Creating the menu holder clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Creating the tab area assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
vii
5947FM.qxd 1/27/06 1:26 PM Page vii
Bringing the menu to life with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . 51
Starting the ScrollingMenuFrame class . . . . . . . . . . . . . . . . . . . . . . . . 52

Setting the scrolling menu’s runtime events . . . . . . . . . . . . . . . . . . . . . 53
Enabling and disabling the menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Implementing the mouse watch methods . . . . . . . . . . . . . . . . . . . . . . . 56
Implementing the menu scrolling methods . . . . . . . . . . . . . . . . . . . . . . 56
Building the menu loading method . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Adjusting the menus’ appearance . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Putting the pieces together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Chapter 5: Content Loading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Understanding HTML’s inherent loading problem . . . . . . . . . . . . . . . . . . . . . . . 69
Developing a Flash loader solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
The design of loaders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Ensuring accuracy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Adding visual appeal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Allowing users to multitask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
General loader functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Commonly streamed objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
The Sound object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
The MovieClip object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
The MovieClipLoader class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
The XML object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
The LoadVars object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Creating a usable audio clip loader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Laying out the loader features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Building the audio player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Adding the progress bar clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Adding the seeker clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Building the information display text fields . . . . . . . . . . . . . . . . . . . . . . 80
Adding the volume button clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Adding audio player buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Creating the time position indicator clip . . . . . . . . . . . . . . . . . . . . . . . 82
Using the Model-View design pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Building the loader model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Building the loader view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Putting it all together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
A note on the Model-View design implementation . . . . . . . . . . . . . . . . . . . . 96
Building a reusable movie clip loader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Setting up the loader graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Coding the reusable loader clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Building the MovieClipLoaderUI class . . . . . . . . . . . . . . . . . . . . . . . . . 99
Defining MovieClipLoader’s event handlers . . . . . . . . . . . . . . . . . . . . . 100
Putting the loader clip to work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
CONTENTS
viii
5947FM.qxd 1/27/06 1:26 PM Page viii
A case study: A basic image gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Loading the thumbnails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Loading the full-size image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Chapter 6: Inventory Views and Selection Devices . . . . . . . . . . . 109
A brief interlude into metaphor-based design . . . . . . . . . . . . . . . . . . . . . . . . 110
Understanding the HTML shopping cart metaphor . . . . . . . . . . . . . . . . . . . . . 112
Devising a better shopping cart solution in Flash . . . . . . . . . . . . . . . . . . . . . . 115
Building the Flash solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Creating the Flash UI assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
The cart layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
The product detail layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
The product grid layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
The thumbnail item clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
The draggable thumbnail item clip . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Coding the solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Creating the grid layout structure . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Setting the position of the thumbnails . . . . . . . . . . . . . . . . . . . . . . . . 125
Creating the drag-and-drop functionality . . . . . . . . . . . . . . . . . . . . . . 126
Building the droppable UI areas . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Putting it all together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Chapter 7: Data Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Examining the limitations of standard searches . . . . . . . . . . . . . . . . . . . . . . . 140
Improving filtering with Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Storing data on the client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Using sliders to filter search criteria . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Fading in and out inventory results . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Reviewing the filtering enhancements . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Building the Flash solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Creating the Flash UI assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
The filtering slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
The product grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Building the filtering slider code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Building the DataFilterManager class . . . . . . . . . . . . . . . . . . . . . . . . . 150
Creating the DataFilterSlider class . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Using the EventDispatcher object . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Implementing the EventBroadcaster class . . . . . . . . . . . . . . . . . . . . . . 158
Modifying the ThumbItemButton class . . . . . . . . . . . . . . . . . . . . . . . . 159
Putting the pieces together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
CONTENTS
ix
5947FM.qxd 1/27/06 1:26 PM Page ix
Chapter 8: Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Humanizing forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Improving form validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
On-the-fly validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Unobtrusive error handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Smarter validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Improving form workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Tabbing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Creating a better form experience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Self-scrolling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Dynamic and smart validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Building the Flash solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Creating the Flash UI components . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
The text input wrapper clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
The text area wrapper clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
The state combo box wrapper clip . . . . . . . . . . . . . . . . . . . . . . . . . . 173
The check box wrapper clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
The validation control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
The form container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Coding the solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Building the form element wrapper code . . . . . . . . . . . . . . . . . . . . . . 177
Using a Strategy pattern to create reusable validation logic . . . . . . . . . . . . 180
Creating the validation strategy interface . . . . . . . . . . . . . . . . . . . . . . 182
Validating text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Validating a Boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Validating a phone number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Validating a zip code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Creating the component wrapper subclasses . . . . . . . . . . . . . . . . . . . . 187
Building the validation control class . . . . . . . . . . . . . . . . . . . . . . . . . 188
Building the form container class . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Chapter 9: State Management and Storage . . . . . . . . . . . . . . . . 197
Remembering state in Flash applications . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Introducing the local shared object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Creating a local shared object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Customizing the location of the shared object . . . . . . . . . . . . . . . . . . . . . . 201
Reading and writing data from a local shared object . . . . . . . . . . . . . . . . . . 201
Building a skip intro feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Remembering visited links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Adding the history functionality to the code . . . . . . . . . . . . . . . . . . . . . . . 204
Adding a clear history function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
CONTENTS
x
5947FM.qxd 1/27/06 1:26 PM Page x
Chapter 10: Help Tips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Examining the limitations of the HTML title text solution . . . . . . . . . . . . . . . . . . 210
Improving help tips with Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Toggle feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Mobility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Fade in/snap out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Building the Flash solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Creating the movie clips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
The help tip clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
The toggle clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Building the code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Building the help tip clip class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Building the HelpTipManager class . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Building the toggle functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Putting it all together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Some help tip usability guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Chapter 11: Browser History . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Reviewing the Flash back button issue . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Determining where to go . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Creating a simple Flash solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Understanding how browser histories work . . . . . . . . . . . . . . . . . . . . . . . 231
Tracking history and changing state . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Building the SWF file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Scripting the page watcher code . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Creating the page states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Coding the main HTML page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Coding the history HTML page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Enabling browser history in the Flash selection system solution . . . . . . . . . . . . . . 239
Deciding which page states to track . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Modifying the book selection system code . . . . . . . . . . . . . . . . . . . . . . . . 241
Adding the watch method in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Modifying the history and main pages . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Examining Flash’s named anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Chapter 12: Liquid Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Exploring the fixed-width vs. liquid-width layout dilemma . . . . . . . . . . . . . . . . . 248
Designing a usable liquid layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Building liquid layouts in HTML: The CSS problem . . . . . . . . . . . . . . . . . . . . . . 250
Using the Flash Stage object to create liquid layouts . . . . . . . . . . . . . . . . . . . . 251
Designing a liquid layout in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
CONTENTS
xi
5947FM.qxd 1/27/06 1:26 PM Page xi
0e197eab08414336a67d4228a6088055

Building the Flash solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Designing the UI components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
The content area movie clips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
The header bar clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
The navigation items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Setting up component data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Delegating layout responsibilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Building the content area class . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Building the stage manager class . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Setting the size of the content areas . . . . . . . . . . . . . . . . . . . . . . . . . 263
Setting the positions of the content areas . . . . . . . . . . . . . . . . . . . . . . 264
Creating the resize event handler . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Modifying the navigation item positions . . . . . . . . . . . . . . . . . . . . . . . . . 265
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Chapter 13: Embedding Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Optimizing usability when embedding Flash movies . . . . . . . . . . . . . . . . . . . . . 272
Browser compatibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Flash sniffing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Choosing an embedding method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
The default Flash-generated HTML method . . . . . . . . . . . . . . . . . . . . . . . 274
The Flash Satay method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
The nested object method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
The Flash Player Detection Kit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
The FlashObject method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Using FlashObject with Express Install . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Writing the HTML code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Checking for the ExpressInstall component . . . . . . . . . . . . . . . . . . . . . . . 281
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
PART THREE: PUTTING THE PIECES TOGETHER
Chapter 14: Planning for Usability

. . . . . . . . . . . . . . . . . . . . . . . . 285
Setting the bar for Flash usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
RIA usability: A new paradigm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
The usability team members . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Preparing for development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Defining the application’s purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Creating an application map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Exploring interactions through interaction models . . . . . . . . . . . . . . . . . . . 292
Designing wireframes for the application states . . . . . . . . . . . . . . . . . . . . . 292
CONTENTS
xii
5947FM.qxd 1/27/06 1:26 PM Page xii
Usability testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
The phases of usability testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Concept/experience design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Screenshot design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Beta release . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Public release . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Testing materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Chapter 15: The Usable Bookstore . . . . . . . . . . . . . . . . . . . . . . . 299
Navigating through the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Arriving at the Book Shopper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Finding help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Selecting a category of books . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Filtering the book catalog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Learning about books in a category . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Adding and modifying items in your cart . . . . . . . . . . . . . . . . . . . . . . . . . 304
Submitting your billing and shipping information . . . . . . . . . . . . . . . . . . . . 305

Synthesizing the usability solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Appendix: Recommended Reading . . . . . . . . . . . . . . . . . . . . . . . 309
ActionScript 2.0 (and OOP) programming . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Usability design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Flash usability (historical) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Web resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
CONTENTS
xiii
5947FM.qxd 1/27/06 1:26 PM Page xiii
5947FM.qxd 1/27/06 1:26 PM Page xiv
ABOUT THE AUTHORS
Ka Wai Cheung has been creating web applications ever since he
was a child (he was still a child at 19). He currently leads the user
interaction design of Gritwire (www.gritwire.com), a Flash-based
RSS reader and social network for daily Internet users.
Ka Wai has written for several online publications and resource
sites, including Digital Web Magazine (www.digital-web.com),
ActionScript.org (www.actionscript.org), and HOW design
online (www.howdesign.com). He writes about topics from web
standards to usability design to software development theory,
but his main passion is Flash application development. He logs his past web projects and
writings on his site, Project99 (www.project99.tv).
Ka Wai majored in Math, Computer Science, and Integrated Science at Northwestern
University, where he first toyed with Flash by tweening a wingding character across his 640-
pixel wide screen.
When not working on the Web, Ka Wai enjoys playing guitar, eating foods from all four
corners of the world, and watching his beloved Chicago sports teams occasionally win.
Craig Bryant is a full-time Flash engineer who has been advocat-

ing the use of Flash in delivering rich Internet applications to top-
ranked online communications agencies around the world for
the past five years. Currently, Craig is a Senior Art Director at
Arc Worldwide in Chicago.
Craig’s devotion to Flash has driven his creative intrigue, while
providing him with a technical expertise and perspective that
only a Flash developer can attain.
Like many other Flash developers, Craig’s background is not strictly programming-oriented.
He has a degree in musical composition from Berklee College of Music in Boston.
When he isn’t racking his brain in Flash, Craig is seeking out great music, catching up on
twentieth-century American fiction, or awaiting a deep-dish pizza being delivered to his
doorstep.
xv
5947FM.qxd 1/27/06 1:26 PM Page xv
ABOUT THE TECHNICAL REVIEWER
Paul Spitzer is a software engineer living in Berkeley, California. Paul’s Flash experience
began in 1998 with Flash 3, and his primary focus has been user interface engineering in
Flash/ActionScript. He has also worked with a variety of other technologies, including
C#/.NET, WinFX, Java, and ColdFusion, to name a few. In his current job at San Francisco–
based Fluid, Inc., Paul works closely with information architects, usability experts, and visual
and interactive designers to realize state-of-the-art user experiences.
xvi
5947FM.qxd 1/27/06 1:26 PM Page xvi
ACKNOWLEDGMENTS
I have learned an unbelievable amount about Flash, book writing, and the benefits of sleep
over the past several months. First, I'd like to acknowledge my bed for being there for me
through thick and thin. Sorry for neglecting you for so long; you'll be seeing a lot more of me
now. As far as humans go . . .
First, Craig Bryant, this book’s coauthor, for working on this book while juggling an already
demanding schedule, and writing a ton of code.

Chris Mills, our editor, for giving us this great opportunity to write and for his overall wisdom
and sage advice throughout the entire process.
Paul Spitzer, our technical reviewer, for policing our code, coming up with innovative refac-
torings and wise suggestions, and teaching me a new trick or two about Flash. Not all of his
great suggestions made it into the final publication, but they should find their way into the
source code updates for this book at the friends of ED website.
Nicole LeClerc and Marilyn Smith, our copy editors, for making everything we wrote make
sense; Beth Christmas, our project manager, for keeping the house in order and her incredi-
ble amount of patience; Dina Quan, our compositor, for laying out these book pages so won-
derfully.
Adam Hoffman, my former boss and senior architect at Hubbard One, for giving me a new
appreciation and understanding of object-oriented programming and usability over the past
three years and who I still rely on for some much-needed expertise.
Ian Carswell, COO of Dizpersion Technologies, whose creative mind and never-say-never atti-
tude have taken me to places in Flash I never thought existed.
Kevin Sidell, founder of Dream Marketing Communications, for literally hundreds of web
projects that have allowed me to exercise my design skill set over the past seven years.
Geoff Stearns for allowing us to showcase and discuss his creation, FlashObject, in Chapter 13.
Ka Wai Cheung
xvii
5947FM.qxd 1/27/06 1:26 PM Page xvii
First and foremost, thanks to Ka Wai Cheung for doing what it takes to make this a fantas-
tic book and not just a bunch of rowdy-looking code samples. Your dedication and drive
are the reason this book exists.
Thanks to the fine folks at Apress and friends of ED for the great opportunity and the
patience throughout, as well as doing a great service to the design and development com-
munity.
Gratitude to my wife, Heike, for kicking me out of bed and chaining me to my desk. OK, it
wasn’t that extreme, but you keep me on my toes.
Todd Levy and Matt Macqueen, thanks much for the support you’ve provided—

“uncharted” territory is always easier to navigate with help from guys like you.
Last but not least, a giant shout out to both Macromedia and the Flash development com-
munity for the ongoing commitment to Flash and the wealth of knowledge and support
they have helped disseminate to the thousands of developers out there. Without you, we’d
still be trapped in a <table> somewhere.
Craig Bryant
ACKNOWLEDGMENTS
xviii
5947FM.qxd 1/27/06 1:26 PM Page xviii
INTRODUCTION
Have you ever noticed how complicated all the instrument panels looked in those futuristic
movies and TV shows from years past? The fact that Captain Kirk could operate the myriad
buttons, lights, and widgets on the Starship Enterprise was a feat in itself. Sure, the produc-
ers of Star Trek probably weren’t thinking a great deal about how usable the instruments
should appear on-screen. Instead, they created a depiction of what this monster we call tech-
nology must look like in the future: a mess of complicated processes understandable only to
a select, brilliant few. See Figure 1 for another example.
Figure 1. The classic 1980s TV series Knight Rider featured a talking car named Kitt that could
think on its own. But how would you operate a car with a dashboard as confusing as Kitt’s?
Unfortunately, it’s not just at the movies or from prime-time TV where we get the impression
that technology is difficult to use. From radio clocks, to stovetops (see Figure 2), to comput-
ers, to the Internet, you’ll find plenty of examples of poorly designed interfaces masking
otherwise great engineering. Take a multi-disc DVD player, hook it up to a TV with multiple
video ports, and try to navigate through to the favorite scene of your movie with an all-in-
one TV/DVD/VCR remote. If you can get through it all without a few mental stumbles along
the way, and without the aid of the instruction booklet, maybe you can help the rest of us!
xix
5947FM.qxd 1/27/06 1:26 PM Page xix
Figure 2. The classic stovetop usability problem: which knobs turn on which burners?
Over the past decade, we’ve encountered the same kinds of frustrations with the Internet.

Superfluous Flash intros, slowly loading sites, obtrusive JavaScript alert boxes, complex
navigation, excessively long pages, broken links, unexpected pop-up ads, and unintuitive
forms are just a few of the usability problems we’ve seen in the brief history of the Web.
As web designers and developers (if you’re reading this book, you more than likely fall
somewhere within or near this category), we know that technology works best when we
can interact with it like it’s our best friend rather than our worst enemy. In general, we’ve
coined this concept under the term usability. But what exactly does usability mean? Is it
something more than just a sophisticated term for easy to use?
Defining Flash usability
Because this is a book on developing usable web applications with Flash, we’re going to
define usability as follows:
Usability measures how intuitive, efficient, and pleasurable the
experience of using a Flash application is, as well as how effective
the application is in achieving a user’s end goals.
INTRODUCTION
xx
5947FM.qxd 1/27/06 1:26 PM Page xx
Let’s take a closer look at what this means:
Usability should be intuitive. The more obvious you can make the features of
your web application, the better. Users should be thinking less about how to use
your application and concentrating more on how to benefit from your application.
The most intuitive interface is one that the user isn’t even aware of—an “invisible
interface.” The interface is so fluid that the user and the application become one.
Usability should be efficient. The user should be able to get from point A to
point B as efficiently as possible. Every interaction you have with your software
should be directed toward the goal you are trying to achieve. As developers, we
need to hide all of the processes that occur behind the scenes as much as possible.
Users should be presented with only what they need to know, not everything that
is actually occurring at a particular moment.
Usability should be pleasurable. The design of your application should be pleas-

ing and engaging. This means understanding good design principles, as well as
knowing how to handle user input in an elegant way.
Usability must be effective in achieving a user’s end goals. In the end, if your
application is intuitive, efficient, and pleasurable, but doesn’t get the user to com-
plete the task at hand, you’ve failed. While keeping in mind the three previous
points, ultimately, you need to make sure that the darned thing actually does sub-
mit a customer order, print a patient’s medical records, or whatever it was origi-
nally designed to do!
So, is that it? Well, yes and no. For the purposes of our book, we wanted to keep the dis-
cussion of usability itself as concise as possible. Instead, we’re going to devote the major-
ity of our pages (Part Two) to showing you how we solve specific usability problems with
Flash. Think of this book as an analysis of usability case studies, rather than an A-to-Z
primer on usability. After digging into these pages, you should feel comfortable with how
to solve specific usability issues and how to approach new ones down the road. In Part Three,
we’ll focus on how to plan for usability in the design process and present a final applica-
tion that integrates all the solutions.
At the same time, we don’t want to dismiss the more theoretical study of usability. A host
of great books, websites, and people are dedicated to this ever-evolving subject and many
equally important related topics, such as user research, goal-oriented design, and task
analysis. We’ve provided an appendix to this book to point you to other resources if you’d
like to dig further into usability theory.
INTRODUCTION
xxi
5947FM.qxd 1/27/06 1:26 PM Page xxi
Building for usability
Usability engineering is not just about good interface design. While the visual appeal of a
web application is important, the underlying structure and programming can equally con-
tribute to “good usability.” Usability doesn’t just begin and end with the user. A usable
website that’s built poorly won’t survive the kinds of revisions and feature additions that
are inherent to all living web applications. It’s akin to a magnificent-looking house that’s

being eaten through by termites. Eventually, it will fall apart and have to be redone. This is
the part that is left out of most books about usability.
In the solutions presented in this book, we won’t just talk about creating Flash applications
with user-friendly design. We’ll also introduce different techniques for designing your
code, letting you better integrate the discussed solutions into your own Flash projects.
After all, the easier it is to make your applications more usable, the more likely you’ll strive
to achieve it!
Who is this book for?
We hope you’ve gotten the idea that this is not your prototypical usability book. As we
mentioned, we’re not going to dig that deeply into theory. Likewise, this book isn’t your
usual “how-to” Flash book. We’re not going to start from the ground up. We will lay out
each usability solution in detail, but assume you already have a good familiarity with Flash.
These solutions are geared toward Flash developers who are comfortable with the Flash
development environment. You should know what buttons and movie clips are, and the
differences between, say, frame-based actions and object-based actions.
To get the most out of this book, you should have a basic knowledge of ActionScript 2.0
(AS2) and a solid understanding of object-oriented programming (OOP). The solutions
in this book will rely heavily on using AS2 classes, and we will look at some key concepts in
OOP to implement these solutions. If you are relatively new to Flash or aren’t familiar with
AS2, that’s still OK! There will be plenty of take-aways from each chapter that don’t nec-
essarily have to do with the development process. We recommend that you read this book
alongside any good AS2 programming book (see this book’s appendix). Rather than wrap-
ping them up into rigid components, we’ve made our solutions fully exposed to you and
available for download in their entirety from this book’s page at www.friendsofed.com
(just search for this book in the menu on the front page, and then go from there). We
want you to be able to take what we’ve done and enhance it in your own projects!
This book is the ultimate synthesis of a usability discussion and programming guide. We’ll
talk about how Flash can best enhance the usability of your applications. We’ll also give
you our perspective on the best way to develop these solutions, from designing the inter-
face all the way down to how to structure your ActionScript code.

So, while this book is geared toward more experienced Flashers who are well acquainted
with AS2, these solutions offer something for Flash developers at any level looking to
improve the usability of their projects.
INTRODUCTION
xxii
5947FM.qxd 1/27/06 1:26 PM Page xxii
A note about our approach
Before we get started, we’d like to stress one very important point to you. As anyone who
has developed applications in a programming language knows, programming is an iterative
process. There are always multiple ways of approaching a solution to a problem. The solu-
tions in this book are no different.
None of the coding solutions in this book should be taken “as is.” We highly encourage
you to download our source code; examine our examples; and find ways to improve on
them to make them more scalable, reusable, and maintainable. In fact, we’re fully aware
there are more optimal implementations of the solutions we’ve provided in this book.
However, in some cases, we’ve held back from a “better” approach to a problem because
we introduce a concept inherent to the better approach in a later chapter. In other
instances, we’ve held back in order to simplify the method for discussion purposes. Our
goal is that, after reading the book, you’ll be equipped with a few different kinds of strate-
gies you can take in ActionScript programming as it relates to usability.
Be sure to check the page for this book on the friends of ED website (www.friendsofed.com)—
we will post revisions of our code examples as we (or maybe you) find ways of improving
them!
INTRODUCTION
xxiii
5947FM.qxd 1/27/06 1:26 PM Page xxiii
PART ONE INTRODUCING FLASH
USABILITY
5947CH01.qxd 1/27/06 11:49 AM Page xxiv