Creating Visual Experiences with Flex 3.0

List 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.

Product details

• Authors: Andy Mcintosh, Juan Sanchez
• Publisher: Addison-Wesley Longman, Amsterdam
• Languages: English
• Product format: Book
• Released: 04.12.2008
• EAN: 9780321545374
• ISBN: 978-0-321-54537-4
• Dimensions: 178 mm x 228 mm x 28 mm
• Weight: 788 g
• Series: Developer's Library; Developer's Library
• Subject: Natural sciences, medicine, IT, technology > IT, data processing > Application software