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

Flex Learning Path – Designer/Developer

Your background: Little or no experience with programming
Your goal: Learn to build and customize 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

Learn about the technology

See Flex in Action

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 learn about the Adobe Flash Platform including its tools (Flex Builder and Creative Suite), clients (Flash Player and Adobe AIR), frameworks (Flex and Ajax), and servers and services (ColdFusion, LiveCycle, BlazeDS, Adobe Flash Media Server, and Scene7). To learn building Flex applications, complete the tasks in the Programmer and/or Designer/Developer paths.

1. Website: Explore the Adobe Flash Platform
2. White paper: Read Adobe Flash Platform at a glance
3. Presentation video: Listen to Adobe discuss the RIA Roadmap (54:19)
4. Video: Compare Flash, Flex, Flash Player, and Adobe AIR (5:30)
5. Article: See what's in the Flex family of tools and technologies
6. Article: Understand the tools for creating a Flex RIA
7. Article: Understand MXML
8. Quick Start: Get an overview of coding with MXML and ActionScript
9. Presentation: Browse an ActionScript 3.0 primer
10. Blog post: Check the status of ECMAScript 4

Learn about the Flex framework

In this task, you will get familiar with the various classes in the Flex framework including visual controls, containers, managers, and utilities. To learn building Flex applications, complete the tasks in the Programmer and/or Designer/Developer paths.

1. Website: Explore the pre-built Flex components with the Flex Component Explorer
2. Website: Play with the Style Explorer to see how you can use styles and CSS to customize an application
3. Website: Browse the ActionScript Language Reference (ASDocs): the ActionScript API reference
4. Website: Visit the home of the Flex 3 SDK
5. Documentation: Get the coding conventions and best practices used to build the framework
6. Article: Discover three reasons to try Flex 3

Integrate with the browser

In this task, you will get familiar with how a Flex application interacts with the browser. You will review Flash Player penetration statistics, learn about the mechanism for caching the Flex framework on the client, learn how to enable traditional browser-based navigation of a Flex application using the browser forward and back buttons and bookmarking, and finally, how to let your Flex application and JavaScript code in the HTML page talk to one another.

1. Website: Look at Flash Player penetration statistics
2. Article: Save bandwidth with framework caching
3. Tutorial: Improve Flex application performance using the Flash Player framework cache
4. Cookbook: Enable browser navigation of your Flex app with deep links
5. Documentation: Learn more about deep linking and bookmarking
6. Article: Use the URLKit for advanced deep linking
7. Article: Decide when to let Ajax and Flash play together
8. Article: Understand when to use Flex and Ajax
9. Documentation: Call JavaScript functions from a Flex application or ActionScript functions from the HTML page using the ExternalInterface API
10. Documentation: Use the Flex Ajax Bridge to simplify complex JavaScript/ActionScript communication

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 RESTful 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 Flex application which accelerates application performance. You will also learn about the various technologies and products available to implement Flash Remoting on various application servers.

1. Article: Understand the options for communication between a Flex application and the server
2. Presentation video: Explore different methods for accessing server-side data
3. Article: Choose an application protocol: AMF vs. JSON vs. XML
4. Documentation: Understand the options for getting and sending data
5. Blog post: View some Ajax and Flex data-loading benchmarks
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. Blog post: Integrate Spring and BlazeDS
9. Tutorial: Install a turnkey BlazeDS installation and take a 30-minute test drive
10. Website: Learn about LiveCycle Data Services ES for integrating with a Java server
11. Website: Learn about AMFPHP for integrating with a PHP server
12. Website: Learn about FluorineFx for integrating with a .NET server
13. Website: Learn about WebORB for integrating with a Java, PHP, Ruby on Rails, or .NET server
14. Video: Make HTTP requests and use Flash Remoting with Flex (4:48)
15. Video: Use Flash Remoting and exchange data with the server as value objects (6:18)
16. Video: Call a web service (4:26)

Build collaborative applications

In this task, you will learn what tools you need and how to make collaborative Flex applications. 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 either need to (1) install BlazeDS or LiveCycle Data Services ES (for Java and ColdFusion servers) or an application with equivalent functionality for other application servers or (2) use the hosted Adobe Flash Collaboration Service. For more details, see the tasks in the Programmer track.

1. Presentation video: Use BlazeDS and LiveCycle Data Services ES for remoting, collaboration, and offline data synchronization
2. Article: Compare BlazeDS and LiveCycle Data Services ES (for Java application servers)
3. Article: Learn about messaging options for other application servers (view table at the end of this article)
4. Documentation: Learn more about using the messaging service of BlazeDS
5. Video: Learn the basics of the LiveCycle data management service
6. Presentation video: Build collaboration applications with Flex and the Flash Collaboration Service (1:00:58)
7. Website: Add real-time social capabilities using Flash Collaboration Service (code name Cocomo)

Reduce SWF size and reuse code

In this task, you will learn to decrease the size of your application using release builds, the Flash Player framework cache, modules, runtime shared libraries, and sub-applications with Flex version support using the Marshall Plan. 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. Adobe signed runtime-shared libraries can persist on the client and be cached by the Flash Player after the browser is closed for Flash Player 9 Update 3 (9,0,115,0) or later for only. If you have parts of your applications that were built with different versions of the Flex framework, use sub-applications and the Marshall plan.

1. Video: Reduce file size using release builds, modules, and the Flash Player framework cache (4:58)
2. Video: Split an application into modules that are loaded at runtime (8:45)
3. Video: Use runtime shared libraries to share code between applications (7:15)
4. Presentation video: Create large applications using modules, RSLs, and sub applications (56:28)
5. Presentation video: Use sub applications and the Marshall plan for version support (1:09:02)

Learn about the Flash Player

In this task, you will learn about the Flash Player security model, best practices for creating secure SWFs, garbage collection, rendering, and more about the internal workings of the Flash Player.

1. Presentation video: Listen to Adobe Flash Player engineers explain the Flash Player internals (1:00:07)
2. Presentation video: Learn about the Flash Player security model
3. White paper: Read about the Flash Player security model
4. Article: Create secure SWF web applications
5. Article: Keep current with Flash Player security updates

Make Flex applications accessible

In this task, you will learn about how to create accessible Flex 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 best practices for creating accessible Flex applications
3. Exercise: Use Flex applications with JAWS

Create multilingual Flex applications

In this task, you will learn about the capabilities of Flex to create 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 create resource modules from the properties files and then load them at runtime, allowing you to change locale on the fly.

1. Video: Create multilingual Flex applications
2. Documentation: Create multilingual Flex applications
3. Flex cookbook: Compile resource bundles using Ant

Find and use non Flex framework components

In this task, you will browse for components that are not part of the Flex framework but that can easily be incorporated into Flex applications. Some of these components are created by Adobe, some are created by other companies and developers. Some components are free and others cost money. If you don't find what you are looking for, you can always have your developers create their own components.

1. Website: Go to flex.org
2. Website: Go to the Flex component exchange
3. Website: Look at the advanced data visualization components in the Flex Component Explorer
4. Website: Check out the iElixir advanced data visualization components
5. Website: Check out the open source ASTRA Flex components on the Yahoo! Developer Network

Create mashups

In this task, you will learn how to create mashups with various 3rd-party services.

1. Article: Pull data from Amazon web services
2. Exercise: Explore 3rd-party mapping examples in the Tour de Flex Adobe AIR application
3. Blog post: Use the Google Maps API for Flash and the Google Street View API
4. Tutorial: Create driving directions using the Google Maps API for Flash
5. Website: Check out the Google Maps Flash API

Search SWFs

In this task, you will learn what content in your SWF files is searchable by search engines and see what the plans are for the future.

1. White paper: Read the Adobe SWF searchability FAQ
2. Article: Read what Google has to say about searching SWF files
3. Presentation video: Listen to the Flash Player team explain the Flash Search Player for Google

Track traffic in SWFs

In this task, you will learn how to track traffic in your Flex applications using Google Analytics or Omniture.

1. Article: Learn about using Google Analytics for Adobe Flash
2. Blog post: Use gaforflash, an open source, native AS3 API that enables you to utilize Google Analytics tracking from within your RIA.
3. Website: Go to the gaforflash project home on Google code
4. Presentation video: Hear Stephen Hammond of Omniture talk about RIA tracking (46:23)
5. Blog post: Use Omniture in your Flex applications
6. Blog post: Use Omniture in your Flex applications - another post

Use your existing C/C++ libraries

In this task, you will learn about Alchemy, an Adobe research project that will enable web application developers to reuse hundreds of millions of lines of existing open source C and C++ client or server-side code on the Flash Platform. The C/C++ code is compiled to ActionScript 3.0 as a SWF or SWC that runs on Adobe Flash Player 10 or Adobe AIR 1.5 with minimal degradation.

1. Presentation video: Turn your C++ code into ActionScript SWCs using Alchemy (52:26)
2. Website: Check out Alchemy on Adobe Labs

See what's up with Flex and mobile

In this task, you will learn about the status of Flash and Flex applications on mobile devices.

1. Blog post: Read a summary of Adobe's February 2009 mobile announcements

Compare Flex to other RIA technologies

In this task, you will hear the community compare Flex to other technologies that can be used to build engaging rich Internet applications including Ajax, Silverlight, and JavaFX.

1. Video: Listen to a customer talk about choosing an RIA technology
2. Article: Compare the same application in Flex, Silverlight, and JavaFX
3. Blog post: Compare Flex and Silverlight
4. Article: Run fun Flex and Silverlight comparisons
5. Article: Decide when to use Flex and Ajax
6. Article: Choose between Ajax and Flex
7. Website: Look at Flash Player penetration statistics
8. Article: Read about three reasons to use Flex
9. Article: Read up on RIA open source

See what's in store for Flex 4

In this task, you will take a look at what's in store for Flex 4, code-named Gumbo, currently scheduled to be released in the second half of 2009. Gumbo has three primary themes: design in mind, developer productivity, and framework evolution. For design in mind, expect to see a new component and skinning architecture that invites easier skinnability of components by various tools; FXG, a new way to describe vector graphics in MXML allowing transfer of info more easily between tools, including a new design-based tool for Flex code-named Thermo; and improvements to the existing experience-oriented features such as states and effects. For developer productivity, look for better compiler performance, CSS improvements, and two-way data binding. For framework evolution, there are new text features, including bidirectional and vertical text and layouts for international applications as well as a new skinnable video component.

1. Presentation video: Listen to the Flex SDK product manager talk about the product plan for Flex 4 (14:00)
2. Presentation video: Learn about the new components features in Flex 4
3. Presentation video: Learn about the new features in Flex Builder 4
4. Video: Learn about improved the designer and developer workflow in Flex 4 (7:17)
5. Presentation video: Build interactive designs with Flash Catalyst
6. Website: Visit the home of Flex 4 and browse the new themes and feature specifications
7. Article: Learn about the new Flex 4 component architecture

Learn about the development process

Learn about the tools

In this task, you will get familiar with the tools you can use to build Flex applications. Although you can develop your application in any IDE and debug and compile it with command line tools, most choose to use Flex Builder which is based on the popular open-source Java development environment Eclipse. If you already have Eclipse, you can install Flex Builder as a plug-in. If you don't already have Eclipse, you can install Flex Builder as a standalone application in which case both Eclipse and the Flex Builder plug-in are installed.

1. Article: Understand the tools for creating a rich Internet application
2. Article: Get an overview of the Flex development process from the perspective of a Java developer
3. Article: Check out Flex Builder 3 features
4. Website: Compare the features of Flex Builder 3, Flex Builder 3 Professional, and the Flex SDK
5. Presentation video: Extend Flex Builder (54:33)
6. Presentation video: Tips and tricks for working with Flex Builder (41:29)
7. Presentation video: Use the debugger and profiler (53:49)
8. Article: Learn about the debugger
9. Article: Check out additional debugging tools and frameworks
10. Documentation: Learn about the profiler
11. Presentation: Learn more about the profiler
12. Article: Use the open source Clear Toolkit framework for developing enterprise applications with Flex and Java
13. Article: Check out the tools used by some enterprise developers

Work in teams

In this task, you will learn how to get teams of developers to work successfully together on Flex projects.

1. Article: Learn best practices for setting up your projects
2. Article: Learn best practices for writing code
3. Presentation video: Learn best practices for developing in a team (56:14)
4. Article: Integrate Flex Builder with CVS
5. Article: Integrate Flex Builder with Subversion
6. Article: Integrate Flex Builder with Perforce

Submit Flex bugs

In this task, you will explore the Flex bug and issue management system which is now available for use by the community to submit, search, and track bugs.

1. Website: Explore the Flex bug and issue management system

Get familiar with 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. Once your application is larger than a single class, you need to exchange data between components by broadcasting and listening for custom events for whose associated event object you can define custom properties. 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 Learn about the Cairngorm framework and/or Check out other Flex microarchitectures in this Architect 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: Learn the event based way to build loosely coupled components (written for Flex 2 but still applies)
6. Documentation: Create components that broadcast custom events (specifically look at broadcasting custom event objects)
7. Article with sample code: Apply architecture best practices: Graduate from hack to architected development
8. Video: Listen to a discussion about Flex architectural patterns (72:41)
9. Article: Use dependency injection
10. Article: Check out an architectural blueprint used in creating Flex applications (MVCS)
11. Website: Find more about MVCS (a collection of design patterns not an architecture framework)

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 Learn about the Cairngorm framework and Check out other Flex microarchitectures tasks.

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)

Learn about 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 Flex 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 Check out other Flex microarchitectures task in this Architect path.

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 Flex 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 Learn about 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 FramwQuest 2008 Part 5)
9. Website: Model-Glue
10. Website: GEMVC: Good Enough MVC
11. Website: Ruboss, a framework for Flex and Ruby on Rails

Learn to build custom components

In this task, you will learn how to build custom Flex components. Components can be built either with Flex or Flash (Flash CS3 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 live cycle, including what methods are called when in the creation and update processes that occur in an application.

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 lifecycle (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 SWC files (10:46)
12. Quick Start: Package and distribute components as SWC files
13. Presentation video: Get Flex Builder to enable visual manipulation of components in SWCs (54:33)
14. Video: Create custom Flex components with Flash (7:10)

Unit test an application

In this task, you will learn to create unit tests for a Flex application using FlexUnit, an open-source unit testing framework for Flex and ActionScript 3.0 applications. FlexUnit provides a low-level automated testing system to help you catch bugs during application development as you add features and refactor code. FlexUnit mimics the functionality of JUnit, a Java unit testing framework, and comes with a graphical test runner. Unit testing can be automated and included as part of the build process using Ant tasks. To learn more about using Ant tasks, see the subsequent Deploy the application task in this Architect path.

1. Presentation video: Test your Flex applications
2. Article: Learn about unit and functional testing
3. Tutorial: Unit test an application with FlexUnit
4. Website: Go to the home of FlexUnit
5. Documentation: Check out the FlexUnit developer documentation
6. Article: Unit test Flex in an Enterprise RIA
7. Article: Unit test with mock objects

Deploy an application

In this task, you will learn to deploy a Flex 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 Flex applications. Flex Ant tasks includes two compiler tasks, mxmlc and compc, that extend the Java Ant task. You use these tasks to compile Flex applications, modules, and component libraries. It also includes an html-wrapper task that lets you generate custom HTML wrappers and the supporting files for those wrappers.

1. Documentation: Create a release build of your application in Flex Builder
2. Documentation: Review a deployment checklist
3. Book chapter: Embed the application in a web page
4. Article: Use SWFObject to embed a SWF in a web page
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
8. Article: Insert a Flex application into a PDF file

Work with designers

In this task, you will learn how designers and developers work together to build a Flex application and how to facilitate the workflow between them. For more details on how the various designer and developer tools work together, see the Integrate with Creative Suite task in the Designer/Developer path.

1. Presentation video: Understand designer and developer roles, skill sets, and interaction (40:00)
2. Presentation video: Optimize designer/developer workflow (53:10)
3. Presentation video: Examining Flex project workflows - a case study (1:00:39)
4. Article: Understand the designer and developer workflow
5. Video: Get a sneak peak at the new designer tool Flash Catalyst (code name Thermo) (4:33)