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 Flex version of our Flex Learning Paths
• Provide feedback in the Flex Learning Paths forum

Build a basic data-driven application

Get inspired

In this task, you will browse rich Internet applications built in Flex 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 letting 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: In online applications, use Picnik, an online photo editor
2. Website: In media and entertainment, explore the Amgen Tour of California, a tool for tracking a professional bicycle race
3. Website: In media and entertainment, watch episodes of the popular NBC television series, Friday Night Lights
4. Website: In retail and commerce, use Sony Ericsson's product selector for mobile devices
5. Website: Browse Adobe featured applications

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. Presentation video: Listen to Adobe discuss their RIA Roadmap (54:19)
3. Website: Explore the Adobe Flash Platform
4. White paper: Read Adobe Flash Platform at a glance
5. 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. Application: Explore pre-built visual components in the Tour de Flex component explorer, an Adobe AIR application
2. Website: Explore pre-built visual components 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
2. Exercise: Explore containers in the 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 concise, 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 publicly 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. Quick Start: Use item renderers
3. Training video: Customize item renderers (6:42)
4. Exercise: Create an item renderer
5. Tutorial: Create item renderers (5 part series)
6. Quick Start: Create item editors
7. Tutorial: 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-sourceand 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. For additional info for specific servers, see the following tasks in the Designer/Developer track: Use Flash Remoting to talk to a ColdFusion server, Use Flash Remoting to talk to a PHP server, Use Flash Remoting to talk to a .NET server.

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. Exercise: Validate form data
4. Tutorial: Build a custom validator

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
6. Presentation video: Work with E4X (54:34)
7. Blog post: Work with node names containing a dash - character

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. Book chapter: Embed the application in a web page
6. Article: Use SWFObject to embed a SWF in a web page
7. Documentation: Automate your builds using Flex Ant tasks
8. Article: Build and deploy with Ant
9. Article: Use Ant to automate HTML wrapper creation and more

Architect an application

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 and/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. Presentation video: Start with a basic app and transform it to use MVC (59:53)
4. Quick Start: Build components using code behind
5. Article with sample code: Apply architecture best practices: Graduate from hack to architected development
6. Video: Listen to a discussion about Flex architectural patterns (72:41)
7. Article: Use dependency injection
8. Article: Check out an architectural blueprint used in creating Flex applications (MVCS)
9. 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)
5. Presentation video: Create large applications using modules, RSLs, and the Marshall plan (56:28)
6. Presentation video: Learn about version support for large applications (1:09:02)

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. Presentation video: Learn about the Flex component lifecycle (54:27)
6. Presentation video: Create new Flex 3 components and beyond (1:00:01)
7. Documentation: Create advanced components that override UIComponent methods
8. Video: Dive deep into the Flex component life cycle (1:06:00)
9. Tutorial: Create an advanced component that overrides base class methods
10. Documentation: Generate ASDocs documentation for components
11. Video: Package and distribute components as SWCs (10:46)
12. Quick Start: Package and distribute components as SWCs
13. Presentation video: Get Flex Builder to enable visual manipulation of components in SWCs (54:33)

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

Learn about Flex microarchitectures

In this task, you will get introduced to the concept of using a microarchitecture, a collection of design patterns, to build medium to large-scale applications. For more details on specific microarchitectures, see the subsequent Build applications with the Cairngorm framework and Check out other Flex microarchitectures tasks 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. Article: Choose a Flex framework (Cairngorm, Mate, Swiz, PureMVC)
4. Presentation video: Start with a basic app and transform it to use MVC (59:53)
5. Blog post: Get introduced to five different frameworks (InsideRIA FrameworkQuest 2008 - 6 part series)
6. Blog post: See which Flex framework developers currently prefer
7. Presentation video: Listen to a panel of experts discuss the frameworks they use and why (46:01)
8. Presentation video: Compare various Flex architecture frameworks (1:18:15)

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 medium to 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 decide if you should use a microarchitecture, see the previous Learn about Flex microarchitectures task. To learn about other Flex microarchitectures, see the subsequent Check out other Flex microarchitectures task.

1. Video: Get a quick intro to Cairngorm (3:28)
2. Article: Develop Flex RIAs with Cairngorm microarchitecture (6 parts)
3. Blog post: Cairngorm explained (InsideRIA FrameworkQuest 2008 Part 2)
4. Tutorial: Create an application using the Cairngorm framework
5. Presentation video: Get tips from Adobe consultants (55:32)
6. Website: Download Cairngorm SWC and source code
7. Website: Browse a Cairngorm diagram explorer
8. Website: Browse Cairngorm APIs
9. Sample: Develop an image viewer application with Cairngorm
10. Article: Delve into the anatomy of an enterprise Flex RIA

Check out other Flex microarchitectures

In this task, you will explore other microarchitectures that have been developed for building medium to large-scale applications. To decide if you should use a microarchitecture, see the previous Learn about Flex microarchitectures task. To learn about the Cairngorm microarchitecture, see the previous Build applications with the Cairngorm framework task.

1. Article: Choose a Flex framework (Cairngorm, Mate, Swiz, PureMVC)
2. Video: Introducing PureMVC (3:54)
3. Website: PureMVC
4. Blog post: PureMVC explained (InsideRIA FrameworkQuest 2008 Part 3)
5. Website: Swiz
6. Blog post: Swiz explained (InsideRIA FrameworkQuest 2008 Part 4)
7. Website: Mate
8. Blog post: Mate explained (InsideRIA FrameworkQuest 2008 Part 5)
9. Website: Model-Glue
10. Website: GEMVC: Good Enough MVC
11. Website: Ruboss, a framework for Flex and Ruby on Rails

Enhance application functionality

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 for your application server to enable messaging
2. Video: Get a quick look at the Flex messaging service in action (6:11)
3. Presentation video: Learn more about building messaging applications (56:12)
4. Presentation video: Use BlazeDS and LiveCycle DS for ColdFusion (59:14)
5. Tutorial: Build BlazeDS remoting and messaging applications
6. Article: Compare BlazeDS and LiveCycle Data Services ES for integrating with a Java server
7. Website: Learn about BlazeDS for integrating with a Java server
8. Tutorial: Install a turnkey BlazeDS installation and take a 30-minute test drive
9. Sample: Check out code for a live help/call center application using Flex and BlazeDS
10. Sample: Get a Yahoo! Maps collaboration sample application using Flex and BlazeDS

Build social apps using hosted services

In this task, you will learn to add real-time social capabilities to your applications using Adobe Flash Collaboration Service (formerly code named Cocomo), a Platform as a Service that lets you easily add VoIP audio, webcam video, chat, multi-user whiteboards, real-time file sharing, user management, roles and permissions, and robust data messaging. The Flash Collaboration Service consists of both Flex-based client components and a hosted services infrastructure, hosted at Acrobat.com so issues like deployment, maintenance, and scalability are taken care of for you.

1. Website: Get inspired by applications created using Flash Collaboration Service features
2. Presentation video: Build collaboration applications with Flex and the Flash Collaboration Service (1:00:58)
3. Website: Sign up for the beta and get the SDK
4. Tutorial: Get started with the Flash Collaborative Service (Cocomo)

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. Presentation video: Use BlazeDS and LiveCycle Data Services ES for remoting, collaboration, and offline data synchronization
3. Video: Synchronize data and resolve conflicts with LiveCycle
4. Presentation video: Use BlazeDS and LiveCycle Data Services ES for ColdFusion (59:14)
5. 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 application 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
3. Flex cookbook: Compile resource bundles using Ant

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
5. Presentation video: Learn about Flex 4 skinning

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
7. Presentation video: Learn how to animate in Flex 4 (1:00:44)

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, calendars, map displays, Gantt charts, organizational charts, tree maps and radar charts.

1. Application: Explore pre-built visual components in the Tour de Flex component explorer, an Adobe AIR application
2. Website: Explore Flex 3 charting components with the online Component Explorer
3. Presentation video: Use the charting components (57:49)
4. Presentation video: Learn to use the data visualization components (58:27)
5. Documentation: Add and customize charts
6. Website: Check out the iElixir advanced data visualization components
7. Presentation video: Use and extend the iElixir components (59:23)
8. Presentation video: Explore a demo application using iElixir components
9. Tutorial: Build a simple dashboard (with an interactive map) using ILOG Elixir
10. Documentation: Use the AdvancedDataGrid
11. 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. Presentation video: Adding video to your Flex application (1:24:16)
2. Article: Learn about the video encoding ecosystem for Flash
3. Documentation: Learn about the FLV video format
4. Blog post: Clear up common Flash Video misconceptions
5. Video: Use the Flex VideoDisplay component to show FLV videos (2:09)
6. Documentation: Learn about the VideoDisplay component
7. Video: Control video from the HTML page using the Flex Ajax Bridge (2:19)
8. Video: Build a video application that captures and displays a video stream (3:34)
9. Documentation: Learn about working with the client camera
10. Tutorial: Use Flash media components to play video in Flex applications
11. Article: Learn more about working with video in Flex
12. Documentation: Work with sound

Add mapping capabilities

In this task, you will learn how to create Flex and mapping mashups.

1. Exercise: Explore 3rd-party mapping examples in the Tour de Flex Adobe AIR application
2. Blog post: Use the Google Maps API for Flash and the Google Street View API
3. Tutorial: Create driving directions using the Google Maps API for Flash
4. Website: Check out the Google Maps Flash API
5. Sample: Get a Yahoo! Maps collaboration sample application using Flex and BlazeDS