Flash Article

Exploring a unified component workflow between Flex and Flash

Examining the Flash components

A lot of people know at least something about Flash components—they're the things that help make developing certain features and interactions much simpler. Need a drop-down list? Add a ComboBox component. Need to play some video? Add an FLVPlayback component. Need to display closed captioning with that video? Add an FLVPlaybackCaptioning component. All of the components that come with Flash CS3, and any custom ones you install, are visible in the Components panel (Window > Components), as shown in Figure 2.

Figure 2. Components panel

The landscape of Flash components is much richer than many people appreciate—and continues to mature at a rapid pace. It's not your grand-daddy's SmartClip, that's for sure. This article focuses specifically on two aspects of Flash components: the editable components and the Flash-authored Flex components.

Before I continue, it's worth highlighting that there is much more to components than what I cover here:

• You can generate components from Flash as MXP files that can be installed through the Adobe Extensions Manager
• You can create specialized Flex components in Flash that are designed to skin native Flex components, like buttons
• You can add a Live Preview to your Flash component so it can render on the Stage in the authoring tool as it does in Adobe Flash Player
• You can skin the Flash components much more powerfully than simply editing them through the FLA

And I haven't even mentioned styling. In short, there's much, much more that you can do with components.

The two specific features of Flash components that this article discusses are both new additions to Flash CS3. In my opinion, they both add key value to overall Flash platform development. The first feature, editable v3 components, finally make it possible to have a clean workflow between developers and designers by enabling the distribution of editable visual assets along with compiled code. The second feature is the Flex Component Kit for Flash CS3 Professional, which makes it much easier to generate components in Flash—the tool that has much more visual power and a wider suite of tools for designers to build experiences—that will work cleanly in the Flex framework and your Flex Builder projects.

Flash CS3 v3 components

With Flash CS3 Professional and ActionScript 3.0, Adobe completely overhauled the preinstalled components. This means that the new v3 components are smaller, more efficient, and more powerful—and there are more of them.

But wait, there's more! One of the most challenging tasks associated with using components has always been customizing the visual assets—for example, having a designer skin them with custom graphics. It's always been possible, but it's also been difficult. With most of the v3 components, all you have to do is double-click the component instance to see a nicely organized layout of all graphical elements used by the component (see Figure 3). Just change what you want to change. I call these "FLA-editable components" in this article.

Figure 3. Visual assets for the UIScrollBar component

As with earlier versions of Flash, it is possible to create your own components. However, in Flash CS3, you can also make your components FLA-editable, just like the ones that come preinstalled. This is a tremendous improvement over the workflow that was possible with previous versions of Flash components. You can code up anything you want, turn it into a component with the compiled code for easy distribution, and still have all the assets completely editable. It's amazing.

Flash components for Flex

In the time between the release of Flash 8 and Flash CS3, Flex 2 was released. Flex 2, which is also based on ActionScript 3.0, is a framework that makes it much easier to build Flash applications. Like Flash, Flex exports SWF files that play in Flash Player. Unlike Flash, Flex facilitates the application development workflow primarily through the use of components. In essence, everything in Flex is a component.

Unfortunately, a Flex component is not the same as a Flash component. The Flex framework uses a series of classes that are effectively incompatible with Flash SWF files. What if you wanted to build certain assets more complex than a single skin for a Flex application in Flash?

The Flex Component Kit for Flash CS3 Professional comes to the rescue. This kit includes an extension for Flash CS3 that enables you to build components for Flex. In essence, you can convert any piece of code that runs in Flash into a component that is usable by Flex.

Page 2 of 7

Previous Page

Next Page