1. Home
2. Developer Connection
3. Flex Developer Center
4. Flex Learning Paths

Flex Learning Path – Programmer

Your background: Experience with object-oriented programming
Your goal: Learn to build and architect rich Internet applications (RIAs) built in Flex

• Try the beta version of our Flex Learning Paths
• Provide feedback in the Flex Learning Paths forum

Build a basic dynamic application

To make the most of this goal, move sequentially through the tasks below.

Get inspired

In this task, you will browse applications that are used across a broad variety of industries and use cases. This will provide you with inspiration and ideas, let you see what Flex is capable of, and also give you a look at who is using Flex. Be sure to explore the Flex showcase which is a Flex application that lets you browse and search for publicly available Flex applications. In addition to the companies included there, many other companies are developing Flex RIAs for internal applications where complex business processes are simplified by more interactive applications that display rich data. Oracle, SAP, Business Objects, and other enterprise software companies are also integrating Flex technology with their enterprise applications.

1. Website: Try the latest Adobe suite of rich Internet applications for online file sharing and storage, PDF conversion, word processing, and web conferencing
2. Website: Browse the Flex Showcase
3. Website: Browse Adobe customer success stories
4. Website: In the financial sector, check out NASDAQ Market Replay, a real-time market analysis tool
5. Website: In retail and commerce, try eBay Desktop, a desktop application from eBay
6. Website: In retail and commerce, use Sony Ericsson's product selector for mobile devices
7. Website: In enterprise sales and marketing, see the Demandbase lead acquisition application
8. Website: In enterprise sales and marketing, see the Accelerate4Pharma business process management application, built using salesforce.com services
9. Website: In media and entertainment, see DirectTV’s NFL SUNDAY TICKET SUPERCAST service, an online video streaming service for pro football games
10. Website: In media and entertainment, explore the Amgen Tour of California, a tool for tracking a professional bicycle race
11. Website: In media and entertainment, watch episodes of the popular NBC television series using Friday Night Lights
12. Website: In startups, use Picnik, an online photo editor
13. Website: In startups, use Scrapblog, an online multimedia scrapbook service

Learn how Flex works

In this task, you will get familiar with the tools and technologies you need to create rich Internet applications.

1. Training video: Compare Flash, Flex, Flash Player, and AIR (5:30)
2. Website: Explore the Adobe Flash Platform
3. White paper: Adobe Flash Platform at a glance
4. Article: Design an application specifically for Flex

Make a Flex project

In this task, you will learn to use Flex Builder, a powerful authoring tool based on the popular Java development environment Eclipse, to create your first Flex project.

1. Training video: Get familiar with Flex Builder (7:22)
2. Training video: Create a Flex Builder workspace and project (7:04)

Add controls

In this task, you will learn to add controls to your application which allow you to display content (like text and images) and provide means for users to interact with the application. Be sure you use the Flex Component Explorer application to explore and see in action the more than 40 pre-built controls in the Flex framework. Controls can be separated into two main categories, simple controls (like the Label, Button, Image, DataChooser, ColorPicker, and HSlider controls) and dataProvider controls for which you need to provide a set of data to the component to populate it (like the ComboBox, List, DataGrid, or Tree controls).

1. Exercise: Explore pre-built visual components in the Tour de Flex component explorer, an Adobe AIR application
2. Exercise: Explore containers in the online Flex Component Explorer
3. Training video: Add and modify controls using design mode (4:34)
4. Exercise: Create a project and add controls
5. Training video: Add and modify controls using code (4:07)
6. Documentation: Learn more about the text controls
7. Documentation: Add images

Organize layout

In this task, you will learn to build user interfaces by placing controls inside of containers. Containers are Flex components in which children are positioned using absolute positioning (where you specify in pixels where the components should be placed) or relative positioning (where the container has an algorithm it uses to position the children relative to each other). You can build fluid or flexible interfaces which fill the browser window and respond (or resize) when the browser window changes size using relative percentage-based sizes for controls and containers or using constraint-based layouts in absolute containers.

1. Exercise: Explore pre-built visual components in the Tour de Flex component explorer, an Adobe AIR application
2. Exercise: Explore containers in the online Flex Component Explorer
3. Training video: Work with containers (12:12)
4. Exercise: Work with containers
5. Quick Start: Position and lay out components
6. Training video: Create constraint-based layouts (21:50)

Respond to gestures and events

In this task, you will learn to respond to user gestures and events in the application by registering to listen to and responding to events broadcast by the various framework components. You can register to listen for events inline in MXML or in ActionScript using the EventDispatcher addEventListener() method. Registering in MXML can be the quickest and most consice, but registering to listen in ActionScript enables complete separation of logic and views and also provides more advanced event handling capabilities. You also learn about the event object which is broadcast with every event and contains info about the event that occurred and how to use the Flex Builder debugger.

1. Training video: Bind data between controls (5:48)
2. Training video: Handle events with ActionScript (6:22)
3. Training video: Use the debugger and the event object (10:40)
4. Training video: Add event listeners with ActionScript (5:21)
5. Quick Start: Handle events
6. Exercise: Bind data and handle a user event

Separate application into multiple views

In this task, you will learn to separate your application into multiple views. Each view is a separate MXML component which is turned, by the MXML parser, into an ActionScript class that extends one of the classes in the Flex framework. Separating your views into distinct components allows the components to be reused in multiple places, enables multiple developers to work on the application at the same time, and provides better maintainability and scalability for the application.

1. Training video: Create custom MXML components (8:42)
2. Exercise: Create custom MXML components

Change views

In this task, you will learn the two ways to change what the user sees in an application: using navigation and view states. You use navigation and navigator containers to switch between completely different views. You use view states to make modifications to an existing view.

1. Training video: Work with navigator containers (17:15)
2. Exercise: Work with navigation containers
3. Training video: Create view states (23:01)
4. Quick Start: Create view states
5. Exercise: Work with view states

Learn how to talk to the server

In this task, you will learn the options for talking to back-end data and business logic. You can make requests to the server using HTTP requests (to request XML files, application server pages, or REST-style web services), web services (to request operations of SOAP-based services), or Flash Remoting (to invoke methods of application server classes). Flash Remoting uses the open-source protocol AMF (Action Message Format, a binary, serialized data transport format) to provide a fast, efficient means of transporting data to your application which accelerates application performance.

The Flash Player operates within a security sandbox that limits Flex applications to only be able to access data resources on the same domain and by the same protocol from which the SWF was served. If you want to make a request to a different domain, that server needs to install a cross-domain policy file that grants access from your application's domain. This is not always possible for public ally available data and services. In this case you need to use your application server to proxy the request, either by writing a class to do so, or by using the proxy service of BlazeDS, LiveCycle Data Services DS, or an application with similar functionality.

1. Article: Understand the options for communication between an application and the server
2. Article: Choose an application protocol: AMF vs. JSON vs. XML
3. Documentation: Understand the options for getting and sending data
4. Blog post: View some Ajax and Flex data loading benchmarks
5. Article: Learn about cross-domain policy files

Get data from an XML file

In this task, you will learn to get XML data from the server. You can make an HTTP request to the server to retrieve a static XML file or to request an application server page (like a page created as CFM, PHP, JSP, and so on) that returns XML. You can work with the returned data as arrays and objects or as native ECMAScript XML.

1. Training video: Retrieve data from an XML file (8:26)
2. Exercise: Populate a control with data from an XML file
3. Training video: Display data in the DataGrid (6:35)
4. Training video: Filter XML with E4X (12:04)
5. Exercise: Filter XML with E4X
6. Quick Start: Consume an RSS feed
7. Article: Learn about cross-domain policy files

Create visual objects dynamically

In this task, you will learn to create visual objects dynamically. You can create them in MXML using the Repeater component or in ActionScript by creating the visual object and then adding it to a container using the container's addChild() or addChildAt() method.

1. Quick Start: Create visual objects dynamically with MXML
2. Documentation: Create visual objects dynamically with ActionScript

Customize data displayed in components

In this task, you will learn to customize the data that is displayed in dataProvider components. By default, the data displayed matches that in the dataProvider for the control. To format the text, concatenate multiple fields, or manipulate the text in any way, you can use the labelFunction property of the control. In addition to formatting the text string which is displayed, you can also specify a renderer, a component to be used to render or display the contents of each item in the component.

1. Documentation: Modify the text displayed in a component with labelFunction
2. Training video: Customize item renderers (6:42)
3. Quick Start: Use item renderers
4. Exercise: Create an item renderer
5. Quick Start: Create item editors

Use web services to talk to remote functionality

In this task, you will learn to call a SOAP-based web service. SOAP is an XML-based format that you can use for exchanging structured and typed data between a Flex application and a web service. You typically use web services to invoke third-party remote functionality and use Flash Remoting to communicate with your own server. To learn about Flash Remoting, see the subsequent task Use Flash Remoting to talk to the server.

1. Documentation: Call a web service
2. Video: See the WSDL import tool in action (4:26)
3. Tutorial: Use the WSDL introspection tool

Use Flash Remoting to talk to the server

In this task, you will learn to use Flash Remoting to call methods of server-side classes without having to publish them as web services. Flash Remoting is a gateway that you install on your application server that handles routing the requests between the client and the server-side classes, the data serialization and deserialization, and the mapping of client and server-side data types. Flash Remoting and its protocol AMF (Action Message Format, a binary representation of the data) are now open-source and implementations can be found for most application servers. Flash Remoting is built into ColdFusion 6 or later. For Java servers, you can install BlazeDS or LiveCycle Data Services DS. For other application servers, there are other community or third-party products that provide the remoting functionality.

1. Video: Use remoting to retrieve data (4:48)
2. Video: Use remoting to retrieve and send data (6:18)
3. Training video: Create value object classes (13:46)
4. Training video: Use remoting to request and send value objects (20:52)
5. Exercise: Use remoting to send data to the server

Work with forms

In this task, you will learn to create forms and validate form field data using the Flex framework Validator classes. In addition to providing the logic for validating form fields, these validators also provide visual feedback to the users when the input fails validation.

1. Training video: Validate data (7:15)
2. Quick Start: Validate data
3. Tutorial: Creating a custom form validator in Flex
4. Exercise: Validate form data

Manipulate data on the client

In this task, you will learn to manipulate client-side data. You often work with client-side data as Flex framework collections (typically ArrayCollections or XMLListCollections) that can be bound to views and automatically notify and update the views when any of the data in the collection changes. In this task, you will learn to format data using the Flex framework formatter classes; to filter, sort, and traverse collections using methods of the collection classes; and to manipulate XML using the E4X (ECMAScript for XML) operators.

1. Training video: Format data (6:09)
2. Quick Start: Format data
3. Tutorial: Filtering, sorting, and traversing data in collections
4. Training video: Filter XML with E4X (12:04)
5. Exercise: Filter XML with E4X

Deploy the application

In this task, you will learn to deploy an application as both a browser and desktop AIR application. You can manually deploy an application using Flex Builder to compile a release-build to the server or you can automate the application deployment using industry-standard Ant tasks, which enable you to quickly and easily set up complex build processes for your applications. Flex Ant tasks include two compiler tasks, mxmlc and compc, that extend the Java Ant task. It also includes an HTML-wrapper task that lets you generate custom HTML wrappers and the supporting files for those wrappers.

1. Training video: Deploy Flex and Adobe AIR applications (11:57)
2. Exercise: Deploy your application
3. Exercise: Create and deploy an application built on AIR
4. Documentation: Review a deployment checklist
5. Documentation: Automate your builds using Flex Ant tasks
6. Article: Build and deploy with Ant
7. Article: Use Ant to automate HTML wrapper creation and more

Architect an application

Move sequentially through the tasks below or select a specific task to learn about.

Exchange data between components

In this task, you will learn to exchange data between components by defining and broadcasting custom events. When your application is larger than a single class, you will need to use data from and respond to events of one component in another and vice versa. The way you DON'T want to do this, is by referring to these nested objects or events directly using dot notation; this creates tightly-coupled components and applications that are very difficult to maintain and scale. Instead you want to create loosely-coupled components that only communicate through their APIs: their properties, methods, and events. What you learn in this task is to create custom components with their own custom events just like those in the Flex framework.

1. Training video: Broadcast custom events (5:59)
2. Training video: Create and broadcast custom event objects (23:06)
3. Exercise: Create and dispatch custom events
4. Documentation: Create and broadcast custom events

Learn about Flex GUI design patterns

In this task, you will learn about the design patterns used to create Flex applications. Everything in Flex is event based; for any code to execute, you have to register to listen for and define handlers to respond to events. In order to create code that is easy to maintain and scale, you should at least implement a basic model-view-controller pattern in which your data is separated from your views and your event handling logic. This has been facilitated by the Flex framework with the concept of data binding, which enables you to concisely register your views to be notified and updated whenever the data used to populate them changes. When your application is larger than a single class, you need to exchange data between components by broadcasting and listening for custom events whose associated event object you can define custom properties. For more info on broadcasting events, see the previous task Exchange data between components. As your application continues to grow, you need to continue to separate and apply patterns to facilitate maintenance and updating and you may soon graduate into needing an architecture framework. To learn more about architecture frameworks, see the subsequent tasks Build applications with the Cairngorm framework or Check out other Flex microarchitectures in this Programmer path.

1. Article: Understand the architecture of an RIA
2. Documentation: Learn about Flex collections and data binding
3. Quick Start: Build components using code behind
4. Article with sample code: Apply architecture best practices: Graduate from hack to architected development
5. Video: Listen to a discussion about Flex architectural patterns (72:41)
6. Article: Check out an architectural blueprint used in creating Flex applications (MVCS)
7. Website: Find more about MVCS (a collection of design patterns not an architecture framework)

Reduce SWF size

In this task, you will learn to decrease the size of your application using release builds, the Flash Player framework cache, modules, and runtime shared libraries. As your application continues to grow in features, the SWF may become too large to ensure quick enough download by your clients. If there is application functionality that not every client will use or may not be used right away, you can split it into a module; a module is compiled into its own SWF and then is loaded at runtime via code. If you have multiple applications that share some of the same code libraries, you can use runtime-shared libraries to only require the code be downloaded once and used by both applications during the browser session. Note, only Adobe signed runtime-shared libraries can persist on the client and be cached by the Flash Player after the browser is closed. This is a new feature available in Flash Player 9 Update 3 (9,0,115,0) that enables the Flex framework to be cached and used by Flex applications from any domain.

1. Video: Reduce file size using release builds, modules, and the Flash Player framework cache (4:58)
2. Tutorial: Cache the Flex framework using the Flash Player cache
3. Video: Split an application into modules that are loaded at runtime (8:45)
4. Video: Use runtime shared libraries to share code between applications (7:15)

Build custom components

In this task, you will learn to build custom Flex components. Components can be built either with Flex or Flash (Flash CS3 Professional and later has a tool to export as a Flex component). Flex based components can range from simple components that just extend components in the Flex framework by adding properties and methods, to more advanced components for which you add custom events or styles, to more advanced components that override methods of UIComponent, the base class of all Flex components. The latter requires an understanding of the Flex component life cycle including what methods are called when in the creation and update processes that occur in an application. To learn about creating and using components created in Flash, see the subsequent task Use components created in Flash in this Programmer path.

1. Tutorial: Get an overview of the ways to create Flex components
2. Quick Start: Build components using code behind
3. Documentation: Create components that broadcast custom events
4. Documentation: Create components that have custom styles
5. Documentation: Create advanced components that override UIComponent methods
6. Video: Dive deep into the Flex component life cycle (1:06:00)
7. Tutorial: Create an advanced component that overrides base class methods
8. Documentation: Generate ASDocs documentation for components
9. Video: Package and distribute components as SWCs (10:46)
10. Quick Start: Package and distribute components as SWCs

Use components created in Flash

In this task, you will learn to use components created in Flash. Flex works great for creating components that extend those in the Flex framework. What if you want something much more custom, though, like a component that is an image of a car whose pieces you can click to add them to an insurance claim being created for an accident? This could be done in Flex, but would probably be much harder and take longer (if you know Flash) than creating it in Flash. One of the strengths of Flash is creating animated, interactive, highly visual content. With Flash CS3 Professional and later, you can create a symbol in Flash and then export it as Flex component so it can be used in applications just like a normal Flex framework component.

1. Video: Create custom Flex components with Flash (7:10)
2. Tutorial: Create custom Flex components with Flash

Build applications with the Cairngorm framework

In this task, you will learn about the Cairngorm microarchitecture, one of many architecture frameworks that you can use to build large-scale applications. Cairngorm was originally developed by the software consultancy iteration::two and then released by them as an open-source project for Flex in 2004. It is used extensively by Adobe Consulting to help numerous customers and partners successfully deliver large-scale Flex RIAs. To learn about other Flex microarchitectures, see the subsequent Check out other Flex microarchitectures task in this Programmer path.

1. Article: Decide if you need an architecture framework
2. Blog post: Get some guidelines for deciding if you need and are ready to use an architecture framework
3. Tutorial: Create an application using the Cairngorm framework
4. Article: Develop Flex RIAs with Cairngorm microarchitecture (6 parts)
5. Website: Browse a Cairngorm diagram explorer
6. Website: Browse Cairngorm APIs
7. Website: Go to the home of the Cairngorm project
8. Sample: Develop an image viewer application with Cairngorm
9. Website: Download Cairngorm SWC and source code
10. Article: Delve into the anatomy of an enterprise Flex RIA
11. Presentation: Compare Cairngorm to other frameworks

Check out other Flex microarchitectures

In this task, you will explore other microarchitectures that have been developed for building large-scale applications.

1. Article: Decide if you need an architecture framework
2. Blog post: Get some guidelines for deciding if you need and are ready to use an architecture framework
3. Presentation: Compare various Flex architecture frameworks (1:18:15)
4. Website: PureMVC
5. Website: Model-Glue
6. Website: Swiz
7. Website: Mate

Enhance application functionality

Move sequentially through the tasks below or select a specific task to learn about.

Build a messaging application

In this task, you will learn to build a messaging application. A messaging application is a collaborative application in which data is pushed from the server to the client whenever it receives it; the client does not have to explicitly ask for specific data using one of the remote procedure call methods (HTTP requests, web services, or Flash Remoting calls). You use the Flex Producer and Consumer classes to build applications that can produce (send data to the server), consume (receive data form the server), or both. Examples of collaborative applications range from a simple chat application, to a shared whiteboard like in Adobe Connect, to a real-time data management application in which data is simultaneously updated on the client, the database on the server, and in other Flash Player clients viewing the data. In order to build a collaborative application, you need to install BlazeDS or LiveCycle Data Services ES (for Java and ColdFusion servers) or an application with equivalent functionality for other application servers.

1. Article: Find the application you need on your application server to enable messaging
2. Video: Get up to speed on Flex messaging service (6:11)
3. Tutorial: Build BlazeDS remoting and messaging applications
4. Article: Compare BlazeDS and LiveCycle Data Services ES for integrating with a Java server
5. Website: Learn about BlazeDS for integrating with a Java server
6. Tutorial: Install a turnkey BlazeDS installation and take a 30-minute test drive
7. Sample: Check out code for a live help/call center application using Flex and BlazeDS
8. Sample: Get a Yahoo! Maps collaboration sample application using Flex and BlazeDS

Build a collaborative data application

In this task, you will learn to use the data management service (of Live Cycle Data Services ES for Java or ColdFusion servers or a third-party product like WebORB for other application servers) to build a collaborative data application. A common collaborative data application would be one that presents data from a database to the clients, allows the clients to edit the data, saves the changes to the database on the server, and then pushes those changes out to any other clients using the application. You can accomplish this task using a combination of Flash Remoting (or other remote procedure call methods) and messaging. You can also accomplish this task with the data management service writing a lot less client-side code and a little more setup in server-side configuration files. Additionally, it provides support for on-demand data paging, interaction with occasionally connected application services, and a custom assembler for integrating with the Hibernate data-persistance framework.

1. Video: Learn about the LiveCycle data management service
2. Video: Synchronize data and resolve conflicts with LiveCycle
3. Documentation: Build an application with a LiveCycle managed database

Save data

In this task, you will learn to save application data locally on the client computer using three different methods. You can save data using shared objects, the Flash Player version of cookies. Shared objects are generally used to save user preferences or non-secure user-based application data between sessions. You can also use the Flash Player FileReference class to download (and upload) files from the server and new to Flash Player 10, to directly save (and load) files from the client computer.

1. Video: Save data locally with shared objects, 'Flash cookies' (4:20)
2. Blog post: Load and save local files with Flash Player 10
3. Documentation: View the API for loading and saving local files
4. Documentation: Upload and download files from the server
5. Documentation: Print application content

Enable browser navigation

In this task, you will learn to enable browser navigation of your application. Traditional web applications are groups of pages that are individually requested and sent to the browser. The client traverses these pages and bookmarks specific pages to return to them later. With a Flex application, you have one web page which contains your entire application; when clients click the browser back button, they will be returned to whatever web page they were previously viewing. Clients are used to interacting this way with the browser, so for usability, you need to continue to let them do so. You enable bookmarking by using deep linking in the Flex framework which adds URL-mapping and bookmarking capabilities to Flex applications. This works by creating unique URLs for different application states so that new entries are created in the browser's history. Because this entails communication between JavaScript in the container HTML page and the Flex SWF, deep-linking is only supported by certain browsers. To learn more about ActionScript/JavaScript communication, see the subsequent Access JavaScript from Flex and vice versa task.

1. Cookbook: Enable browser navigation of your Flex app with deep links
2. Documentation: Learn more about deep linking and bookmarking
3. Article: Use the URLKit for advanced deep linking

Access JavaScript from Flex and vice versa

In this task, you will learn how to get JavaScript and ActionScript to communicate. The easiest way to call JavaScript functions from your Flex application is to use the static call() method of the Flash Player ExternalInterface class, passing to it the name of the JavaScript function and any argument values. Any data returned by the JavaScript function will be returned by the call() method. To call ActionScript functions from JavaScript, you create a public ActionScript function, and then register it as callable from JavaScript using the static addCallback() method of the ExternalInterface class. You can pass primitives, numbers, and strings as properties on objects, arrays of simple types, and arrays of simple objects using this method. To exchange more complex or strongly-typed objects, you need to use the Flex Ajax Bridge which is a small, unobtrusive code library (now part of the Flex SDK).

1. Documentation: Call JavaScript functions from a Flex application or ActionScript functions from the HTML page using the ExternalInterface API
2. Documentation: See what browsers support the ExternalInterface API
3. Documentation: Use the Flex Ajax Bridge to simplify complex JavaScript/ActionScript communication
4. Video: Control video using Ajax and the Flex Ajax Bridge (2:19)
5. Article: Check out some hybrid Flex/Ajax applications

Build multilingual applications

In this task, you will learn to build multilingual applications. You create resource properties files and then either bind values from the resource to an expression using the @Resource directive or use methods of the ResourceBundle class to access those values. You can compile multiple locales (resource bundles) into a single SWF or or create resource modules from the properties files and load them at runtime, allowing you to change locale on the fly.

1. Video: Create multilingual applications
2. Documentation: Build multilingual applications

Build accessible applications

In this task, you will learn to build accessible applications. Flex 3 includes 28 components with support for accessibility built in, automating many of the most common accessibility practices such as providing text equivalents, labeling controls, and promoting keyboard access. You need to tell the compiler explicitly to use these accessible versions of the components because they increase the size of the application.

1. Website: Explore the Flex accessibility portal
2. Article: Learn to create accessible applications
3. Exercise: Use Flex applications with JAWS

Customize the application

In this task, you will learn to change the look of components in your application using styles and style sheets. You learn where to find styles for a component, how to set styles for an individual component inline in MXML or in ActionScript, and how to create and use a style sheet containing global, type, and class selectors. New in Flex Builder 3, you can interactively set and preview styles on any component in Flex Builder Design view. Although you can set styles for an individual component inline, for maintenance reasons, you should try to set all your styles in a style sheet. Styles give you a lot of freedom in customizing the look of the application without having to do much. If you want to change the look of a component in a way that cannot be accomplished with styles, though, you need to "skin" the component either graphically or programmatically. To learn more about skinning, see the Graphically skin components and/or Programmatically skin components tasks in the Designer/Developer path.

1. Training video: Apply styles to components (29:06)
2. Quick Start: Style components
3. Exercise: Use the Style Explorer
4. Exercise: Work with styles

Add animation

In this task, you will learn to add animation to your application. Motion should not be used gratuitously, but is essential to good application design making applications more useful, usable, and desirable. You should use motion to provide feedback and focus your users' attention, eliminate jerky jumps, and help guide users to the next area of interest and make it clear how to return. Flex has many pre-built effects (including Fade, Rotate, Zoom, WipeLeft, and others) which you can use alone or in parallel or sequence with other effects. When you use view states, you can define transitions in which one or more effects are grouped together to play when a view state change occurs. To learn more about view states, go to the Change views task.

1. Article: Learn why and how you should use motion
2. Website: Explore built-in effects with the Component Explorer
3. Training video: Animate with behaviors and transitions (18:06)
4. Quick Start: Use effect methods and events
5. Quick Start: Define state transitions
6. Exercise: Animate with effects and transitions

Add drag-and-drop

In this task, you will learn to add drag-and-drop functionality to your application. The list-based controls (DataGrid, HorizontalList, List, PrintDataGrid, TileList, and Tree) have built-in drag-and-drop support; all you have to do is set properties dragEnabled and dropEnabled to true. To use drag-and-drop support with any Flex component or to customize the drag-and-drop support with list-based components, you must handle the drag-and-drop events yourself using listeners and the DragManager class.

1. Training video: Drag data between List components (5:20)
2. Quick Start: Drag data between any components
3. Exercise: Drag data between List components
4. Documentation: Learn more about manually adding drag-and-drop support

Visualize data

In this task, you will learn about the Flex components available to visualize your data. With Flex Builder 3 Professional, you get a set of advanced visualization components in addition to the standard Flex framework components; these include Bar, Column, Line, Area, Plot, Bubble, Pie, CandleStick, and HLOC charts; an advanced DataGrid; and an OLAPDataGrid. You can style, skin, and customize the charts; add legends; animate data series; add components or drawing on top of the chart; have multiple axes; and more. These components are augmented by the components created by iLOG including 3D charts, gauges and dials, map displays, Gantt charts, organizational charts, tree maps and radar charts.

1. Exercise: Explore Flex 3 charting components with the Tour de Flex component explorer
2. Exercise: Explore Flex 3 charting components with the online Component Explorer
3. Documentation: Add and customize charts
4. Website: Check out the iElixir advanced data visualization components
5. Tutorial: Build a simple dashboard (with an interactive map) using ILOG Elixir
6. Documentation: Use the AdvancedDataGrid
7. Documentation: Create an OLAPDataGrid

Add video and sound

In this task, you will learn to add video and sound to your application. You can deliver FLV-formatted video using the Flex VideoDisplay component or custom Flash video display components. You can play MP3 files using the Sound class.

1. Video: Use the Flex VideoDisplay component to show FLV videos (2:09)
2. Documentation: Learn about the VideoDisplay component
3. Documentation: Learn about the FLV video format
4. Video: Control video from the HTML page using the Flex Ajax Bridge (2:19)
5. Video: Build a video application that captures and displays a video stream (3:34)
6. Documentation: Learn about working with the client camera
7. Tutorial: Use Flash media components to play video in Flex applications
8. Article: Learn more about working with video in Flex
9. Documentation: Work with sound
10. Excerpt: Flex 3 Component Solutions excerpt: Audio and video components