F9 for actions

Another Flash CS5 Custom Component Quirk

In my attempt to make my custom components compatible with Flash CS5 from CS4, I found that my Inspectable parameters that were Objects were not working, and in fact would cause all parameters that come after it to not work.

Before I continue on with the main topic here, I just want to note that regardless of what order you define your Inspectable parameters, Flash reads them in Alphabetically by the variable name. So when I say the parameters that come after the Object parameter, I mean all those that come after it Alphabetically.

To get right down to it, the problem ended up being that I defined my parameter’s defaultValue property with single quotes rather than double. CS4 didn’t ever care about this, but it seems CS5 is a lot more picky about how you define things. Here is the before and after:

BEFORE (broken):

[Inspectable (name="Parameters", variable="ButtonParameters", type="Object", defaultValue='command:"",event:undefined,frame:1,group:undefined,scene:undefined')]

AFTER (fixed):

[Inspectable (name="Parameters", variable="ButtonParameters", type="Object", defaultValue="command:'',event:undefined,frame:1,group:undefined,scene:undefined")]

Notice how I just switched the single quotes with double quotes in the defaultValue property. Hope this helps someone who is pulling their hair out.

Inspectable Parameters Not Showing Up on Custom Components in Flash CS5

So I just upgraded to Flash CS5 this week at work and I found a really finicky problem that does not seem to be documented anywhere. I build a lot of custom components for my job, and if you’ve ever done it you know that building custom components for Flash is a little like an Indiana Jones adventure - you get beaten up a bit, there’s some problem solving, and a whole lot of improvising before you reach the end, oh yeah and snakes too.

Anyway, the problem I came across was that with my custom components moving from CS4 (where they worked great) to CS5, my components no longer had their parameters visible in the component inspector, or in CS5 the properties panel. After an hour of Google searching with no answer to be found I decided it had to be an edge case of some sort.

The way I had previously listed my Inspectable tags in my code had been after my class declaration and before my property declaration - so it looked a little like this:

public class NavigationButton extends UIComponent {
	[Inspectable (name = "Button Type", variable = "ButtonType", type = "List", defaultValue = "Text", enumeration = 'Text,Blank,Hidden')]
	[Inspectable (name = "Disabled", variable = "Disabled", type = "Boolean", defaultValue = 'false')]
	[Inspectable (name = "Label", variable = "ButtonText", type = "String", defaultValue = 'Next')]

In CS4 this was a completely acceptable way to define your inspectable parameters for your custom components. However in CS5 they just do not register. After looking at how a few tutorials organize their Inspectable tags, I found that a few of the more recent tutorials define their Inspectable parameters just before the getter and setter functions for that parameter. So with a little cut and paste I moved the Inspectable tags just above the getters and setters like so:

[Inspectable (name = "Label", variable = "ButtonText", type = "String", defaultValue = 'Next')]
public function set ButtonText( t:String ):void {
	btnlabel = t;
	draw();
public function get ButtonText():String {
	return btnlabel;
}

And viola! The Component Definition now shows all of my Inspectable parameters that I have defined in the component class. Also note that when you make the change, you’ll want to open the Component Definition window twice, because it does not recompile the clip until you hit the OK button on that window. So the parameters won’t show up the first time, but they will after the clip gets recompiled.

Also, if you’re having the problem where your component is blowing up because Flash CS5 can’t find fl.core.UIComponent you need to add in $(AppConfig)/Component Source/ActionScript 3.0/User Interface as a source path in your ActionScript settings.

Updating (redrawing) Components from JSFL

I am building a Flash Panel for a Custom Component I have built. I didn’t want to use the CustomUI setting for components because I wanted to be able to allow this panel to edit multiple instances of this component at once. The problem I have run into is figuring out how to get my component instances on the stage to update or redraw themselves when a property changes.

I searched and searched for a way to do this and didn’t find anything that worked. The problem lies in the fact that the Flash Panel doesn’t (and shouldn’t in my opinion) know about the specific instances on the stage. JSFL does know about those instances but only as it’s predefined Element object type, so there is no way to access public functions of that component from JSFL. You can access the Inspectable properties of the component, but changing these values does not tell Flash’s live preview to redraw the components.

So, if you were able to follow all of that, the problem here is that I can update properties of my components using my Flash Panel and JSFL, but there is no way to force redraw those components on the stage when I change the properties… until now.

I found that when deselecting my components that I had just changed properties on, the stage would redraw them. So all I did in JSFL was deselect the components and reselect them. Thankfully this forces a redraw of the live preview components. Here’s what that JSFL code looks like:

function invalidateStage() {

	var selectedArray = fl.getDocumentDOM().selection;
	fl.getDocumentDOM().selectNone();
	fl.getDocumentDOM().selection = selectedArray;

}

Now when I call invalidateStage in my JSFL after I have changed a property on my component, the stage will effortlessly update before my eyes.