Even though Flex Builder includes its own set of components, there are two cases where you might want to use Flash CS3's V3 components in a Flex Builder project:
* when using Flex Builder to create the code for a .fla file
* when producing an ActionScript-only application that you want to be able to compile in both Flash CS3 and Flex Builder
This article explains how to use Flash CS3's V3 components in Flex Builder. The process isn't pretty, but it works. Note that before you get started you'll need to install the Flex Builder 2.0.1 Updater and the Flex 2.0.1 patch for Flash CS3 Professional compatibility. Or simply use Flex Builder 3 (now in beta), which doesn't require any special patches for V3 component compatibility.
As a simple example, let's assume we want to use the V3 TextArea component in Flex Builder. Here's the general process we follow:
1) Create a .swc file containing the desired V3 components.
2) Add the .swc file from Step 1 to the Flex Builder project's Library path.
3) Import and use the component classes.
To generate the .swc file in Flash CS3, we follow these steps:
1) Make a new Flash CS3 ActionScript 3.0 .fla file.
2) Drag the desired component(s) to the Library. In this example, we'll drag the TextArea component to the Library.
3) Choose File > Export > Export Movie.
4) For File name, enter v3components.swf. (We don't even want the generated .swf, but there's no other way to get the .swc to compile.)
5) Select a folder in which to save the .swf file.
6) Click Save.
7) In the Export Flash Player dialog, check Export SWC.
8) Click OK.
The preceding steps generate two files, v3components.swf and v3components.swc, both of which are placed in the folder selected in Step 5.
Now let's use v3components.swc in a Flex Builder project. Follow these steps:
1) In Flex Builder, select File > New > ActionScript Project.
2) For Project name, enter "V3Test.as".
3) Click Next.
4) For Main source folder, enter "src".
5) For Main application file, enter "V3Test.as".
6) On the Library path tab, click Add SWC.
7) Browse to the v3components.swc file from the preceding procedure.
8) Click Finish.
9) Update the code in V3Test.as so it looks like this:
package {
import flash.display.Sprite;
import fl.controls.TextArea;
public class V3Test extends Sprite {
public function V3Test() {
var t:TextArea = new TextArea();
t.text = "You're not cookin'";
addChild(t);
}
}
}
10) Run the project.
So that wasn't too hard. But there's no going the other way--that is, you can't use Flex framework components in Flash CS3. Ahh...wouldn't it be great if Flash and Flex Builder shared the same set of interchangeable components? One can only dream...
--
A final note: linking directly to the component .swcs or component source included with Flash CS3 doesn't work. You get errors such as the one shown below. Hopefully including the error on this page will help people google their way here...
TypeError: Error #2007: Parameter child must be non-null.
at flash.display::DisplayObjectContainer/addChildAt()
at fl.controls::BaseButton/fl.controls:BaseButton::drawBackground()[C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\controls;BaseButton.as:538]
at fl.controls::LabelButton/fl.controls:LabelButton::draw()[C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\controls;LabelButton.as:600]
at fl.controls::Button/fl.controls:Button::draw()[C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\controls;Button.as:167]
at fl.core::UIComponent/fl.core:UIComponent::callLaterDispatcher()[C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\core;UIComponent.as:1379]
at [renderEvent]