O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating Visual Experiences with Flex 3.0

Creating Visual Experiences with Flex 3.0

by Andy McIntosh, Juan Sanchez
Publisher: Addison-Wesley Professional
Release Date: November 2008
ISBN: 9780321591098
View table of contents
Start reading

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

Table of Contents

  1. Copyright
  2. Praise for Creating Visual Experiences with Flex 3.0
  3. Foreword
  4. Preface
    1. Scope of This Book
    2. Audience for This Book
    3. Background
    4. How This Book Is Organized
    5. Conventions Used in This Book
    6. Styling and Skinning Diagrams
    7. Additional Resources
  5. Acknowledgments
  6. About the Authors
  7. I. Introduction
    1. 1. Rich Internet Applications
      1. The Audience
      2. The Content
      3. User Interaction
      4. The Presentation
        1. Color
        2. Motion
        3. Typography
        4. Iconography
        5. Layering and Depth
        6. External Elements
      5. Summary
    2. 2. Adobe Flex and AIR
      1. Flex 3.0 Framework
        1. Dynamic Layout
        2. Extensible Visual Components
        3. Custom Appearance
        4. The Power of Motion
      2. Developing Flex Applications
        1. Flex 3 SDK and MXML Compiler
        2. Adobe Creative Suite
        3. Distributing a Flex Application
      3. Summary
  8. II. The Flex 3 Framework
    1. 3. Dynamic Layout
      1. Understanding Flex Layout
      2. Automatic Positioning
        1. Linear Layout
        2. Multidimensional Layout
        3. Understanding Padding and Gap
        4. Excluding Components from Automatic Layout
        5. Using a Spacer Control
      3. Absolute Positioning
        1. Specifying Component Position as Cartesian Coordinates
        2. Specifying Component Position with Constraint-Based Layout
          1. Positioning Relative to Edges
          2. Positioning Relative to Centers
          3. Using Constraint Rows and Columns
      4. Sizing Components
        1. Specifying Size in Pixels
        2. Specifying Size as a Percentage
        3. Letting Components Determine Their Own Size
        4. Understanding How Constraints Affect Size
      5. Managing Scrolling
      6. Summary
    2. 4. Styling
      1. Understanding Style Properties
        1. Inheritance
        2. Data Types and Formats
      2. Applying Styles Inline
      3. Applying Styles Using CSS
        1. Understanding Local and External Styles
        2. Understanding CSS Selectors
          1. Class Selectors
          2. Type Selectors
          3. The Global Selector
        3. HTML versus Flex CSS
      4. Style Precedence
      5. Working with Styles Using ActionScript
        1. Creating Stylable Widgets
        2. Introducing the Style Manager
      6. Styling in Design View
      7. CSS Design View
      8. Themes
      9. Summary
    3. 5. Graphical Skinning
      1. Difference Between Bitmap and Vector
      2. Embedding Graphics in Flex 3
      3. Using 9-Slice Grids
        1. Setting 9-Slice Grids
      4. Naming Conventions for Skin Importing
        1. The General Rules
        2. Naming for Class Selectors
        3. Naming for Sub-Components
      5. Using the Skin Import Wizard
      6. Working with Skins in CSS Design View
      7. Skin Templates
      8. Mixing Tools
      9. Summary
    4. 6. Programmatic Skinning
      1. Introducing the Drawing API
        1. Understanding How Strokes Are Drawn
      2. Creating a Programmatic Skin
        1. Choosing a Base-Class
          1. mx.skins.ProgrammaticSkin
          2. mx.skins.Border
          3. mx.skins.RectangularBorder
          4. Using a Nonstandard Base-Class
        2. Implementing Interfaces
          1. IProgrammaticSkin
          2. IBorder
        3. Overriding Methods
          1. Overriding the styleChanged Method
          2. Overriding the updateDisplayList Method
      3. Understanding Measurement and Programmatic Skinning
      4. Summary
    5. 7. Lists and Navigation Components
      1. List-Based Components
        1. List, HorizontalList, and TileList
        2. Tree
        3. DataGrid
        4. Menu
      2. Item Renderers and Editors
        1. Using a Drop-In Item Renderer or Editor
        2. Creating an Inline Item Renderer or Editor
        3. Creating an Item Renderer as a Separate Component
        4. Creating an Item Renderer for a Tree or Menu
      3. Navigation Controls
        1. ButtonBar
        2. ToggleButtonBar
        3. TabBar
        4. LinkBar
      4. Navigation Containers
      5. Specifying Labels and Icons
      6. Using a List-Based Component for Navigation
      7. Summary
    6. 8. Indicators and Cursors
      1. Understanding by Example
      2. Icons
        1. Implementing an Icon
        2. Positioning an Icon
      3. Focus Border
      4. Tool Tips
        1. Creating Tool Tips
        2. Error Tips
        3. Data Tips
        4. Scroll Tips
        5. Styling and Skinning a Tool Tip
      5. Using the Tool Tip Manager
        1. Creating a Tool Tip Programmatically
        2. Timing and Motion of Tool Tips
      6. Cursors
        1. The Cursor Manager
      7. Summary
    7. 9. Fonts and Text
      1. Attention to Text
      2. Customizing Fonts
        1. Device Fonts
        2. Using a System Font
      3. Embedding Fonts
        1. Embedding a Local Font
        2. Embedding a TTF File
      4. Using Fonts from SWFs
      5. Advanced Anti-Alias Properties
      6. Specifying Character Ranges
        1. Character Ranges in an @font-face Declaration
        2. Character Ranges in Flash
      7. Working with Fonts in CSS Design View
      8. Text Styling for Consistency
      9. Working with Text
        1. Positioning Text
      10. Working with HTML Text
        1. Assigning HTML Text
        2. Styling Characters within HTML Text
        3. Style Sheets for HTML Text
      11. Summary
    8. 10. Filters and Blends
      1. Filters
      2. Working with Filters
      3. Filter Properties
      4. Applying Filters
        1. Using the Filters Tag
        2. Using the Filters Array
        3. Applying Filters Using ActionScript
      5. Blends
        1. Applying a Blend
      6. Summary
    9. 11. Effects and Transitions
      1. Using Effects and Transitions
        1. Considerations
        2. Real-World Scenarios
      2. Effects
      3. Applying Effects
        1. Targeting Components
        2. Triggering an Effect
        3. Using Start and End Events
        4. Customizing an Effect
        5. Controlling the Timing
        6. Controlling the Play
      4. Compound Effects
      5. Easing Functions
        1. Using an Easing Function
        2. Creating a Custom Easing Function
        3. Using a Custom Easing Function
      6. Repurposing Effects
      7. Data Effects
      8. Default Data Effects
        1. Triggering a Data Effect
        2. Using a Default Data Effect
      9. Custom Data Effects
        1. Creating a Custom Data Effect
        2. Action Effects
        3. Filter Properties
      10. Other Tweening Options
        1. Tweener
        2. Boostworthy AS3 Animation System
        3. KitchenSync
      11. Transitions
      12. View States
        1. Creating a View State
        2. Override Classes
      13. Adding Transitions
        1. Creating a Transition
        2. Override Actions
        3. Transitions and Layout
      14. Summary
  9. III. Beyond Flex
    1. 12. Flex and Flash Integration
      1. Flex Component Kit
        1. Working with Frame Labels
        2. Specifying Bounds
        3. Creating Full Custom Components
      2. Motion XML
      3. Summary
    2. 13. Customizing AIR Applications
      1. Getting Started
      2. Working with Window Chrome
        1. Customizing with Flex Chrome
        2. Custom Window Chrome
      3. Custom Application Icons
      4. Summary
  10. IV. Exercises
    1. 4.1. Loading a Style Sheet at Runtime
      1. Summary
    2. 5.1. Creating a Graphical Skin with Flash
      1. Getting Started
      2. Creating the Artwork
      3. Converting Artwork to Symbols
      4. Setting the 9-Slice Scale Grids
      5. Bringing Your Flash Artwork into Flex
      6. The Final Product
      7. Taking This Example Further
      8. Using Bitmap Assets in Flash
      9. Skin Templates for Flash
      10. Summary
    3. 5.2. Creating a Graphical Skin with Illustrator
      1. Getting Started
      2. Creating the Artwork
      3. Taking Your Skin Artwork into Flex
        1. The Final Product
      4. Taking This Example Further
        1. Creating Other Assets
      5. Using Skin Templates
      6. Summary
    4. 5.3. Creating a Graphical Skin with Fireworks
      1. Getting Started
      2. Creating the Artwork
      3. Bringing Your Skins into Flex
      4. The Finished Product
      5. Taking This Example Further
        1. Creating Other Assets
      6. Using Skin Templates
      7. Summary
    5. 5.4. Creating a Graphical Skin with Photoshop
      1. Getting Started
      2. Creating the Artwork
      3. Taking Your Skin Artwork into Flex
      4. The Final Product
      5. Taking This Example Further
        1. Creating Other Assets
      6. Using Skin Templates
      7. Summary
    6. 6.1. Creating a Programmatic Skin
      1. Setting Up a Testing Harness
      2. Creating the Skin Class
      3. Applying the Skin to the Buttons
      4. Drawing the Artwork
        1. Overriding updateDisplayList
        2. Drawing the Borders
        3. Drawing the Fills Based on Button State
      5. Applying Styles
      6. The Final Product
      7. Taking This Example Further
      8. Summary
    7. 7.1. Creating a Chat Dialog Window Using a List
      1. Getting Started
      2. Testing the Application
      3. Summary
    8. 7.2. Creating a Photo Gallery Using a TileList
      1. Summary
    9. 9.1. Embedding a Font in a SWF File Using Flash
      1. Summary
    10. 9.2. Packaging a CSS File with a Font as a SWF
      1. Summary
    11. 9.3. Creating a Style Sheet for HTML Text
      1. Summary
    12. 11.1. Applying a Custom Effect
      1. Summary
    13. 11.2. Creating a Transition between View States
      1. Summary
    14. 12.1. Creating a Graphical Skin Using the Flex Component Kit
      1. Creating the Skin Structure
      2. Creating the Skin Artwork
      3. Creating Transitions
      4. Setting the 9-Slice Grid
      5. Bringing the Flash Skin into Flex
      6. The Final Product
      7. Creating Other Assets
      8. Summary
    15. 12.2. Using Flash Skin Templates
      1. Summary
    16. 12.3. Creating a Custom Container Using the Flex Component Kit
      1. Creating a Basic Container in Flash
      2. Bringing Your Custom Container into Flex
      3. Summary
    17. 12.4. Using Motion XML
      1. Preparing Flex
      2. Summary
  11. V. References
    1. A. Skinning and Styling Diagrams
    2. B. Filters Cheat Sheet
    3. C. Resources and Cool Stuff
      1. User Experience Design
      2. Flex Skins and Themes
      3. Flex Component Kit
      4. Flex Explorers
      5. Community Flex Components
      6. Flex Libraries and Frameworks
      7. Reference
      8. Downloads
      9. Community
      10. Adobe Blogs
      11. Other Blogs
      12. Flex and AIR Showcase
      13. Icons
      14. Fonts
      15. Graphics