Creating Visual Experiences with Flex 3.0: (Developer's Library)

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.

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

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, 360|Flex, 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.