So, helping a friend today with figuring out how to skin the Window’s title bar and the ScrollPane’s Scrollbars.
The first took some working, but originally, she looks like this:
And using this code:
_global.styles.Window.setStyle("borderStyle", "outset");
mx.managers.PopUpManager.createPopUp(_root,
mx.containers.Window,
true,
{skinTitleBackground: "test",
skinCloseUp: "bu",
closeButton: true});
She looks like this:
Notice in the above code, I pass in the skin variables in the initialization object. There is another to do this ahead of time as I’ll show you below. The strings are the linkageID’s of the movie clip’s I’ve created. The skin creation is really simple:
– create a movie clip
– put art in it
– right click on the symbol in the library
– give it a linkageID name
– make sure it’s exporting in frame 1 (otherwise, you’ll have to put it manually on stage somewhere before you use it)
– in the AS 2.0 Class field, type “mx.skins.SkinElement” (this makes the movie clip size with the component)
Done!
However, for components within components, you don’t have control of their constructors, nor access to them usually. Now, there may be another way to do this, but accessing the default skin properties is easy. In the ScrollPane’s case, here’s how he normally looks.
However, if I want to skin the Scrollbar, I merely set the prototype values to something different than the default before creating the ScrollPane:
mx.controls.scrollClasses.ScrollBar.prototype.scrollTrackName = "scrollbar_track_green_mc";
mx.controls.scrollClasses.ScrollBar.prototype.upArrowUpName = "scrollbar_arrow_mc";
mx.controls.scrollClasses.ScrollBar.prototype.downArrowUpName = "scrollbar_arrow2_mc";
mx.controls.scrollClasses.ScrollBar.prototype.thumbTopName = "thumbTop";
mx.controls.scrollClasses.ScrollBar.prototype.thumbMiddleName = "thumbMiddle";
mx.controls.scrollClasses.ScrollBar.prototype.thumbBottomName = "thumbBottom";
attachMovie("ScrollPane", "mc", 0);
mc.setSize(320, 240);
mc.contentPath = "test1.jpg";
He now looks like this:
Granted, now that I’ve set the prototype, all Scrollbars will use the same skins, so this method does not allow for individual Scrollbar skinning, but I’m sure there is a way somehow; I’m still learning.
Hope this helps!
