Register your product to gain access to bonus material or receive a coupon.
Creating Visual Experiences with Flex 3.0
- By Juan Sanchez, Andy McIntosh
- Published Nov 17, 2008 by Addison-Wesley Professional. Part of the Developer's Library series.
Book
- Sorry, this book is no longer in print.
Description
- Copyright 2009
- Edition: 1st
- Book
- ISBN-10: 0-321-54537-0
- ISBN-13: 978-0-321-54537-4
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.
Sample Content
Online Sample Chapter
Sample Pages
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