What's new in Flex 4

Additional Requirements

Flex 4 SDK

• Download
• Learn more

Note: Flex SDK 4.1 has been released which provides support for the Flash Player 10.1 and Adobe AIR 2 runtimes, critical bugfixes as well as the new Layout Mirroring feature.

As a product manager for Flex I've talked with many people about the upcoming release of Flex 4, including customers and our own development team, and the level of excitement around this version is higher than any I've seen in the past. We are providing releases of the two tools geared towards Flex: Adobe Flash Catalyst (currently in beta) and Adobe Flash Builder 4; but the foundation for it all is the Flex 4 SDK. This article provides an overview of what you'll encounter as you play with the new SDK and framework.

You may also be interested in reading What's new in Flash Builder 4 by Andrew Shorten, and Differences between Flex 3 SDK and Flex 4 SDK by Joan Lafferty.

The work on the Flex SDK has been focused around three primary themes:

• Design in Mind: providing a framework that supports a new degree of expressiveness, easily enabled with tools.
• Developer Productivity: improving compiler performance and adding productivity enhancements to language features like data binding.
• Framework Evolution: taking advantage of new Flash Player capabilities and adding features required by common use-cases.

Spark and FXG

The biggest feature of the Design in Mind theme is our new skinning and component architecture, named Spark. Building on top of the existing MX architecture, Spark provides a much more expressive mechanism for developers and designers to work together on the appearance of their Flex applications. Spark currently includes approximately 30 new components and primitives, forming the foundation of Adobe's next-generation components and primed for easy integration with Adobe Flash Catalyst. This release includes almost every component planned for the new architecture. Spark will not have versions of every component that exists in MX. Since Spark is built on top of the same foundation as MX components, all existing MX components can easily interoperate with the new architecture. For more information related to the architecture, please check out Deepa's article A brief overview of the Spark architecture and component set.

Another piece that folks will find interesting is support for FXG, the new interchange format for the Flash Platform. In addition to support for using FXG directly within your Flex application, the Flex framework includes graphic primitives that align with the tags in FXG. These graphic primitives can be used directly within your Flex app and support all of the runtime editability associated with the more traditional Flex components. To support high-performance graphics Adobe has also enabled the compiler to optimize static FXG directly into SWF tags understood natively by the Flash Player. This gives you the flexibility to have your graphics tags editable by the editor of your choice, while enabling top performance where it's important. Learn more about FXG.

The Spark architecture also includes an updated, more flexible layout model. The new, runtime-assignable layouts include full support for 2D rotations and scales as well as the ability to apply the new 3D capabilities of Flash Player 10 to any component after layout. This new layout mechanism enables virtualization to be supported not just in List classes, but in a regular container model as well (so long temperamental Repeater!). It also provides smooth scrolling support on any container or list. Learn more about Spark containers and layouts.

Finally, Spark introduces a new and improved animation engine, which serves as the foundation for improved effects and transitions. Flex 4 supports the auto-reversing of transitions, Pixel Bender filters applied as effects, transformations in all three planes, and complex keyframe-based animations. See examples of the effects in action in the sample apps, and learn more about Spark effects in the documentation and Chet Haase's articles (Part 1 and Part 2).

Working with states

One area of Flex that we know needed improvement is states. We believe that the concept of states is easy to understand, but the implementation in Flex 3 was not as straightforward as it could have been. Therefore Adobe has introduced some new MXML language improvements in Flex 4 that can make it much easier to work with states.

To support the new model we've upgraded the MXML language to MXML 2009, and at the same time we've made some minor improvements to MXML to support better tools while maintaining our commitment to support editing with a simple text editor. Learn more about MXML 2009 and the new states syntax.

Developer productivity

In the Developer Productivity theme our primary focus has been compiler performance. We've implemented a number of optimizations for common use-cases, and have seen some real improvements. We've also made a number of improvements to the ASDoc tool including support for ASDoc in MXML documents, a common feature request. Binding has been upgraded to now support two-way communication; simply throw an @ in the front of your binding expression and updates to the binding destination will now be copied back into the source. And one very exciting feature that was a top request is our support for more CSS selectors, which includes descendant and id-based selectors. Make sure to check out the documentation to learn more about these improvements.

Finally we know that we need to continue to evolve the Flex framework, even beyond the Spark architecture. In doing so, for Flex 4, we have improved the use of video in Flex applications. Spark includes VideoDisplay, a chromeless Video component, and VideoPlayer, a skinnable wrapper for VideoElement. Both classes are built on top of Open Source Media Framework's video class. Developers can now easily drop video into their applications and customize the look and feel. Learn more about OSMF.

A powerful feature in Flash Player 10 is the new text engine, and the associated Text Layout Framework. We are incorporating the text engine and Text Layout Framework directly into the Flex framework, creating new text controls for Spark and providing basic exposure to the MX controls as well. The new text controls support bidirectional text, and while it is not in this release, we will quickly be adding mirroring support to Flex to enable Flex applications in all locales in an upcoming dot release. You will also see that we've migrated our HTML templates from being based on the old Adobe Flash Player Detection Kit to the open source SWFObject project, another popular request.

Where to go from here

And there you have it. The next generation of Flex development is now ready for your perusal. Go ahead and download Flash Builder, Flash Catalyst beta, or even just the Flex SDK on its own. We've been astounded with the incredible applications built with Flex up to now, and we hope that with our new framework and tools you can impress us even more!