Change the background color of a Flex toggle button

Question

What is the easiest way to change the background color of a toggle button when it is selected?

I've tried creating a custom skin for the button and applying it to the downSkin property, but I can't figure out how to change the background color from within the skin. Also I'd like to avoid using an image as a background if possible.

Answer 1

No easy way. Your best bet is to open up Flash Professional and create a skin; then assign that skin to the button as a style using something like this:

MyButton.setStyle('skin', mySkin);

[This advice may not apply if you are referring to a Spark ToggleButton as opposed to a Halo ToggleButton[

Answer 2

I hope I understand what you need.

In your skin file, the state upAndSelected is what you need to specify the color when the togglebutton is selected. You can copy the generated skin code from Flex to modify it or check the code below. Add it below the </s:Rect> tag under <!--layer 2: fill @private-->`

<s:Rect id="fill2" left="1" right="1" top="1" bottom="1" radiusX="2">
    <s:fill>
        <s:LinearGradient rotation="90">
        <s:GradientEntry color="0xFFFFFF"
                         color.upAndSelected="#333333" // you can modify color here
                         alpha="0.85" 
                         />

        <s:GradientEntry color="0xD8D8D8" 
                         color.upAndSelected="red" // you can modify color here 
                         alpha.downAndSelected="1" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

Paste the code above under

 <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                               color.selectedUpStates="0xBBBDBD"
                               color.overStates="0xBBBDBD" 
                               color.downStates="0xAAAAAA" 
                               alpha="0.85" 
                               alpha.overAndSelected="1" />
                <s:GradientEntry color="0xD8D8D8" 
                               color.selectedUpStates="0x9FA0A1"
                               color.over="0x9FA0A1" 
                               color.overAndSelected="0x8E8F90"
                               color.downStates="0x929496" 
                               alpha="0.85"
                               alpha.overAndSelected="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

Hope it helps.