The first CS3 component tip is really a bug in the authoring environment. It has to do with inspectable getters and setters and default values.
These are done pretty much identically to the way they were done in the old V2 components. Say you want a component parameter that will show up in the Properties Inspector. You give it a metadata tag of Inspectable. There are various parameters you can set here, such as type, defaultValue, etc. This would go right before either the getter or setter. You only have to define it once.
[as][Inspectable (defaultValue=99)]
public function set bottlesOfBeer(value:Number):void
{
_bottlesOfBeer = value;
}
public function get bottlesOfBeer():Number
{
return _bottlesOfBeer;
}[/as]
Now, that property will be shown in the Properties Inspector and the Component Inspector when the component on stage is selected. For a brand new component on stage, the default value will be filled in already. If no default value is specified, there are “default” default values depending on the type: String is “”, any number types are 0, Boolean is false, color is #000000, arrays are null, and a list would be the first value in the enumeration.
Theoretically, what happens is that when the movie is run, the setter is called. This occurs after the constructor is called. However, here is the gotcha:
1. If all of the component parameters are left as default, none of the setters will be called.
2. If any of the component parameters is changed from the default, all of the setters are called.
This has a couple of repercussions.
1. If you are using inspectable setters, do NOT rely on them to initialize a class variable. Make sure you initialize the variable when it is declared, or in the constructor.
2. Do not put any code in an inspectable setter that you NEED to run to initialize anything in your class.
Unfortunately, number one above results in code duplication, as you need to define the default value for the variable, and then set the default value for the inspectable parameter, which should be the same, and if you change one, you need to change them both. I know what you are thinking: use a variable to define the defaultValue, which can be the same private variable the setter is setting, like so:
[as]private var _bottlesOfBeer:Number = 99;
[Inspectable (defaultValue=_bottlesOfBeer)]
public function set bottlesOfBeer(value:Number):void
{
_bottlesOfBeer = value;
}
public function get bottlesOfBeer():Number
{
return _bottlesOfBeer;
}[/as]
But the metadata tag doesn’t have access to the class properties. So it takes _bottlesOfBeer as the string, “_bottlesOfBeer”. If your setter is a string, that’s the string it will get. In this case, the string gets evaluated as 0, so rather than 99, your default value becomes 0.
Not the end of the world. Just something to keep in mind, and a bit of necessary duplication.
Dude! I thought you were working on Ribbit. What’s this bottlesOfBeer property for? 😛 hehe, anyway, I liked the example.
you didn’t know about the Ribbit Beer component?
Thanks for bringing this up, Keith. As a general rule, I try and use all or none. One addendum to this article is that timeline components do not suffer from this issue. Timeline code will run after the constructor, so you are free to mix component parameters and actionscript without consequence.
by “timeline components” I assume you components placed on the timeline, rather than created using new Whatever().
No, my comment was a bit vague, and not worded so well. Components on the timeline are the only ones you can apply component parameters to. What I was referring to is _timeline code_ to set the properties, eg: Frame 1. The issue you describe only affects components that reside in a MovieClip/Sprite that has a class on it, and the component properties get set in that class’s constructor.
This seems to work fine (thanks btw kp) with component parameters with fixed data types, but color-based parameters are a bit of an issue.
For example, in AS2, you could setup a color parameter like so:
[Inspectable(type=Color,defaultValue=”#1A1A1A”,name=”Background Color”)]
public function set backgroundColor(d:Number):Void {_backgroundColor = d;}
public function get backgroundColor():Number {return _backgroundColor;}
And that worked fine. It also works fine in AS3, but this default value thing throws a kink into the equation for _backgroundColor, in the above example, has a data type of “Number”. So obviously you can’t do this:
private var _backgroundColor:Number = “#1A1A1A”;
So…thinking I could get all clever I converted that to its numerical equivalent, like so:
private var _backgroundColor:Number = 2500134;
But that doesn’t get translated by the Component Inspector panel into the default color needed. It simply defaults to “#000000” (0).
Any bright ideas on how to get around this?
0x1A1A1A
I’m not sure that solves the problem, for you still have to cast that value as a string in order for AS3 to accept it. In other words, using your defaultValue workaround…
private var _backgroundColor:String = “0x1A1A1A”;
[Inspectable(type=Color,defaultValue= _backgroundColor:String,name=â€Background Colorâ€)]
public function set backgroundColor(d:Number):Void {_backgroundColor = d;}
public function get backgroundColor():Number {return _backgroundColor;}
…throws a “Implicit coercion…” error.
Perhaps I’m misunderstanding something…
(Didn’t mean to include that “:String” as part of the defaultValue assignment)
No, I did not have a defaultValue workaround. I said such a workaround will not work.
Saying
defaultValue=_backgroundColor
will not take the string value of _backgroundColor. It will take the literal string, “_backgroundColor” directly as a String.
just do this:
private var _backgroundColor:uint = 0x1a1a1a;
[Inspectable (type=”Color”, defaultValue=”#1a1a1a”)]
public function set backgroundColor(value:uint):void
{
_backgroundColor = value;
}
public function get backgroundColor():uint
{
return _backgroundColor;
}
That’s what I said about the need to duplicate the code. First assigning a default value to the variable itself, and then assigning a default value in the inspectable metadata, and making sure they stay in sync. I don’t know of any way to set these both just once. Although the defaultValue for a color is a string beginning with #, it gets transformed into a number.
Ahhh….ok. Apologies. I misread your post, thinking your example was the actual workaround. I got it going now. Thanks again.
no problem. rereading it now, that part wasn’t so clear.
Yeah, I’ve been looking for a fix for this issue for quite a while. So when I quickly glanced at your beer code, I started thinking about beer and looking at the clock hoping it said BEER:30. Then I looked at your second code snippet, had a moment of joy, only to read further and hear that the code is bogus and doesn’t work. Basically, if you can change this it will save a lot of quick-glancing beer lovers a few minutes of confusion.
Something else you need to know with components is that you cannot access all their properties until they have been ADDED to the stage. This is kind of crazy, but can be overcome with the Event.ADDED event, and some kind of myComponent.init() function.
Hi People,
The posts above have been very useful. Any ideas how can i set a default ‘List’??
I want to give ‘List’ as the datatype in the properties inspector, but i have not been able to get it going!!!
Im so tired of trying to create components in AS3. I used to build as2 versions for teachers and non technical people and they could customise templates easily. Now because the inspectable params dont work i have to code everything for them. For me this is even worse than the memory leak or sound event problem. I really hope they fix it for CS4.
I ran into that same issue with the inspectable tag too… although I wish I would have found your blog article before debugging it myself! I also found an issue if you are using the IDE to write your AS. If you hit the auto-format button, it puts a semi-colon after the inspectable tag. Which renders it useless, with no indication of compiler errors or anything. It took be an hour to realize the auto format added the semi-colons! Oh… and if you are using a MAC to build components, good luck trying to add a custom icon! It won’t accept any of the PNGs I throw at it!
For more information on the available types of inspectable tags check out the table on this site…
http://www.adobe.com/devnet/flash/articles/creating_as3_components_pt3_06.html
As for further reading on writing components check these two sites out…
Read the entire component tutorial from Adobe… it clears a lot of these things up.
http://www.adobe.com/devnet/flash/articles/creating_as3_components.html
If you want to simplify creating custom compiled swc components check this guy’s blog out…
http://flexion.wordpress.com/2007/06/27/building-flash-cs3-components/
After much searching I found some answers here but am still struggling with the setting of inspectable parameters for a SWC. I tried listening for the ADDED event then calling an “init”, as suggested above by Tarwin, but the setter is getting called after the event so my “init” function still has the default values. I want to be sure to capture the real values in case of changes. I am using Flash CS4… any suggestions would be appreciated.
Hello all.
last week i started learning AS3 for the first time, i do have to admit that although i have a vast experience in AS2, changing to AS3 is beeing overwelming :P. Anyway, one of my first trys with AS3 was to build AS3 Components, and i did reache the same problem with the default value for a inspectable variable. So, after some time hiting the wall with my head i got this to work real nicely. Here is my example.
package {
import flash.display.MovieClip;
import flash.events.Event;
public class InspectableDefaultValues extends MovieClip {
//properties
[Inspectable(name = “Say something”, defaultValue = “Something”, variable = “myVar”, type = “String”)]
private var _myVar:String = “Something”;
//constructor
public function InspectableDefaultValues():void {
this.addEventListener(Event.ACTIVATE, initInspectableDefaultValues);
}
//methods
private function initInspectableDefaultValues(e:Event):void {
trace(_myVar);
}
public function set myVar(arg:String):void {
_myVar = arg;
}
public function get myVar():String {
return _myVar;
}
}
}
Due to some kind of bug or intentional behavior i dont know for sure, if you define the defaultValue = “Something” in the Inspectable tag it will show correctely in the Component Inspector Window, but if you don’t change that value on the Component Inspector Window, the set/get functions dont fire up and you will end with a NULL value for your variable. My solution was to initialize a private variable with the same default value that you used in the Inspectable tag, and in the constructor create a Event.ACTIVATE listener to initialize your component. like this, if you dont change your default var value, it will be the one you forced in the code, and if you change it will get updated acordingly.
Sory for my english as i tryied to be as clear as possible. 😛
ops i forgot to remove the listener….. im still new to this stuf :P, the initInspectableDefaultValues function should be like this instead:
private function initInspectableDefaultValues(e:Event):void {
this.removeEventListener(Event.ACTIVATE, initInspectableDefaultValues);
trace(_myVar);
}
now its good 🙂
ok
I tried to trace some values from the metatags
but its return nothing, probably there is a delay
so is there a way to configure all the declared variables (in the constructor may be) and after that use them as we want??
Thanks Keith for preventing my insanity from initialization issues!
One thing that came up in juggling parameters is figuring out the order in which the setters are called. It doesn’t seem to be file position, which is driving me crazy (since there isn’t a priority attribute in the Inspectable tag).
In my situation, the programmatic tint setting for my movie clip was happening AFTER the setter for another parameter that messed things up, and I needed to reverse this. I had to fall back on “callLater” unfortunately, but that routine (albeit making me feel a bit grimy) has come in to save the day. Maybe this will help someone else!
I think this might help some people.
I am not defining the getters and setters.. just the variable, and I also wanted a list of options
[Inspectable(name = “Set Platform: “,defaultValue = “PC”,enumeration = ‘PC,Mac,PS3,XBox 360,Wii,NintendoDS,PSP,PS2,Xbox’)]
private var _platform:String;
additionally, like what is said in the article. you make a clip, you make it a component, you connect the component to the class, drag it on stage… and if you just run the movie… all values are NULL,0,etc.
so additionally inside my constructor
public function MyConstructor(){
_platform = “PC”;
}
and this guys link shows you how to compile as a component, and set the width height.
http://flexion.wordpress.com/2007/06/27/building-flash-cs3-components/
DONT USE PRIVATE! that is a typo
One possible workaround I came up with (it’s up to you to decide how ugly it is) is to create one extra inspectable boolean setter. You can call it something like _forceApplyParameters (with an underscore) in order to force it to the top of the component parameters list, and set it’s default inspectable value to false. From the user perspective, clicking this inspectable property to true will force all setters to run, even if the rest of the component parameters are left at default.
The benefit of this is it quickly removes a lot of code duplication from the developer side, which makes updating a bit of a headache.
The drawback is obviously that it forces the user to perform a seemingly-arbitrary action.