Flex 2: Programming The Visual Experience

Requirements:
To gain the most from this class, you should:

• Have attended the Flex 2: Developing Rich Client Applications course
  


• Have equivalent knowledge of the topics covered in Flex 2: Developing Rich Client Application course.

Course objectives:
Upon successful completion of this course, students will be able to:

• Modifying the look-and-feel in Flex
  


• Using bindable variables for imagery
  


• Applying blends and fi lters
  


• MXML styles
  


• Extending Flex components
  


• Vie- States and Transitions
  


• Skinning the Application
  


• Handling data in drag and drop operations

Course content:
Course Summary
Flex 2: Programming the Visual Experience provides experienced Flex developers with hands-on, practical experience implementing common graphical and interactive requirements illustrated by designer and project mock-ups. This three-day course instructs programmers ho- to work with embedded images and fonts, implement transitions and easing effects, apply fiters and blends, and programmatically interact with mouse position and actions like dragging and dropping. In addition, students will learn ho- to extend and skin Flex UI components using both images and shapes drawn with the ActionScript Drawing API.
Course Content
Flex 2: Programming the Visual Experience

• Modifying the default look-and-feel of Flex applications
  


• Introducing Mastery Learning
  


• Understanding the Course Format
  


• Reviewing the course prerequisites
  


• Reviewing the course outline
  


• Setting up the application files

Enhancing the application with imagery and layering

• Adding background colors and imagery to the application
  


• Adding an application background image
  


• Adding imagery to the Natural Experiences application
  


• Layering content using absolute layout
  


• Creating a reusable embedded image
  


• Creating instances of an embedded image class
  


• Using bindable variables for imagery
  


• Creating simple popup functionality
  

Enhancing the application with fonts, fi lters and blends

• Understanding the limitations of device fonts
  


• Learning the limitations of device fonts
  


• Embedding fonts with direct calls to the font fi les in the fi le system
  

Embedding fonts using FlashType

• Exploring advanced FlashType settings
  


• Exploring fi lters
  


• Exploring fi lter properties
  


• Applying blends

Modifying the look-and-feel of Flex components graphically

• Exploring 9-slice scaling
  


• Exploring 9-slice scaling
  


• Modifying the look-and-feel of Flex components using MXML styles
  


• Modifying the Natural Experiences
  


• Modifying graphical skins using Adobe Flash templates
  

Extending Flex Components

• Learning display object basics
  


• Exploring the non-content children
  


• Introducing the DisplayObject class and its subclasses
  


• Extending Flex components
  


• Creating an extended component
  


• Implementing the createChildren() method
  


• Implementing the updateDisplay List() method
  


• Calling the updateDisplayList() method of the super class
  


• Improving custom component reusability with stylesheets
  

Drawing shapes and programmatically modifying the look-and-feel of Flex components

• Understanding the relationship between display list objects and the Graphics class
  


• Calling the clear() method
  


• Exploring the clear() method
  


• Drawing lines
  


• Using the scaleMode argument of the lineStyle() method
  


• Ordering the lineStyle() method arguments
  


• Using line methods to dra- a star
  


• Creating a visual element as an ActionScript class
  


• Creating shapes
  


• Defi ning fi ll methods
  


• Implementing a ButtonSkin from the
  


• mx.skins.halo package
  


• Implementing a programmatic skin
  

Animating components and state changes

• Reviewing Behaviors
  


• Defi ning behavior triggers
  


• Applying behaviors
  


• Creating a fl y-in popup component
  


• Reviewing Vie- States and Transitions
  


• Using the CurrentStateChange change event
  


• Understanding the order of events and transitions
  


• Setting a custom component's size for state changes
  


• Handling child components that become invisible in transitions

Passing data between components to affect layout and data display

• Creating custom component properties
  


• Passing and displaying XML photo data in the gallery
  


• Reviewing the Repeater component
  


• Using dynamic data in the Repeater
  


• Using currentItem with a complex data structure
  


• Using Repeater data in ActionScript
  


• Calculating custom component size
  


• Creating a more flexible tile display
  

Creating mouse-aware application features

• Detecting the mouse position
  


• Moving the popup to the mouse position
  


• Detecting the stage dimensions
  


• Creating animation using the Timer class
  


• Understanding easing
  

Implementing Drag and Drop Functionality

• Understanding the DragManager
  


• Enable drag and drop functionality in a drag enabled component
  


• Specifying the data to display in a List control
  


• Enabling dragging on non-list-based controls
  


• Controlling dropping with formats
  


• Handling data in drag and drop operations
  


• Viewing data in the DragSource