Flex is great, but I don’t use it for every project. Sometimes, I want to build a very light application that needs UI controls, and Flex is too big, even when using the Flex framework RSL caching. Flash Professional (particularly CS3 and newer) comes with a pretty decent set of components, and add-ons like the Yahoo! Astra Components for Flash add several more to the arsenal. What if I want to use those components, but I need a better development environment than Flash Pro? I love Flash Builder. Can I use them there? Yes, absolutely.
The most obvious way one might expect to get the fl.* components working in Flash Builder is to simply add the source folder for the components to the source path of a project in Flash Builder. Don’t do this, though! It won’t work. For reference, that folder is located at the following location:
[Flash Pro]/en/Configuration/Component Source/ActionScript 3.0/User Interface
Unfortunately, simply adding that folder doesn’t work because the fl.* components have graphic skin assets that are normally located in your FLA file’s library. If those aren’t available, and you try to use only the source code in Flash Builder, you’ll end up getting errors like this one:
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 CS#\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 CS#\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 CS#\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 CS#\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\core;UIComponent.as:1379] at [renderEvent]
If you want to use the default skin assets, you must ensure that they get included with your project. Last year, Colin Moock described a method for creating a fl.* components SWC. It’s good, but I know how to do it without quite as many steps:
Create a new ActionScript 3.0 FLA in Flash Pro.
Add the components you want to use to the library. You can drag them on stage or directly into the library.
Right-click on any one of the components in the library. It doesn’t matter which one you choose.
Select Export SWC File… from the context menu and save the SWC file somewhere with your filename of choice. I typically name it something like
Right click on your ActionScript project in Flash Builder and choose Properties.
Under ActionScript Build Path, choose Library path and click the Add SWC… button to find your SWC and add it to the project.
Once the SWC is added to the library path, there’s nothing special you need to do to start using the components. Flash Builder automatically finds all the classes and you can create new instances of anything (including the raw skin symbols, if you’re interested). For completeness, here’s how you create a Button in ActionScript:
var button:Button = new Button(); button.label = "Click Me!"; this.addChild(button);
Don’t want to use the default skins? Technically, they are not required. You can work with the straight source code for the fl.* components if you’re planning to use custom skins. These could be programmatic skins (similar to how Flex’s skins work) or you could embed your skins using
[Embed] metadata to include external images or SWF symbols.
The fl.* components have many styles available for you to customize. Here’s a selection of the styles you might want to customize for a Button component:
button.setStyle("upSkin", CustomButtonUpSkin); button.setStyle("downSkin", CustomButtonDownSkin); button.setStyle("overSkin", CustomButtonOverSkin); button.setStyle("disabledSkin", CustomButtonDisabledSkin); button.setStyle("selectedUpSkin", CustomButtonSelectedUpSkin); button.setStyle("selectedDownSkin", CustomButtonSelectedDownSkin); button.setStyle("selectedOverSkin", CustomButtonSelectedOverSkin); button.setStyle("selectedDisabledSkin", CustomButtonSelectedDisabledSkin);
Be sure to check the ActionScript Language Reference for full details about the available styles on each component you intend to skin.
Note: Some readers have reported that they continue to see skin-related errors when they use a SWC file exported from Flash Pro. The most likely cause is that their source path still contains the folder where the component source is located (see my warning above). Raw source code will always override a SWC when you have duplicate classes, so you’re still compiling without the skins when you have both the source for the components and the SWC in your project.