Flex 2: Programming the Visual Experience  (4 days)

Onsite and private classes available. Please enquire directly for details...

Description

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 mockups. This three-day course instructs programmers how to work with embedded images and fonts, implement transitions and easing effects, apply filters and blends, and programmatically interact with mouse position and actions like dragging and dropping. In addition, students will learn how to extend and skin Flex UI components using both images and shapes drawn with the ActionScript Drawing API.

Audience

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 Applications

You do not:

• need to be a designer
• need to know any design tools

Course Outline

Unit 1:  Introducing Flex 2: Programming the Visual Experience

• Modifying the default look-and-feel of Flex applications
• Understanding why Flex programmers need a design course
• Introducing Mastery Learning
• Understanding the Course Format
• Reviewing the course prerequisites
• Reviewing the course outline
• Setting up the application files

Unit 2:  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

Unit 3:  Enhancing the application with fonts, filters and blends

• Understanding the limitations of device fonts
• Learning the limitations of device fonts
• Embedding fonts with direct calls to the font files in the file system
• Embedding fonts using FlashType
• Exploring advanced FlashType settings
• Exploring filters
• Exploring filter properties
• Applying blends

Unit 4:  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
• Walkthrough: Modifying the Natural Experiences Welcome Panel using MXML styles
• Modifying graphical skins using Adobe Flash templates

Lab Day 1: Adding Imagery, Fonts and Animation to the Visual Experiences Application

Unit 5:  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 updateDisplayList() method
• Calling the updateDisplayList() method of the super class
• Improving custom component reusability with stylesheets

Unit 6:  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 draw a star
• Creating a visual element as an ActionScript class
• Creating shapes
• Defining fill methods
• Implementing a ButtonSkin from the mx.skins.halo package
• Implementing a programmatic skin

Unit 7:  Animating components and state changes

• Reviewing Behaviors
• Defining behavior triggers
• Applying behaviors
• Creating a fly-in popup component
• Reviewing View 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

Lab Day 2: Skinning the Visual Experiences Application

Unit 8:  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

Unit 9:  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

Unit 10:  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

Lab Day 3: Adding drag-and-drop functionality and transitions to the Visual Experiences application