Creating Visual Experiences with Flex 3.0
Published on 27. November 2008
Book
Paperback/Softback
432 pages
978-0-321-54537-4 (ISBN)
Description
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.
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.
Reviews / Votes
"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
More details
Language
English
Place of publication
New Jersey
United States
Publishing group
Pearson Education (US)
Target group
Professional and scholarly
Dimensions
Height: 178 mm
Width: 228 mm
Thickness: 28 mm
Weight
780 gr
ISBN-13
978-0-321-54537-4 (9780321545374)
Copyright in bibliographic data and cover images is held by Nielsen Book Services Limited or by the publishers or by their respective licensors: all rights reserved.
Schweitzer Classification
Persons
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.
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.
Content
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
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