2

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 clicked 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?

3 Answers 3

3

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.

1

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.

0

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.

3
  • But right now, except for the greyish overall look of the button, which could actually be OK, the only real problem is that the alpha setting doesn't seem to apply to disabled buttons, I'm at a total of 6 lines of CSS code to define the styles, plus three lines of actionScript to set the styleName variable to "Right", "Wrong", and "" respectively.. how would subclassing and adding states, and defining looks from the states be easier? I'll look into what's needed to do that, tho, thnx Apr 11, 2011 at 19:23
  • Well, you can always try to set the disabledAlpha and disabledColor
    – J_A_X
    Apr 11, 2011 at 19:35
  • disabledAlpha doesn't work, I think the base button image has a slightly transparent alpha =(. How do you add formatting to the comments? Apr 11, 2011 at 19:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.