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
Andy McIntosh is one of the first members of EffectiveUI, a Denver-based rich Internet application agency. As an Experience Architect, he specializes in interaction design, custom component development, and programmatic skinning. His recent focus has been on migrating enterprise applications to Flex/AIR based solutions. Andy attended The Art Institute of Colorado in Denver where he earned a BA in Interactive Media Design. While in school, he discovered that merely designing applications wasn't enough and that he wanted to make them come to life. A lifelong fan of Lego and gadgetry, he learned development by taking applications apart and putting them back together. His attention to detail, in both development and design, add a mark of quality to his work that is second to none. In his own words, "Development is design, but with different tools." Blending his technical expertise with his formal training in visual design, Andy has played a major role in successful projects for clients such as Adobe, Workday, Scion, United Airlines, and others. Additionally, Andy is an advisor for Degrafa, an open-source declarative graphics framework for Flex. He currently resides in downtown Denver, and frequently travels to both coasts for business and pleasure. His interests include books, cars, music, industrial design, and remodeling his loft. He blogs useful findings and random thoughts at http://andymcintosh.com. Juan Sanchez is an Experience Architect for EffectiveUI, a leading provider of rich Internet applications, based in Denver, Colorado. He graduated from California State University, Chico with a BA in Communication Design. Juan's background is primarily in print design, branding, and advertising, however, his skills quickly expanded into Web technologies like HTML, CSS, Flash and eventually Flex. Equipped with a creative eye and logical mind, Juan walks the line between designer and developer. Juan's interests lie in user experience, usability, designer/developer collaboration, and open-source projects. As an active Flex community member, Juan manages ScaleNine.com, a Web site dedicated to compiling skins and themes for Flex. He is a regular speaker at user groups, corporate workshops, and conferences, including 360|Flex and WebManiacs. Juan is also a founding member of Degrafa, a declarative graphics framework for Flex. Juan currently lives in downtown Denver with his girlfriend Grace and a little Chihuahua named Maddie. Now that he is done with "The Book," Juan hopes to get back to restoring his '66 Ford Mustang, getting back into running, enjoying Denver, and maybe taking up drums again.
“Adobe Flex is changing the face of the Web by enabling developers to create rich Internet applications quickly. This book provides developers a way to get a jump on the competition by enabling them to quickly learn how easily they can set their application apart from the rest.”—Gary Mangum, Principal Engineer, The Generations Network “Juan and Andy do a great job breaking ground on a vast and exciting topic. This book moves beyond learning the syntax of the language and gets to the heart of what Flex was really made for—building immersive user experiences.”—R.J. Owen, Senior Developer, EffectiveUI “This is a fantastic source to get you started on your way to prettying up your Flex Applications.”—Jeffry Houser, Producer of The Flex Show “Creating Visual Experiences with Flex 3.0 takes a thorough look into the design side of Flex application development and is a must-have book for any Flex developer.”—Sean Moore, Flex and AIR Developer, Kannopy, Inc. “Creating Visual Experiences with Flex 3.0 is an outstanding book written by two of the most well-known industry experts. The book is highly accessible, concise, and understandable even for non-designer types such as myself. It is a much needed breath of fresh air in a market chock full of developer-centric Flex books. ”—Jun Heider, Sr. Developer and Technical Trainer, RealEyes Media “I first saw Juan and Andy give a visual effects presentation at 360/Flex Conference. It was clear they were experts on the subject, so I was excited when I heard they were writing a book. And they delivered; I wish I had this book in my hands a long time ago.”—Leonard Souza, Interactive Creative Director “The detailed explanations and relevant examples in Creating Visual Experiences with Flex 3.0 make it a perfect resource for developers at any level.”—Garth D. Braithwaite, Designer/Developer “Creating Visual Experiences with Flex 3.0 is organized and written in such a way that designers receive a gentle introduction to key RIA concepts and Adobe Flex terminology, then quickly build their knowledge and skills with each successive chapter. Creating Visual Experiences with Flex 3.0 speaks the language of a visual designer, a welcome change from most programmer-oriented Flex books.”—Geof Harries, Subvert Marketing, Inc. “With its fantastic visual examples and clear explanations of advanced interface design techniques in Flex, this book is a valuable addition to your RIA library. I recommend this to anyone looking to make fantastic-looking user interfaces with Adobe Flex.”—Chad Udell
|
Ask a Question About this Product More... |
|
