How to use the Flash CS3 component set in a Flex Builder ActionScript project
Flex is great, but I don't use it for every project. Sometimes I want to build a very light application that needs components, and the Flex framework is too big. Things may change in time as support for RSLs in Flex 3 becomes wide enough, but that's still in the future. Flash CS3 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 CS3? I love Flex Builder. Can I use them there? Yes.
The most obvious way one might expect to get the Flash CS3 components working in Flex Builder is to simply add the source folder for the components to the source path of a project in Flex Builder. This folder is located at the following location:
[Flash CS3]/en/Configuration/Component Source/ActionScript 3.0/User Interface
Unfortunately, simply adding that folder won't work. In fact, do not add this folder to your source path (more on this below). The reason that using the straight source code doesn't work is because the Flash CS3 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 Flex 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 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]
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 Flash CS3 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 CS3.
-
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
cs3.swc. -
Right click on your ActionScript project in Flex 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. Flex 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 Flash CS3 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 Flash CS3 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 Flash CS3 LiveDocs 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 CS3. The most likely cause is that their source path still contains the folder where the component source is located. 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.
28 Comments
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!
[...] So needed to use a independent scrollbar for a little project I am doing, and knowing that Flex doesn’t have a solo scrollbar component, I decided to use the one from Flash, especially after reading some articles on exporting an .swc from Flash to get what I need. Here is one of the articles from Zeuslabs.us. [...]
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.
[...] How to use the Flash CS3 component set in a Flex Builder ActionScript project Flash CS3 Components, Flex Builder [...]
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.
[...] How to use the Flash CS3 component set in a Flex Builder ActionScript project [...]
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!