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:

1. Create a new ActionScript 3.0 FLA in Flash Pro.

   

2. Add the components you want to use to the library. You can drag them on stage or directly into the library.

3. Right-click on any one of the components in the library. It doesn’t matter which one you choose.

   

4. 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 fl_components.swc.

5. Right click on your ActionScript project in Flash Builder and choose Properties.

6. 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.

UPDATE: It appears that if you set ExternalInterface.marshallExceptions to true, the errors will be re-enabled.

Here’s a third ExternalInterface bug I discovered while developing the YUI Charts. When you call an ActionScript function from JavaScript, and an error is thrown by Flash Player, the standard error popup in the debug version of Flash Player will not display. This bug only appears in Flash Player 9 Update 3 (version 9.0.115), and it does not affect earlier versions.

This problem affected me on multiple occasions while I was using the beta version of Update 3 from Labs (though I only discovered it after the release) and again just a couple of days ago. I have trouble reproducing or tracking down certain bugs that others report because errors during calls from JavaScript simply fail silently on my machine like if I had the release player.

Let’s look at a simple example application below. When the constructor runs, it exposes the displayError() function to JavaScript. This function does nothing more than throw an error. The constructor then calls a flashReady() function through ExternalInterface to notify the HTML page that the SWF is finished loading.

package
{
	import flash.display.Sprite;
	import flash.external.ExternalInterface;

	public class ExternalInterfaceActionScriptError extends Sprite
	{
		public function ExternalInterfaceActionScriptError()
		{
			ExternalInterface.addCallback("displayError", displayError);
			ExternalInterface.call("flashReady");
		}

		public function displayError():void
		{
			throw new Error("This error will not display in 9.0.115!");
		}
	}
}

The flashReady() function in JavaScript appears below. The ${application} is simply the replacement token used by Flex Builder HTML templates for the object/embed id in the page.

<script type="text/javascript">
	function flashReady()
	{
		${application}.displayError();
	}
</script>

If you have Flash Player 9.0.47 debug installed, an error will be displayed. If you have 9.0.115 installed, you will see nothing. Once again, I intend to submit the bug to Adobe so that it may be fixed in an upcoming release of Flash Player. If you’ve found any Flash Player bugs, and you can reproduce them, always be sure to let Adobe know. It may not help immediately, but you’ll be thankful when they’re fixed in the future.

Let me tell you about another Flash Player ExternalInterface bug I encountered recently while working on the YUI Charts. When passing an Object from ActionScript to JavaScript, make sure your variable names don’t require quotes. Let me explain with a quick example.

This is legal ActionScript, but the variable name requires quotes because it has a hyphen:

var test:Object = { "legal-name" : "hello!" }; //just fine!

This code will throw a compiler error:

var test:Object = { legal-name: "hello!" }; //error!

Now, let’s look at a quick little class I built.

package
{
	import flash.display.Sprite;
	import flash.external.ExternalInterface;

	public class ExternalInterfaceVariableNames extends Sprite
	{
		public function ExternalInterfaceVariableNames()
		{
			var test:Object = { "legal-name": "hello!" };
			ExternalInterface.call("fromFlash", test);
		}
	}
}

The HTML document in which we’ll embed this SWF will have the following simple JavaScript function:

<script type="text/javascript">
	function fromFlash(value)
	{
		console.log(value);
	}
</script>

Note: The function console.log() is used to display text in the Firebug console a lot like trace() is used in ActionScript to debug in Flash authoring or Flex Builder.

When I try to run my simple SWF, the following error is displayed in the Firebug console:

missing : after property id
[Break on this error] try { __flash__toXML(fromFlash(({legal-name:"hello!"}))) ; } catch (e) { "
What exactly is that showing us? Basically, for ExternalInterface to work, Flash Player places some code into the document. The important part of the code in the error is this:
{legal-name:"hello!"}
Look familiar? Just like ActionScript, JavaScript requires variable names with hyphens to be quoted. Bug confirmed. Of course, I'm submitting this bug to Adobe so that it can be fixed in a future version. Make sure you always report bugs you find in Flash Player, and try to include test cases whenever possible!