Posted on Saturday 9 April 2005
I just finished bug-fixing an app of mine I made quite some time ago that uses the built-in Flash UI components. Looking at the finished product, the interface lacked a bit of polish, I thought; the components looked really good when they came out of the box a year or so ago, but now they same a bit aged. Maybe it's just because I've seen them everyday for so long. Anyway, the only ready-made theme that I know of is the Flex-Style UI components from dwuser.com.
I really wish I could use something less obviously derivative or more original as a theme, but as Keith Peters has pointed out well, it's ridiculously difficult to skin the v2 components, and so far the Flex-style components is the only commercial endeavour to theme Flash's UI components.
Of course, there's the bit component set by Keith Peters himself, but for this particular project I needed a DateChooser, which is nowhere to be found in the current set. I really wish I could use the bit component set for all of my projects. Skinning is as simple as dropping a couple of movieclips in the library and modifying them as fit. But too often I need a date chooser or a datagrid and the whole project comes to a crumble. Here's hoping they make it into the next version.
Anyway, I bought the Flex-style UI component set and was a little disturbed by the installation procedure. "Make a copy of (localData)\Classes, rename it (localData)\Flex Style Classes, change the global class path to (localData)\Flex Style Classes in the Flash IDE, and then install the mxp." WTF? Anyway I did as I was told and it actually worked. I don't know though how this will interfere with further installations of classes but doing a quick compare it looks as though only a couple of classes are changed in the new directory anyway. It does seem very over-the-top for replacing about 5 or 6 classes though.
Once the new components are installed though, they work marvellously. The theme is gorgeous. It looks so much like Flex it's almost impossible to tell the difference. There is just one small thing that I found odd: the disabled button skin looks wrong. See below:
It just seems way too dark, it stands out too much from the enabled button; i wanted something more like the rightmost button. Looking at the aso cache, it looked as though the skinning code was already compiled in the components; tough luck. There's a deliciously hacky way to get around this limitation though: our good old friend, prototype. The function doing the drawing is mx.skins.halo.ButtonSkin.drawHaloRect(w,h). You can dig in the installed classes to see how it works, it's not too bad. So I was able to plug into the disabled skin code and replace it by placing the following on the main timeline:
if(haloInited == undefined)
{
mx.skins.halo.ButtonSkin.prototype.oldDrawHaloRect = mx.skins.halo.ButtonSkin.prototype.drawHaloRect;
mx.skins.halo.ButtonSkin.prototype.drawHaloRect = function (w:Number,h:Number):Void
{
this.oldDrawHaloRect(w, h);
var borderStyle = this.getStyle("borderStyle");
switch (borderStyle) {
case "truedisabled":
case "falsedisabled":
{
this.clear();
this.drawRoundRect( 0,0,w,h,5,0x6F7777,50);//outer edge
this.drawRoundRect( 1,1,w-2,h-2,4,[0xF7F7F7,0xC4CCCC],100,{ matrixType:"box", x:0, y:0, w:w-2, h:h-2, r:(90/180)*Math.PI },"linear"); //inner glow
this.drawRoundRect( 2,2,w-4,h-4,3,[0xD5DDDD,0xAAB3B3],100,{ matrixType:"box", x:0, y:0, w:w-4, h:h-4, r:(90/180)*Math.PI },"linear"); //button edge
this.drawRoundRect( 3,3,w-6,h-6,2,0xFFFFFF,100); //button top higlight edge
this.drawRoundRect( 3,4,w-6,h-7,2,[0xEEEEEE,0xFFFFFF],100,{ matrixType:"box", x:0, y:0, w:w-6, h:h-6, r:(90/180)*Math.PI },"linear"); //button face
this.drawRoundRect( 5,h-2,(w-10)/2,1,0,[0xFFFFFF,0xFFFFFF],[0,100],{ matrixType:"box", x:5, y:0, w:(w-10)/2, h:1, r:(0/180)*Math.PI },"linear"); //bottom light (left)
this.drawRoundRect( ((w-10)/2)+5,h-2,(w-10)/2,1,0,[0xFFFFFF,0xFFFFFF],[100,0],{ matrixType:"box", x:((w-10)/2)+5, y:0, w:(w-10)/2, h:1, r:(0/180)*Math.PI },"linear"); //bottom light (right)
this.drawRoundRect( 5,4,(w-10)/2,h-7,0,[0xFFFFFF, 0xFFFFFF],[0,50],{ matrixType:"box", x:0, y:0, w:(w-10)/2, h:h-6, r:(0/180)*Math.PI },"linear"); //button face light (left)
this.drawRoundRect( ((w-10)/2)+5,4,(w-10)/2,h-7,0,[0xFFFFFF, 0xFFFFFF],[50,0],{ matrixType:"box", x:((w-10)/2)+5, y:0, w:(w-10)/2, h:h-6, r:(0/180)*Math.PI },"linear"); //button face light (right)
}
}
}
haloInited = true;
}
This sort of prototype hacking reminds of a song by Tom Waits: "You can take out nature with a pitchfork, but it always comes roaring back again."
I made a Flex-style panel component and a background gradient component a while ago so I put it all together and I must say it looks gorgeous. The Flex-style panel you can easily replicate using the Resizer that comes with the bit component set. Take a look for yourself here.
