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.
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 ScaleNine.com, 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
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
Chapter 2: Adobe Flex and AIR 13
Flex 3.0 Framework 13
Developing Flex Applications 15
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
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
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
Chapter 6: Programmatic Skinning 73
Introducing the Drawing API 74
Creating a Programmatic Skin 75
Understanding Measurement and Programmatic
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
Chapter 8: Indicators and Cursors 101
Understanding by Example 101
Focus Border 105
Tool Tips 107
Using the Tool Tip Manager 113
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
Chapter 10: Filters and Blends 135
Working with Filters 136
Filter Properties 138
Applying Filters 139
Chapter 11: Effects and Transitions 147
Using Effects and Transitions 147
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
View States 168
Adding Transitions 171
Part III: Beyond Flex 177
Chapter 12: Flex and Flash Integration 179
Flex Component Kit 179
Motion XML 182
Chapter 13: Customizing AIR Applications 185
Getting Started 186
Working with Window Chrome 188
Custom Application Icons 191
Part IV: Exercises 193
Exercise 4.1: Loading a Style Sheet at Runtime 195
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
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
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
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
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
Exercise 7.1: Creating a Chat Dialog Window Using a List 265
Getting Started 265
Testing the Application 268
Exercise 7.2: Creating a Photo Gallery Using a Tile List 275
Exercise 9.1: Embedding a Font in a SWF File Using Flash 285
Exercise 9.2: Packaging a CSS File with a Font as a SWF 287
Exercise 9.3: Creating a Style Sheet for HTML Text 291
Exercise 11.1: Applying a Custom Effect 297
Exercise 11.2: Creating a Transition between Views States 301
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
Exercise 12.2: Using Flash Skin Templates 329
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
Exercise 12.4: Using Motion XML 339
Preparing Flex 343
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
Adobe Blogs 374
Other Blogs 375
Flex and AIR Showcase 376
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.
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.