Foreword

Over the past few years, the boundaries of what designers and developers can create on the Web have expanded enormously. Web sites increasingly integrate pixel-perfect visual design, video, animation, and advanced user interaction to create rich experiences that are both fun and useful. Many of these sites are built using the Adobe Flash platform. And more and more Flash sites are being built using Adobe Flex.

One of the most common misconceptions about Flex is that it’s different from Flash. It’s not: Flex is Flash. Flex applications run in the Flash Player; Flex is built on top of the Flash file format, language, and API. Through Flex, you have access to all the richness of the Flash Player, with the added benefit of being able to work more seamlessly with traditional development tools.

If you looked at Flex applications a couple of years ago, you might not have believed this seamless story. Flex applications looked like, well, Flex applications. They looked pretty nice right out of the box, but once you’d seen a few, you could instantly spot others.

Why was this? The focus of the first version of Flex was to make the Flash platform accessible to traditional software developers, and to make it easy for them to produce applications that looked good right out of the box. And it worked: People who would never have even conceived of using Flash began building enterprise-quality applications using our technology. Flex removed their barrier for entry to developing rich applications.

But you can only do so much in a release, especially a 1.0 release, and we didn’t have time to also reinvent the world of designing rich applications. We did a lot to make the built-in component skins flexible—providing a large set of style parameters to allow people to tweak the visual appearance of components—but we knew that in order to really bring designers into Flex, we would need to do a lot more.

So, in Flex 2 and 3, we’ve been making it easier to build great visual and motion design into Flex applications. In Flex 2, we created view states and transitions to help designers and developers organize the appearance and behavior of complex dynamic applications. We also added a constraint-based layout mechanism that makes it easy to go from a pixel-perfect static design to a resizable application. In Flex 3, following the acquisition of Macromedia by Adobe, we built a streamlined skinning workflow between the Adobe Creative Suite tools and Flex Builder, and added a CSS design view to Flex Builder that lets you visually tweak the built-in appearance of components.

Andy McIntosh and Juan Sanchez are the perfect guides for your exploration into the visual design features of Flex. As designers who have crossed over into the world of development, and with their years of experience at EffectiveUI and other rich application design and development studios, they have been deeply engrossed in the world of Flex. In this book, they start with the basics of what designers and developers need to know about getting Flex applications to look good, then dive into more advanced topics and realistic examples showing how to create the look and feel of a complex application.

If you’re a designer who’s willing to leap into writing code once in awhile, or a developer with an eye for design, this book will help you build great Flex interfaces yourself. If you’re a designer who never touches code, but wants to understand what your Flex developers will be able to deliver, or if you’re a pure developer who needs to learn how to implement the beautiful mockup a designer gave you, this book can help you work more effectively with your design/development partner.

Of course, Adobe isn’t stopping here. We’ve got a lot of great stuff coming in Flex 4 and beyond to make it even easier for designers and developers to work together to build even richer experiences. But with this book in hand, you can get started today designing and building engaging applications. Go forth and create!

Narciso (nj) Jaramillo
Product designer, Adobe Flex Team