Home / Support / Training / Classroom Curriculum /

Flex 2: Programming the Visual Experience

Prices and course length may vary. Check with your local training center for this information.

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

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

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, 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

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

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

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

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

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

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