When you are making a UI component in Flash, you can specify certain public variables or getter/setters as Inspectable with metadata. This changes them into “component parameters” that show up in the Properties Panel and / or the Component Inspector Panel. If you don’t like the UI that the panels provide, you can create a custom SWF to use in its place. This is known as a “Custom UI”. This SWF gets loaded into the Properties Panel or the Component Inspector Panel. You would supply some kind of UI for getting and setting the various component parameters. This has existed for many versions of Flash, probably way back to Flash 5 Smart Clips.
Unfortunately, this mechanism is kind of broken in Flash CS3. The problem is that a custom UI uses a special variable, _root.xch, as a bridge between the ui itself and the Flash IDE. This _root.xch object is not supported in AS3 though. I thought I could get around this using MMExecute and JSFL. I got almost all the way there, too. I can find the selected item on stage, which is always the component that is linked to the custom ui. I can read its parameter list. I can access individual parameters in the list. I can access the individual properties of each parameter. I can get and set the value of each parameter. Great! Except for one minor glitch: when you use a custom ui, the “name” property of all parameters is – for some reason – empty. Thus, if you have more than one parameter, there is no way to tell which is which. There may be other glitches beyond that, but that one pretty much killed me.
There are a couple of options here.
1. You can do what John Grden did with his PV3D component and make a Window SWF that does exactly what I just described with JSFL. As long as you don’t set a custom UI, all the parameters work exactly as expected. The thing I don’t like about that is that it may not be so obvious to the end user that that Window SWF even exists. With a custom UI, it either shows up in the Properties Panel, or you get a big button telling you to open your Component Inspector, where the custom UI is.
2. You can use AS2 to code your custom UI, using the _root.xch object as we have for a while. I guess that’s not a horrible option. A custom UI shouldn’t be some massively complex application. You’re just setting and getting a few values.
Anyway, I just thought I’d mention this, as I spent quite a bit of time trying to work this one out. Finally after talking to John Grden extensively, I went to Grant Skinner, who got me in touch with Nivesh at Adobe, who verified that this is indeed a bug in the Flash IDE and gave me the solutions I just mentioned. Hopefully this saves someone else some time in the future.
Dear Keith,
Thanks for pointing out these landmines. I have a big undertaking to update my component sets and I appreciate you pioneers uncovering issues I am sure to face.
I would normally rejoice in saying just stick with an AS2 custom UI, except I realized that if I do that, I can’t put the AS3 component into the movie clip then, can I? Of course one puts a copy of the component itself into the custom UI so one can show a preview of the component behavior for the parameters changed (for example, here’s my custom UI (http://www.commandsim.com/ie_testDrive.html).
Option 1 is not great, as you said, because users have to know about the window SWF. Option 2 is not great because I’ll have to use an AS2 version of my component as the preview (which may have slight differences from the AS3 version).
With all the great info you’ve provided, I hate to ask: is there any hope in sight for making AS3 custom UI’s the way it really should work?
Thanks again for pointing out all the obstacles! Do you have any good article references on the overall creation of AS3 components?
-jonathan
Jonathan. Yeah, that is a problem. You can actually load in your as3 movie to your as2 swf panel, but you can’t control it via code directly. You’d have to implement some kind of local connection scheme to communicate with it. Definitely doable but way more complex than something like this should be.
As for any hope of this being fixed, not sure. It is acknowledged as a bug, but nobody said anything about fixing it. 🙂 I assume (or at least hope) that it will be fixed in Flash CS4, but I haven’t heard anything about a CS3 IDE patch or anything.
The 9-part component creation series on the Adobe developer center is the most comprehensive resource I know of.
Great article, but this solve the problem the way it was in previous versions. I would be happy if you can speak about the problems related to your second option… do you really think as2 preview swf file will be a good option for as3 component?
I don’t think as2 preview swfs for as3 components is a GOOD option. unfortunately, it is the ONLY option at the moment.
Hi,
It would have been better if you had provided the process in the two methods you have mentioned.I did not find any step by step method to create a “CUSTOM UI”.
Plz provide if you can or at least give the links from where i can find it.Thanks in advance.
you say “you can specify certain public variables or getter/setters as Inspectable with metadata. This changes them into “component parameters†that show up in the Properties Panel”.
They might show up but they are ignored!!!!
Seems the choices are either to extend the existing components or to NOT have parameters set in the properties panel. or am i missing something? This was so easy in AS2 when the constructor would pick up the values, really hope they fix this for CS4.
yeah, it was a bear to say the least, but I beg to differ on whether or not a CustomUI should be complex 🙂 With the Papervision3D component, the concepts are completely complex, like handling multiple materials and multiple material types, rotating your objects, dealing with camera zoom/focus etc. To make these options usable, you have to use slider controls and items that exist in Flex as well as a little Papervision3D for the rotation sphere 😉
The blessing of doing it my way is that I can leverage Flex UI controls and create a GUI that rocks compared to having that parameters panel that makes you want to shoot yourself. With a little JSFL love in the middle, it can all happen.
But it saying that, I really was blown away a the lack of support for Flash 9 SWF as a customUI…in Flash 9. I STILL scratch my head over that one. Did they really think we wouldn’t want to use AS3 for custom UI’s? or CREATE those custom UI’s IN the Flash 9 IDE possibly?!?!
oye vey, don’t get me started.
In Flash 10, you can use ExternalInterface to communicate between custom UIs and the IDE. So I’m told. Haven’t had to go there yet.
This article was of great help. Thanks for writing it!
Even if ‘name’ property of parameter object is empty string, you can get/set values of component with JSFL in CS3 with AS3. For example, if you have component with 2 parameters named ‘visible’ and ‘enabled’ you can access their values with:
fl.getDocumentDOM().selection[0].parameters.visible.value;
fl.getDocumentDOM().selection[0].parameters.enabled.value;
If you traverse ‘fl.getDocumentDOM().selection[0].parameters’ array with for loop, then ‘name’ property of returned parameter objects will be empty string which is indeed unusable.
I am not sure if this always works, but in few tests that I did, it works very well. I also hope that it wont be broken in CS4.
Eureka! I’ve done it! After seemingly endless trial and error, I finally succeeded at making an SWC-based component entirely with Flash CS3, and my own custom UI, all written in AS3. I’ve just posted a tutorial along with my source:
http://studio.barliesque.com/blog/2008/12/as3-component-custom-ui/
Please have a look and let me know what you think!
I’ve figured out how to do this. The parameters are there, just not listed in a normal way.
http://simplestexplanation.com/2010/01/getting-named-parameters-for-a-component-in-flash-using-jsfl/
As Igor said, you can still use an alternative for “name”. For exmaple setting component parameter “linethickness” and reading it in from ui variable in location par.linethickness.showvalue (mc with a numeric stepper setting variable ‘showvalue’) you can use
MMExecute(“fl.getDocumentDOM().selection[0].parameters.linethickness.value = “+par.linethickness.showvalue)
The only trouble is String parameters… the MMExecute will make them behave as being “eval”-ed and give error that the string passed is not found (as being some declared variable). You can circumvent by encllosing ‘ ” ‘ (doublequotes) on both sides of the passed string variable so it arrives at the component as string within doublequotes.