Creating Visual Experiences with Flex 3.0

Creating Visual Experiences with Flex 3.0

by Juan Sanchez, Andy McIntosh

NOOK Book(eBook)

$25.99 $43.99 Save 41% Current price is $25.99, Original price is $43.99. You Save 41%.
View All Available Formats & Editions

Available on Compatible NOOK Devices and the free NOOK Apps.
WANT A NOOK?  Explore Now


Don’t settle for Flex’s boring, standard user interface. Set your Flex applications apart with the breakthrough skinning and programming techniques found in Creating Visual Experiences with Flex 3.0. Leading Flex developers Juan Sanchez and Andy McIntosh show how to build stunning Flex and AIR applications. You’ll learn how to take a design and translate that design into Flex or AIR without sacrificing fidelity, and how to apply state-of-the-art branding that adds value to all your Flex applications, no matter what they do or who you’re building them for.


Sanchez and McIntosh illuminate every aspect of creating superior visual experiences with Flex 3.0 and AIR and discuss planning, design, architecture, and proven user-interface principles, with an emphasis on technical implementation. You’ll learn how to alter the standard Flex interface using all the tools available to you: skins, styling, transitions, effects, filters, graphics built with Adobe creative tools, CSS, and ActionScript 3.0 programming.


The authors reveal the trade-offs associated with each approach to Flex visual experience design and help you choose the right techniques for your applications. They explain each concept and technique in detail, using real-world examples and exercises that solve specific problems and provide samples throughout each chapter.


If you want your Flex and AIR applications to be a cut above the rest, this is the book that shows you how.

Product Details

ISBN-13: 9780132701952
Publisher: Pearson Education
Publication date: 11/17/2008
Series: Developer's Library
Sold by: Barnes & Noble
Format: NOOK Book
Pages: 432
File size: 13 MB
Note: This product may take a few minutes to download.

About the Author

Juan Sanchez is an Experience Architect for EffectiveUI, a leading provider of Rich Internet Applications based in Denver, Colorado. He created and manages, a site that provides skinning resources and UI inspiration for Flex and AIR. His work at ScaleNine has earned him widespread recognition as a community expert and he has presented at the LA Flex User Group, 360Flex, and WebManiacs. Sanchez also cofounded Degrafa, the open source declarative graphics framework for Flex.


Andy McIntosh specializes in interaction design, custom component development, programmatic skinning, and migrating enterprise applications to Flex/AIR-based solutions at EffectiveUI. He has played a key role in successful projects for clients such as Adobe, Workday, Scion, and United Airlines; he serves as an advisor for the Degrafa project.

Table of Contents

Foreword xix

Preface xxi

Acknowledgments xxv

About the Authors xxvi


Part I: Introduction 1


Chapter 1: Rich Internet Applications 3

The Audience 3

The Content 4

User Interaction 6

The Presentation 7

Summary 11


Chapter 2: Adobe Flex and AIR 13

Flex 3.0 Framework 13

Developing Flex Applications 15

Summary 17


Part II: The Flex 3 Framework 19


Chapter 3: Dynamic Layout 21

Understanding Flex Layout 21

Automatic Positioning 23

Absolute Positioning 25

Sizing Components 29

Managing Scrolling 31

Summary 35


Chapter 4: Styling 37

Understanding Style Properties 37

Applying Styles Inline 40

Applying Styles Using CSS 41

Style Precedence 44

Working with Styles Using ActionScript 48

Styling in Design View 51

CSS Design View 54

Themes 56

Summary 56


Chapter 5: Graphical Skinning 57

Difference Between Bitmap and Vector 60

Embedding Graphics in Flex 3 61

Using 9-Slice Grids 62

Naming Conventions for Skin Importing 64

Using the Skin Import Wizard 67

Working with Skins in CSS Design View 69

Skin Templates 70

Mixing Tools 71

Summary 72


Chapter 6: Programmatic Skinning 73

Introducing the Drawing API 74

Creating a Programmatic Skin 75

Understanding Measurement and Programmatic

Skinning 80

Summary 81


Chapter 7: Lists and Navigation Components 83

List-Based Components 84

Item Renderers and Editors 87

Navigation Controls 91

Navigation Containers 95

Specifying Labels and Icons 98

Using a List-Based Component for Navigation 99

Summary 100


Chapter 8: Indicators and Cursors 101

Understanding by Example 101

Icons 103

Focus Border 105

Tool Tips 107

Using the Tool Tip Manager 113

Cursors 115

Summary 118


Chapter 9: Fonts and Text 119

Attention to Text 119

Customizing Fonts 120

Embedding Fonts 121

Using Fonts from SWFs 123

Advanced Anti-Alias Properties 123

Specifying Character Ranges 124

Working with Fonts in CSS Design View 126

Text Styling for Consistency 126

Working with Text 127

Working with HTML Text 129

Summary 133


Chapter 10: Filters and Blends 135

Filters 135

Working with Filters 136

Filter Properties 138

Applying Filters 139

Blends 142

Summary 145


Chapter 11: Effects and Transitions 147

Using Effects and Transitions 147

Effects 151

Applying Effects 152

Compound Effects 156

Easing Functions 158

Repurposing Effects 162

Data Effects 162

Default Data Effects 163

Custom Data Effects 165

Other Tweening Options 167

Transitions 168

View States 168

Adding Transitions 171

Summary 176


Part III: Beyond Flex 177


Chapter 12: Flex and Flash Integration 179

Flex Component Kit 179

Motion XML 182

Summary 183


Chapter 13: Customizing AIR Applications 185

Getting Started 186

Working with Window Chrome 188

Custom Application Icons 191

Summary 191


Part IV: Exercises 193


Exercise 4.1: Loading a Style Sheet at Runtime 195

Summary 199


Exercise 5.1: Creating a Graphical Skin with Flash 201

Getting Started 202

Creating the Artwork 202

Converting Artwork to Symbols 204

Setting the 9-Slice Scale Grids 206

Bringing Your Flash Artwork into Flex 206

The Final Product 209

Taking This Example Further 210

Using Bitmap Assets in Flash 211

Skin Templates for Flash 212

Summary 212


Exercise 5.2: Creating a Graphical Skin with Illustrator 213

Getting Started 213

Creating the Artwork 214

Taking Your Skin Artwork into Flex 217

Taking This Example Further 220

Using Skin Templates 221

Summary 222


Exercise 5.3: Creating a Graphical Skin with Fireworks 223

Getting Started 224

Creating the Artwork 224

Bringing Your Skins into Flex 228

The Finished Product 232

Taking This Example Further 232

Using Skin Templates 232

Summary 234


Exercise 5.4: Creating a Graphical Skin with Photoshop 235

Getting Started 236

Creating the Artwork 236

Taking Your Skin Artwork into Flex 240

The Final Product 245

Taking This Example Further 245

Using Skin Templates 246

Summary 247


Exercise 6.1: Creating a Programmatic Skin 249

Setting Up a Testing Harness 250

Creating the Skin Class 251

Applying the Skin to the Buttons 252

Drawing the Artwork 253

Applying Styles 261

The Final Product 262

Taking This Example Further 262

Summary 264


Exercise 7.1: Creating a Chat Dialog Window Using a List 265

Getting Started 265

Testing the Application 268

Summary 273


Exercise 7.2: Creating a Photo Gallery Using a Tile List 275

Summary 282


Exercise 9.1: Embedding a Font in a SWF File Using Flash 285

Summary 286


Exercise 9.2: Packaging a CSS File with a Font as a SWF 287

Summary 289


Exercise 9.3: Creating a Style Sheet for HTML Text 291

Summary 295


Exercise 11.1: Applying a Custom Effect 297

Summary 299


Exercise 11.2: Creating a Transition between Views States 301

Summary 312


Exercise 12.1: Creating a Graphical Skin Using the Flex Component Kit 313

Creating the Skin Structure 313

Creating the Skin Artwork 316

Creating Transitions 318

Setting the 9-Slice Grid 321

Bringing the Flash Skin into Flex 321

The Final Product 326

Creating Other Assets 327

Summary 327


Exercise 12.2: Using Flash Skin Templates 329

Summary 331


Exercise 12.3: Creating a Custom Container Using the Flex Component Kit 333

Creating a Basic Container in Flash 333

Bringing Your Custom Container into Flex 335

Summary 337


Exercise 12.4: Using Motion XML 339

Preparing Flex 343

Summary 346


Part V: References 347


Appendix A: Skinning and Styling Diagrams 349


Appendix B: Filters Cheat Sheet 367


Appendix C: Resources and Cool Stuff 371

User Experience Design 371

Flex Skins and Themes 371

Flex Component Kit 372

Flex Explorers 372

Community Flex Components 372

Flex Libraries and Frameworks 373

Reference 373

Downloads 374

Community 374

Adobe Blogs 374

Other Blogs 375

Flex and AIR Showcase 376

Icons 377

Fonts 377

Graphics 378


Index 379


The Web is always evolving as new technologies and greater user demands bubble to the surface. With the introduction of Flash in 1996, Web pages started to change from a static point-click-reload experience to a dynamic experience void of page refreshes and back button reactions. Since then, many technologies have risen to meet the ever growing needs of the user, each proposing new conventions for reaching a final goal. As Flash matured, it became more frequently used for replicating interactions a user might expect from a robust desktop application. Flash was a usable solution for creating browser-based applications, but not necessarily the most approachable.
Now with Adobe Flex, the Flash player has matured to the point that it can be considered a target for enterprise-level applications. Along with Flex, there have been lots of competing technologies breaking onto the scene, underscoring the importance of rich user experience. New focus has been placed on the processes surrounding innovation, collaboration between designer and developer, usability, and deployment. These advancing facets pose new challenges for both designers and developers to overcome in order to create compelling visual experiences in Flex 3.
Creating Visual Experiences with Flex 3 is a compilation of knowledge gathered from a myriad of real-world scenarios involving customization of Flex applications and creating rich user experiences.Scope of This Book
Rarely is there a case when no visual customization is required while creating a Flex application. It can be hard to find all the necessary information that covers the many approaches that can be taken to customize the visual experienceof a Flex application. Interpreting that information to an actual use-case within an application can also be a daunting task. Our focus is to expose the knowledge we wished we had when we first started working with Flex. It is by no means meant to be an end-all be-all, but a starting point for your journey into working with the visual aspects of Flex 3. The goal is to give enough information to answer immediate questions and directions to find additional answers.
Everything discussed in this book can be used in some way, shape, or form, from robust enterprise-level applications to a simple RSS reader. The walkthroughs in this book are meant to be to-the-point and clearly communicate the approaches discussed. Since we learned Flex by pulling bits and pieces from a number of different examples to meet the needs of our applications, there is an a la carte presentation of walkthroughs. This will make it easy for you to grab what you need without foraging through massive lines of code to find the one bit you're interested in.
Most of the topics discussed in this book surround features immediately available in Flex. Creating custom components, advanced data visualization, and non-visual components will not be covered. Although those things are also essential to enhancing the user experience, it extends beyond the scope of this book.
This book is not meant to be a rule-book of standards or a rigid set of guidelines. Each project is different and has its own requirements. There is always a judgment call to be made between deadlines, budget, client needs, and user feedback that will dictate what approach you may take to implementing your own version of a unique visual experience. In the end though, you want to be happy with what you release, from the back-end architecture to the customer facing offering. Audience for This Book
The primary audience is designers and developers interested in translating design visions to Flex while maintaining the highest fidelity. Topics discussed revolve around some light design theory of rich user experiences and the visual presentation of user interface components. Designers and developers can use the information in this book to gain an understanding of the advanced level of customization that can be implemented in Flex. Also, those who may not be fully immersed in Flex development may find this book helpful in understanding what can be achieved visually with Flex.
The level of knowledge required for this book ranges from beginner to somewhat advanced, but the approach is always to make sure there is a guided sense of understanding. In the process of writing this book, we found ourselves referring to our own draft versions of chapters to find answers to a variety of questions that arose while working in Flex. We can only hope that this book may also serve as a solid reference that can help guide you in your own projects.Background
As Flex developers who are pretty involved with the Flex community, we get questions all the time through email and blog comments about the nuances of customizing Flex applications. It is a rare occurrence to not get approached at least once at a conference by someone with a laptop eager to find an answer or to gain some insight. In fact, this whole project was started based on a co-presentation that was given at a Flex-focused conference, called 360Flex. The thought was to bottle our collective knowledge in a way that was more approachable than reading documentation and span the concepts we valued as we worked to implement our designs in Flex.How This Book Is Organized
The beginning of this book sets the stage for the rest of the chapters by introducing the capabilities of Flex and discussing some of the design foundation behind creating a visual experience. The remaining chapters go into more technical detail about visual customization and implementation in Flex. Because each chapter discusses techniques that may complement others, chapters have been ordered to take advantage of material presented in previous chapters. This is not to say that you can't jump into any given chapter at any point throughout your reading.
  • Chapter 1: Rich Internet Applications. Design plays a large role in the final appearance of your Flex application. This chapter gives a general overview of design fundamentals and thinking points that can transfer to your application's final design.
  • Chapter 2: Adobe Flex and AIR. Overview of Adobe Flex 3 and the Adobe Integrated Runtime (AIR) to set the stage for some of the technical aspects in the remainder of the book.
  • Chapter 3: Dynamic Layout. Layout defines the visual structure of your application. Learn about the various components and techniques you can use to create the visual skeleton of your application.
  • Chapter 4: Styling. Using styling properties you can customize components rapidly and easily. Styling lays the groundwork for other methods when customizing a user interface.
  • Chapter 5: Graphical Skinning. When styling a component isn't enough, skinning can step in and take customization to the next level. You can leverage existing graphics applications like Adobe Illustrator, Flash, Fireworks, and Photoshop to customize the look of your Flex application.
  • Chapter 6: Programmatic Skinning. Drawing graphics programmatically to be used for the appearance of components is very powerful, but also more complex than graphical skinning. Learn how you can leverage the power of programmatic skinning to create customizable interfaces.
  • Chapter 7: Lists and Navigation Controls Addresses the additional challenges for customization posed by List and Navigation controls, including item renderers and a data-driven display. Lists and navigation components present different challenges for customization because they are primarily data-driven and comprise many pieces.
  • Chapter 8: Indicators and Cursors. Guiding a user through an application is instrumental to a user achieving a goal. Steer your customers in the right direction by adding another level of customization.
  • Chapter 9: Fonts and Text. The way you display text and how it looks can play an emotional role as well as an informational one. Establishing structured and well-placed text is well within reach when working with Flex.
  • Chapter 10: Filters and Blends. Adding a sense of layering and depth can add a level of richness to an application. Flex provides a number of filters and blends that can be applied to components for a variety of purposes.
  • Chapter 11: Effects and Transitions. By deploying in the Flash player, Flex applications can capitalize on the advantages of using motion to create a fluid and immersive experience. Learn how you can leverage motion-based features of Flex in a variety of ways.
  • Chapter 12: Flex and Flash Integration. Flash and Flex share a common ground: ActionScript 3 and the Flash player. Flash CS3 and plugins can be used to create custom components, skins, containers, and motions.
  • Chapter 13: Customizing AIR Applications. AIR allows you deploy desktop applications using the same code-base as Flex applications. However, AIR applications have additional parameters that can be customized and are specific to the desktop environment.
Conventions Used in This Book
As you read this book there are a number of conventions used to guide you through varying types of information. At any given point you may encounter the following:
  • Tables. Used to group items and descriptions in a structured format for quick and easy reference.
  • Figures. Range from screenshots to diagrams to graphical instructions.
  • Listings. Code that supports discussed concepts and can include MXML, CSS, ActionScript, and comments.
  • Exercises. Longer walkthroughs that may involve code, graphic creation, traversing multiple applications, and running sample applications.

In every case, these items are noted by their type, chapter number, and a sequential number (e.g., Chart 5-3, Figure 7-13, etc.). For Exercises, a number for the exercise is introduced (e.g., Figure 5.1-4, Example 4.3-7). This convention is used to refer to these items in the text and to allow you to cross-reference things as you move through the book.Styling and Skinning Diagrams
You will frequently be referred to Appendix A's, "Skinning and Styling Diagrams," throughout the book. This reference is a series of diagrams that point out the customizable parts of visual Flex components, including containers and controls. It is meant to be a complementary reference during the process of customizing components in your Flex application.Additional Resources
Other references you will find include Appendix B, "Filters Cheat Sheet," and Appendix C, "Resources and Cool Stuff." These cheat sheets are meant to act as quick references that expose the properties for these Flex 3 features along with a brief description of the property.

Customer Reviews

Most Helpful Customer Reviews

See All Customer Reviews