[Flashcoders] Vista-like glossy SimpleButton - please help with the final touch

[Alexander Farber]

Hello,

could someone please help me with a glossy button?
I think I'm missing something minor in my code (at the bottom).

I have a gradient running vertically, but it's too soft -
I don't know how to create the crisp line in the middle,
which you see for example in this Photoshop example:
  http://www.psfreak.com/vista-styled-button
(I also wonder what is the "Gradient Overlay"
mentioned there and how to create it in ActionScript).

Thank you
Alex

package {
    import flash.display.Sprite;

    public class SimpleButtonExample extends Sprite {
        public function SimpleButtonExample() {
            var button:CustomSimpleButton = new CustomSimpleButton();
            button.x = button.y = 100;
            addChild(button);
        }
    }
}

import flash.display.*;
import flash.filters.*;
import flash.geom.*;

class CustomSimpleButton extends SimpleButton {
    private var upColor:uint   = 0xFFCC00;
    private var overColor:uint = 0xCCFF00;
    private var downColor:uint = 0x00CCFF;
    private var size:uint      = 80;

    public function CustomSimpleButton() {
        downState      = new ButtonDisplayState(downColor, size);
        overState      = new ButtonDisplayState(overColor, size);
        upState        = new ButtonDisplayState(upColor, size);
        hitTestState   = upState;
        useHandCursor  = true;
    }
}

class ButtonDisplayState extends Shape {
    private var bgColor:uint;
    private var size:uint;

    public static const SHADOW:DropShadowFilter =
        new DropShadowFilter(0, 0, 0x000000, 1.0, 4, 4, 1, 1, false,
false, false);

    private static const GLOW:GlowFilter =
        new GlowFilter(0xFFFFFF, 0.8, 32, 32, 1, 1, true, false);

    public function ButtonDisplayState(bgColor:uint, size:uint) {
        this.bgColor = bgColor;
        this.size    = size;
        draw();
    }

    private static function brighten(color:uint, modifier:int):uint {
            var red   = (color >> 16) & 0xFF;
            var green = (color >> 8) & 0xFF;
            var blue  = color & 0xFF;
        
            red += modifier;
            if (red > 0xFF)
                red = 0xFF;
                
            green += modifier;
            if (green > 0xFF)
                green = 0xFF;
                
            blue += modifier;
            if (blue > 0xFF)
                blue = 0xFF;
        
            return (red << 16) | (green << 8) | blue;
    }

    private function draw():void {
        var colors:Array = [brighten(bgColor, 120), bgColor, brighten(bgColor, 
40)];
        var alphas:Array = [1, 1, 1];
        var ratios:Array = [0, 100, 255];
        var matrix:Matrix = new Matrix();
        matrix.createGradientBox(size, size, Math.PI / 2, 0, 0);

        graphics.beginGradientFill(GradientType.LINEAR, colors, alphas,
ratios, matrix);
        graphics.drawRoundRect(0, 0, size * 4, size, 4);
        
        filters = [ SHADOW, GLOW ];
    }
}
_______________________________________________
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders