Setting disabled button appearance in Flex

I'm making a trivia in an Air application, a question, three buttons, after you choose one, the right button gets coloured green, the wrong ones get coloured red. I was trying to do this changing the styles, so I created a Button.Right and a Button.Wrong style, but I also need to disable the buttons so they don't get clicke开发者_JS百科d more than once while I'm showing the correct answers.

So I'm having trouble making it so the buttons don't look greyish and with the alpha turned down when I set their enabled property to false.

I'm trying to be as minimalistic as possible here, changing disabled-overlay-alpha or disabledOverlayAlpha in the css file doesn't seem to do the trick, neither does changing disabledBorderColor

any fast tricks to do this?

This might be a somewhat dirty workaround, but you could try disabling the buttons by setting their mouseEnabled property to false to forbid them from interacting with the mouse.

I have always used stateful skins to accomplish this. It's relatively easy, but this is how I would do it:

CSS (path changes depending on your assets):

Button {
   skin:ClassReference('com.mysite.assets.skins.MyStatefulSkin');
}

Then, in /com/mysite/assets/skins, you would have:

package com.mysite.assets.skins {

    import flash.display.GradientType;
    import mx.containers.Canvas;

    public class MyStatefulSkin extends Canvas {

        import flash.display.Graphics;
        import flash.geom.Rectangle;
        import mx.graphics.GradientEntry;
        import mx.graphics.LinearGradient;

        public function MyStatefulSkin() {
            super();
        }

        protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth,unscaledHeight);

            var w:Number = unscaledWidth;
            var h:Number = unscaledHeight;
            var cr:Number = getStyle('cornerRadius');
            var backgroundFillColors:Array;

            var g:Graphics = graphics;
            g.clear();

            switch( name ){
                case "upSkin":
                    backgroundFillColors = [0xffffff,0xdddddd];
                    break;
                case "overSkin":
                    backgroundFillColors = [0xffffff,0xdddddd];
                    break;
                case "downSkin":
                    backgroundFillColors = [0xffffff,0xdddddd];
                    break;
                case "disabledSkin":
                    backgroundFillColors = [0xffffff,0xdddddd];
                    break;
            }

            // Draw Background
            g.beginGradientFill( GradientType.LINEAR, backgroundFillColors, [1.0,1.0], [0,255], verticalGradientMatrix( 0, 0, w, h ) );
            g.drawRoundRectComplex( 0, 0, w, h, cr, cr, cr, cr );
            g.endFill();

            // Draw other things (borders, icons, etc)

        }

    }

}

Sometimes I don't use canvas, other times I do. I use things that allow me flexibility inside of the actual asset. However, the idea remains the same, this allows you to set up states for your skin where you can treat things differently depending on the skin.

Personally, I think you should just extend whatever component you use and add states (correctNormal, correctDisabled, wrongNormal, wrongDisable) and just change the state appropriately depending on the properties given to the component. With this, you can specify very easily how everything is suppose to look. Would be even easier if you were using Flex 4.