Here is one way to skin A V2 TabBar
2004-02-17 - By Craig Earls
Back
Since there seems to be a good deal of black magic surrounding the V2
components I decided it is time to test the EULA and post some useful
code. I will comment here on the apparent bugs I have found, as well as
how I successfully skinned the toolbar. I am very new to Flash and
Actionscript, so there is probably a better way. Please comment if there
is.
1. Extend the mx.controls.Tab class so that you can set the appropriate
skins. Note the documentation says the tab is "mx.core.Tab ". This
didn 't work and I guessed at mx.controls.Tab. So put the following in
an AS file (BlueTab.as) and associate it to a blank graphic in your FLA
library, I called mine BlueTab, and set the linkage to "BlueTab ":
import mx.controls.Tab;
class BlueTab extends mx.controls.Tab {
static var symbolName:String = "BlueTab ";
static var symbolOwner:Object = BlueTab;
static var className:String = "BlueTab "
var falseUpSkin:String = "TabSkin ";
var falseDownSkin:String = "TabSkin ";
var falseOverSkin:String = "TabSkin "
var falseDisabledSkin:String = "TabSkin ";
var trueUpSkin:String = "TabSkin ";
var trueDownSkin:String = "TabSkin ";
var trueOverSkin:String = "TabSkin ";
var trueDisabledSkin:String = "TabSkin ";
function BlueTab(){
}
}
I tried to set the skins for TabBar, but either did it incorrectly or
they are not passed through to the Tab component. So I had to make this
dummy class just to set the skins.
2. Now write the skin code and place it in an AS2.0 file called
TabSkin.as. Remember to associate the class file to a blank graphic in
your library.
import mx.skins.RectBorder;
import mx.skins.SkinElement;
import mx.core.ext.UIObjectExtensions;
class TabSkin extends RectBorder{
static var symbolName:String = "TabSkin ";
static var symbolOwner:Object = TabSkin;
var className = "TabSkin ";
function TabSkin(){
}
function init():Void{
super.init();
}
function size():Void {
drawBlueTabRect(width,height);
}
function drawBlueTab(w:Number,h:Number):Void
{
var borderStyle = getStyle( "borderStyle ");
var themeCol=0xFFFFDD;
var r1={br:0, bl:0, tl:5, tr:20};
var r2={br:0, bl:0, tl:4, tr:19};
var r3={br:0, bl:0, tl:3, tr:18};
var r4={br:0, bl:0, tl:2, tr:17};
var tabUpColor=0xC1DAFF;
var tabUpOverColor=0xDEEAFF;
var tabDownColor=0x97A8C7;
var tabDownOverColor=0xB7BCC7;
clear();
switch (borderStyle) {
case "falseup ":
drawTab(
x,y,w,h,r1,0x999999);//OuterBorder
drawTab(
x+1,y+1,w-2,h-1,r2,tabDownColor);
drawTab( x+2,y+2,w-4,h-2,r3,0xCCCCCC);
drawTab(
x+3,y+3,w-6,h-3,r4,tabDownColor);
break;
case "falsedown ":
drawTab(
x,y,w,h,r1,0x999999);//OuterBorder
drawTab(
x+1,y+1,w-2,h-1,r2,tabDownColor);
drawTab( x+2,y+2,w-4,h-2,r3,0x000000);
drawTab(
x+3,y+3,w-6,h-3,r4,tabDownColor);
break;
case "falserollover ":
drawTab(
x,y,w,h,r1,0x999999);//OuterBorder
drawTab(
x+1,y+1,w,h-1,r2,tabDownOverColor);//OuterBorder
drawTab( x+2,y+2,w-4,h-2,r3,0xCCCCCC);
drawTab(
x+3,y+3,w-6,h-3,r4,tabDownOverColor);
break;
case "falsedisabled ":
drawTab(
0,0,w,h,r1,0xc8cccc);//OuterBorder
drawTab( 1,1,w-2,h-1,r2,0xf2f2f2);
break;
case "trueup ":
drawTab(
x,y,w,h,r1,0x999999);//OuterBorder
drawTab( x+1,y+1,w-2,h-1,r2,tabUpColor);
drawTab( x+2,y+2,w-4,h-2,r3,0xCCCCCC);
drawTab( x+3,y+3,w-6,h-3,r4,tabUpColor);
break;
case "truedown ":
drawTab(
x,y,w,h,r1,0x999999);//OuterBorder
drawTab( x+1,y+1,w-2,h-1,r2,tabUpColor);
drawTab( x+2,y+2,w-4,h-2,r3,0x000000);
drawTab( x+3,y+3,w-6,h-3,r4,tabUpColor);
break;
case "truerollover ":
drawTab(
x,y,w,h,r1,0x999999);//OuterBorder
drawTab(
x+1,y+1,w-2,h-1,r2,tabUpOverColor);//OuterBorder
drawTab( x+2,y+2,w-4,h-2,r3,0xCCCCCC);
drawTab(
x+3,y+3,w-6,h-3,r4,tabUpOverColor);
break;
case "truedisabled ":
drawTab(
x,y,w,h,r1,0xc8cccc);//OuterBorder
drawTab( x+1,y+1,w-2,h-1,r2,0xf2f2f2);
}
}
// drawTab
// x - x position of tab
// y - y position of tab
// w - width of tab
// h - height of tab
// r - corner radii: object
{br:Number,bl:Number,tl:Number,tr:Number}
// c - hex color of fill: number
function drawTab(x:Number, y:Number, w:Number, h:Number,
r:Object, c:Number){
var rbr = r.br //bottom right corner
var rbl = r.bl //bottom left corner
var rtl = r.tl //top left corner
var rtr = r.tr //top right corner
this.beginFill (c, 100);
//bottom right corner
r = rbr;
var a = r - (r*0.707106781186547); //radius -
anchor pt;
var s = r - (r*0.414213562373095); //radius -
control pt;
this.moveTo ( x+w,y+h-r);
this.lineTo ( x+w,y+h );
//bottom left corner
r = rbl;
var a = r - (r*0.707106781186547);
var s = r - (r*0.414213562373095);
this.lineTo ( x,y+h );
//top left corner
r = rtl;
var a = r - (r*0.707106781186547);
var s = r - (r*0.414213562373095);
this.lineTo ( x,y+r );
this.curveTo( x,y+s,x+a,y+a);
this.curveTo( x+s,y,x+r,y);
//top right
r = rtr;
var a = r - (r*0.707106781186547);
var s = r - (r*0.414213562373095);
this.lineTo ( x+w-r,y );
this.curveTo( x+w-s,y,x+w-a,y+a);
this.curveTo( x+w,y+s,x+w,y+r);
this.lineTo ( x+w,y+h-r );
if (c != undefined)
this.endFill();
}
static function classConstruct():Boolean
{
UIObjectExtensions.Extensions();
_global.skinRegistry[ "TabSkin "] = true;
return true;
}
static var classConstructed:Boolean = classConstruct();
static var UIObjectExtensionsDependency = UIObjectExtensions;
}
That 's it, you should have a tab with a nicely rounded right upper
corner, a tightly rounded left upper corner which matches the background
color of the flash app I am working on...
If you want to change the fonts of the tab bar do that on the actual
tabbar itself. The text is drawn way down in the object hierarchy and is
best set using:
tabControl_tc.setStyle( "fontSize ", "14 ");
tabControl_tc.setStyle( "fontWeight ", "bold ");
Now for the bugs:
1. Apparently addItem( "Label ") does not return the index of the added
item as documented. Everytime I try this I get an "udefined " returned
instead of a Number.
2. Assigning a number to selectedIndex to programmatically choose a tab
appears to break the ability of the tab to deselect other tabs. You
will eventually end up with all tabs in the "selected " state...
=-- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- --
Supported by Fig Leaf Software
=-- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- --
Be sure to check the archives and the wiki:
http://chattyfig.figleaf.com/
=-- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- --
http://chattyfig.figleaf.com/cgi-bin/ezmlm-cgi?1:mss:104436
=-- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- --
To unsubscribe send a blank e-mail to:
Normal Mode: flashcoders-unsubscribe@(protected)
Digest Mode: flashcoders-digest-unsubscrive@(protected)
|
|
