Hello all,

thank you for your replies.

I've added another Shape on top of my gradient
and set its blendMode to BlendMode.OVERLAY
and am finally satisfied with the result (except
the downState - red doesn't look good there
for some reason. The overlay is too bright there)...

Your suggestion with BevelFilter, Cor, is a good
trick too - thank you. It just doesn't match my
case, I want to make a long bar of glossy buttons.

I'm pasting my source code below for
the archives and if someone is interested.

I wonder if the treshold for OVERLAY can
be changed (through setting DisplayObject's
alpha?) or if it's always at 50%?

Regards
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 overColor:uint = 0xFFCC00;
    // this one still doesn't look good:
    private var downColor:uint = 0xFF6666;
    private var upColor: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 Sprite {
    private var bgColor:uint;
    private var size:uint;

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

    private static const GLOW:GlowFilter =
        new GlowFilter(0xFFFFFF, 0.8, 40, 40, 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:int   = (color >> 16) & 0xFF;
            var green:int = (color >> 8) & 0xFF;
            var blue:int  = color & 0xFF;
        
            red += modifier;
            if (red > 0xFF)
                red = 0xFF;
            else if (red < 0)
                red = 0;
                
            green += modifier;
            if (green > 0xFF)
                green = 0xFF;
            else if (green < 0)
                green = 0;
                
            blue += modifier;
            if (blue > 0xFF)
                blue = 0xFF;
            else if (blue < 0)
                blue = 0;
        
            return (red << 16) | (green << 8) | blue;
    }

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

        graphics.beginGradientFill(GradientType.LINEAR, colors, alphas,
ratios, matrix);
        graphics.drawRoundRect(0, 0, size * 4, size, 4);
        
        overlay.graphics.beginFill(0xFFFFFF, 0.6);
        overlay.graphics.drawRoundRect(0, 0, size * 4, size / 3, 8);
        overlay.graphics.endFill();
        overlay.blendMode = BlendMode.OVERLAY;
        addChild(overlay);

        filters = [ SHADOW, GLOW ];
    }
}
_______________________________________________
Flashcoders mailing list
[email protected]
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

Reply via email to