Skinning the ToggleButtonBar
by jlagunas on Jun.03, 2008, under Skinning
The following examples show you how to apply:
- a background image to a ToggleButtonBar
- a background image to each button based on its current state (up/over/down)
- an icon to each button based on its current state (up/over/down/selected)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="0" backgroundColor="0x000000" viewSourceURL="srcview/index.html">
<mx:Style>
ToggleButtonBar
{
padding-left: 10px;
padding-right: 10px;
background-image: Embed(source="assets/menuBG.png");
button-style-name: "buttons";
}
.buttons
{
font-family: "Arial";
color: #ffffff;
font-size: 12px;
letter-spacing: 1px;
text-selected-color: #ffffff;
text-roll-over-color: #ffffff;
up-icon: Embed(source="assets/bulletBlue.png");
over-icon: Embed(source="assets/bulletBlue.png");
down-icon: Embed(source="assets/bulletGreen.png");
selected-up-icon: Embed(source="assets/bulletGreen.png");
selected-over-icon: Embed(source="assets/bulletGreen.png");
selected-down-icon: Embed(source="assets/bulletGreen.png");
up-skin: Embed(source="assets/zero.gif");
over-skin: Embed(source="assets/menuBg2B.png");
down-skin: Embed(source="assets/menuBg3B.png");
selected-up-skin: Embed(source="assets/menuBg3B.png");
selected-over-skin: Embed(source="assets/menuBg3B.png");
selected-down-skin: Embed(source="assets/menuBg3B.png");
}
</mx:Style>
<mx:Array id="menuArray">
<mx:Object label="PRODUCTS" />
<mx:Object label="ARTISTS" />
<mx:Object label="COMMUNITY" />
<mx:Object label="ABOUT US" />
</mx:Array>
<mx:ToggleButtonBar id="menu" horizontalCenter="0" verticalCenter="0" width="500" height="39" dataProvider="{menuArray}" buttonMode="true" />
</mx:Application>
9 comments for this entry:
June 9th, 2008 on 10:01 pm
How do set a different skin or style for each button in the group. I would like to have a custom image for each button.
June 11th, 2008 on 1:04 am
look at the new post…
http://letsflex.com/?p=6
January 19th, 2009 on 5:35 am
Thank you!
March 20th, 2009 on 5:36 am
Thanx a lot man! Finally a clear and working example on this nerving button-topic!
June 21st, 2009 on 7:57 am
Hi
I wish set differents stylename for each button in the bar.
Is it possible ?
Thanks
June 21st, 2009 on 9:04 pm
i believe that can not be done with the toggle button bar, but you might be able to do this if you were to create your own button bar using the repeater.
July 15th, 2009 on 8:01 pm
Thanks for the codes…
August 3rd, 2009 on 2:14 pm
Thanks!
August 23rd, 2009 on 9:30 am
thanks a lot, really helped me at a crucial time