Flex Examples

Here’s a handy little trick, compliments of the ColorUtil class. The ColorUtil class has a couple useful methods if you ever need to change a color’s brightness using either a linear brightness adjustment (ColorUtil.adjustBrightness()) or a scaled brightness adjustment (ColorUtil.adjustBrightness2()). Mind you, I have no idea what that linear brightness versus scaled brightness actually means, so I’ll show both methods side-by-side.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/24/adjusting-a-colors-brightness-using-the-colorutil-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        creationComplete="changeColorChip()">

    <mx:Script>
        <![CDATA[
            import mx.utils.ColorUtil;

            private function changeColorChip():void {
                /* ColorUtil.adjustBrightness() takes a bright
                    parameter between -255 and +255. */
                brite1 = slider.value;
                /* ColorUtil.adjustBrightness2() takes a bright
                    parameter between -100 and +100. */
                brite2 = int(slider.value / 255 * 100);

                var adjustedColor1:uint = ColorUtil.adjustBrightness(rgb, brite1);
                var adjustedColor2:uint = ColorUtil.adjustBrightness2(rgb, brite2);

                colorStr1 = rgbToHex(adjustedColor1);
                box1.setStyle("backgroundColor", adjustedColor1);

                colorStr2 = rgbToHex(adjustedColor2);
                box2.setStyle("backgroundColor", adjustedColor2);
            }

            private function rgbToHex(value:uint):String {
                var str:String = value.toString(16).toUpperCase();
                str = String("000000" + str).substr(-6);
                return str;
            }

            private function reset():void {
                colorPicker.selectedIndex = 0;
                slider.value = 0;
                changeColorChip();
            }
        ]]>
    </mx:Script>

    <mx:Number id="rgb">{colorPicker.selectedColor}</mx:Number>
    <mx:Number id="brite1" />
    <mx:Number id="brite2" />
    <mx:String id="colorStr1" />
    <mx:String id="colorStr2" />
    <mx:String id="lbl1">adjustBrightness(0x{rgbToHex(rgb)}, {brite1}) = 0x{colorStr1}</mx:String>
    <mx:String id="lbl2">adjustBrightness2(0x{rgbToHex(rgb)}, {brite2}) = 0x{colorStr2}</mx:String>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="RGB:" />
        <mx:ColorPicker id="colorPicker"
                change="changeColorChip()" />

        <mx:Spacer width="20" />

        <mx:Label text="Brightness:" />
        <mx:HSlider id="slider"
                minimum="-255"
                maximum="255"
                value="0"
                liveDragging="true"
                snapInterval="1"
                tickInterval="5"
                dataTipPrecision="0"
                width="100%"
                change="changeColorChip()" />

        <mx:Spacer width="20" />

        <mx:Button label="Reset"
            click="reset()" />
    </mx:ApplicationControlBar>

    <mx:HBox width="100%" height="100%">
        <mx:VBox width="50%" height="100%">
            <mx:Label text="{lbl1}"
                selectable="true" />
            <mx:Box id="box1"
                    width="100%"
                    height="100%" />
        </mx:VBox>

        <mx:VBox width="50%" height="100%">
            <mx:Label text="{lbl2}"
                selectable="true" />
            <mx:Box id="box2"
                    width="100%"
                    height="100%" />
        </mx:VBox>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.