Let me show the code & result as well :-
tabBar = new TabBar();
tabBar.dataProvider = new ArrayCollection(
[
{ label: "BLUE"},
{ label: "RED"},
{ label: "GREEN"},
{ label: "YELLOW"},
]);
tabBar.direction = Direction.HORIZONTAL;
tabBar.addEventListener( Event.CHANGE, tabs_changeHandler );
tabBar.distributeTabSizes = true;
tabBar.tabFactory = function():ToggleButton
{
var tab:ToggleButton = new ToggleButton();
//skin the tab here, if not using a theme
var normal_skin:ImageSkin = new ImageSkin(lobbyAssets.getTexture("normal_btn") );
var active_skin:ImageSkin = new ImageSkin(lobbyAssets.getTexture("active_btn") );
tab..defaultSkin = normal_skin;
tab.defaultSelectedSkin = active_skin;
tab.fontStyles = new TextFormat( "keepCool", 30, Color.WHITE );
return tab;
};
output :-
requirement photoshoped : -