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
fl_components.swc. -
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.
Hey, thanks, I was just looking for this stuff.
Great instructions, you saved my days. Here is some related information.
http://de-co-de.blogspot.com/2008/03/wheres-my-skin.html
so one thing i missed here and had to re-read is that the custom skins for the button wont work after doing this alone you must provide embed statements for each element within the component. If that being the case, anyone know how to extract the stored skins from the swc to use the default styles?
okay i worked it out if you need to set the default skins and just reference the assets:
var bt:Button = new Button(); bt.label = "This is a button"; bt.setStyle("upSkin", Button_upSkin); bt.setStyle("downSkin", Button_downSkin); bt.setStyle("overSkin", Button_overSkin); bt.setStyle("disabledSkin", Button_disabledSkin); bt.setStyle("selectedUpSkin", Button_selectedUpSkin); bt.setStyle("selectedDownSkin", Button_selectedDownSkin); bt.setStyle("selectedOverSkin", Button_selectedOverSkin); bt.setStyle("selectedDisabledSkin", Button_selectedUpSkin); addChild(bt);Rudi, the default skins should work without needing to reference them in any way. You don’t need to embed them, and you don’t need to set the styles manually. I’m not sure why it wasn’t working for you.
I had the same problems as Rudi. After following all the steps in this post I still got the Error #2007. Then I read Rudi’s comment and tried to set the styles to their default values (just as in Rudi’s comment). Now everything works fine. There is no need to embed the styles though. After adding the SWC to the library path they are already there (at least in FlexBuilder 3 they are).
Thanks for this post, Josh. Thanks for the comment, Rudi. It really helped me!
thanks, I have one question, I am using Flex Component Kit for Flash CS 3 where I can create Flex Container and Flex Component. I am using them in Flex Project but trying to use them using ActionScript. When I addChild(mycustomcomponent). It works perfect. But I am not able to add my custom container, say addChild(myContainer). Here myContainer is a flex container made in Flash CS3. It gives me this error “An object can not be added to itself”. Please let me know how I can add a Flex Container using Actionscript (I am able to add this using mxml).
Hi Josh,
Thanks for the tips – I created my swc of the AlertManager astra component, as I’m converting a flash project to AIR and wanted to use the Flex coding environment and debugger.
As others have mentioned, I had the intial addChild() errors with the skin elements. I managed to work around that by explicitly creating a new instantiation of each linked skin element from the library – literally doing new Background_skin() etc.
Unfortunately I now get a looping error around the stage resize event, – it basically spits out the following a whole bunch of times:
undefined
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.managers::SystemManager/Stage_resizeHandler() [E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:2581]
I chased the starting point of the bug down to be the last line of the drawLayout function in TitleBar:
dispatchEvent(new ComponentEvent(ComponentEvent.RESIZE, true));
I’ve hunted high and low, with no joy. I’m wondering whether you’ve managed to successfully use the AlertManager within a flex project yourselves?
More details are here but you’ve got the jist there.
Weird that some of us can compile CS3 components in flex without explicitly calling the skins, and others can’t. There must be a difference, obviously, but I’m stumped as to what it might be!
Thanks. Everything went well, up until actually trying to use the exported component. I exported fl.controls.UIScrollBar, but even though I’ve added the SWC to my path, the compiler still can’t find the UIScrollBar component.
More specifically, the error is “Error: unable to load SWC UIScrollBar.swc: no value was found for required element uri.”
Chris, are you using Flex Builder 2? If so, there’s an update you need to install to add support for SWCs exported from Flash CS3.
Quick update. Found out the error was caused by a bug in the Flex2 SDK. So I upgraded to the Flex3 SDK, but then started getting the error “Error: null” (I know, real helpful). Turns out that was caused by a different bug in the Flex3 SDK, which apparently can’t handle an empty switch statement. I love Adobe and their quality software!
Pingback: Flex Design Mode (.swc) error at AnthonyTanaka.com
In response to Anthony Tanaka’s blog post (his blog requires registration, and I refuse to register for anyone’s blog comments), Flex does have a standalone scrollbar component. Check out VScrollBar and HScrollBar. There are even examples in the documentation.
Wow!!! I am a loser and a half aren’t I? missing those scrollbars.
Ha! Thanks Josh!
Sorry about the registration thing, gotta switch that.
Wow How did I miss that????
Oh well, good learning about the .swc to Flex anyways, however, I did see other posts about design mode errors when importing the swc that hasn’t been resolved.
Pingback: Free Adobe - Macromedia Flash Web Site Design Tips, Flash Tutorials » Flash CS3 Components in Flex Builder AS3 Project
I am also facing the same problem as Stray is facing.
undefined
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.managers::SystemManager/Stage_resizeHandler() [E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:2581]
Does any body have solution for this ?
For Stray and Chetan, my instructions cover using the Flash CS3 UIComponents in an ActionScript project. It looks like you guys are putting them into a Flex project (since your error references mx.managers.SystemManager), which is a completely different beast, and I simply don’t recommend doing that. There are certain incompatibilities between the component frameworks such as with the focus manager and the stage. I’m afraid you’re on your own.
Pingback: Just add water » Blog Archive » Flash - open source code
Has anyone gotten this to work on Flex Builder 3?
I created an Actionscript Project.
I created a bt.swc which contained a Flash CS3 Button Component.
I created a bt.swf for the default skins.
I included the source path to “[Flash CS3]/en/Configuration/Component Source/ActionScript 3.0/User Interface”.
I include the SWC in the library path as given in the instructions.
I tried different variations and none seem to work. The only result I get sometimes is just the text I set for the label of the button I create. No skins.
I tried embedding the skins from the bt.swf and setting styles with
the setStyle method. I also tried exporting the skin movie clips in the first frame and recreating the SWC but that also did not work.
Does this only work in Flex 2? What changed in Flex 3 that rendered this null and void?
I wish I knew what was going wrong for you guys. I think I’ve only tried it in Flex Builder 3, so that’s definitely not an issue.
Well, here is an update:
The original machine I was on is a Microsoft Windows XP [Version 5.1.2600].
On it I have installed (Adobe):
Flex SDK 2 & 3
Flex Builder 3
Flash CS3
Flash 8
And it did not work. So as a hunch, I tried a Windows Vista
machine. Installed Flex Builder 3, copied the project over and Bam!
The same broken project in Windows XP works in Windows Vista.
Now the Vista machine only has Flash 8 installed. But I am thinking
that it might have to do with the open source Flex SDK. I have no time to test it now. I am essentially developing one project on two different machines right now.
I hope this helps someone. I was tearing my hair out for two Days! Two Days!
Thanks Josh for the post.
OMG!
Dang nab it!
It was the source path!
DO NOT PUT
[Flash CS3]/en/Configuration/Component Source/ActionScript 3.0/User Interface
INTO YOUR FLEX BUILDER 3 SOURCE PATH.
Take out the source path and it works fine. No need to embed the default skins or set styles.
Josh you have to update this post to have a warning or something.
tnx , really really tnx , i was trying it for all the morning , u save me a lot of of time tnx
Thanks, Robert. That makes a lot of sense, and it is probably the cause of the problems people have been reporting. I’ve clarified the section where I talk about the source path to specify that it should not be added, and I’ve written an extra paragraph at the bottom explaining why.
Man, great thanks for this code. You saved my time, hope that I will be able to save your time too someday 🙂
Thanks again!
Thanks, Josh! I’ve been looking for an answer to this question for months now, and your solution works perfectly. Thank you!
nice, now I can tweak the default button so I can have a lot of buttons that are an extention of the default button, but look different, nice 🙂
Thanks! It took me a while to figure out what was wrong, the warning could not be bigger, that was very helpful.
DO NOT PUT
[Flash CS3]/en/Configuration/Component Source/ActionScript 3.0/User Interface
INTO YOUR FLEX BUILDER 3 SOURCE PATH.
Just discovered the Yahoo Astra components, just what I needed. Thanks for the tip on removing the actual source classes from my classpath when compiling with mxmlc…!
Thanks for the tip
i was verry helpful
Exporting compo’s as a swc and importing in a flashdevelop project… headaches (always with flash compo’s).
The Error #2007: Parameter child must be non-null with a button was no fun. I had no other references to other button classes. I inspected the exported / decompiled swc and the basebutton class that caused the error; It seems that the background skins skins of the button are not exported. I used combo and datagrid and checkbox, no probs there.
My workaround for getting the button compo to work in a flashdevelop AS3 project:
In your FLASH library add a button component (or use the one you had).
Rightclick the button compo item and and select ‘export as swc’.
Now delete all button component references from your FLASH assets lib and publish it again if it has stuff you need next to button compo.
In your (flashdevelop) AS3 project add the exported button.swc and select the include option ‘include library completly’.
Do the same for your previous assets.swc.
GO!
Latcho
PS: The problem is not your fault, since other compo’s do export good.
Great Post! I was struggling a lot as I has a AS3 only project and I needed some flash components. After going through a lot of misleading posts else where on the net, I finally stumbled upon your post.
It finally works!
Thanks,
You rock. Thanks for this.
Perfect! Just what I was looking for!
Thanks you so much!