Ok here is one of the tips I promised:
Skinning, its tedious...and boring. The outcome is great though so it has to be done. I am sure it will get easier as it evolves but for now we must deal with it. I spend most of my days creating components and the parts that take me most time are documenting and skinning setup. Well to save a teeny bit of file size, and save some time I made a very small addition to the registerSkinElement in some of my components.
Up till now I have always had seperate symbols for the enabled and disabled state of a component, and those were placed in a parent symbol with an enabled and disabled frame. And each of those seperate symbols had smaller pieces that made up the skin called skin elements. So you would see stuff like this.
MyComponent Left Side:
component = this._parent._parent;
component.registerSkinElement(face_mc,"face");
component.registerSkinElement(darkshadow_mc,"darkShadow");
MyComponent Left Side Disabled:
component = this._parent._parent;
component.registerSkinElement(face_mc,"disabledFace");
component.registerSkinElement(darkshadow_mc,"disabledDarkShadow");
and of course the same for the middle and right etc...as you can see that if anything changes, its a hassle to make changes. And its very repetitive which is very very boring. And when having a lot of elements (my typical skins have 5 skin elements in each sub symbol) it just gets out of hand.
So I figured I would save myself some time and hassle and override the registerSkinElement method in my component to be slightly smarter. You could make the registerSkinElement really smart and have it handle a lot of situations....but for this example I want to keep it simple so people don't go about ruining their components extensibility by making lower level skinning support...too smart.
Check out the code below:
MyComponentClass.prototype.registerSkinElement = function(skinMCRef, propName, isGlobal){
propName = (this.enabled) ? propName : "disabled"+propName;
return super.registerSkinElement(skinMCRef,propName, isGlobal);
}
Such a small bit of code, that saves me a ton of time. this.enabled represents the enabled state of my component. Since my component redraws when its disabled or enabled all of the elements re-register. And if my component is disabled it appends the "disabled" string to the front of the propName. This means the once "enabled" skin takes the form of the "disabled" skin by registerSkinElement being smart enough to prepend the propname with disabled. You can see how this would come in handy in other situations too, such as when you have a selected item...you can check for that here. But be careful, you want to make sure you don't waste cpu, and most importantly you don't ruin the extensibilty of your component.
Post your questions in the comments, I hope I described the situation ok :).
10:40:28 PM 
|
