Flex Examples » selectedColor http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Adjusting a color’s brightness using the ColorUtil class http://blog.flexexamples.com/2007/08/24/adjusting-a-colors-brightness-using-the-colorutil-class/ http://blog.flexexamples.com/2007/08/24/adjusting-a-colors-brightness-using-the-colorutil-class/#comments Sat, 25 Aug 2007 06:16:53 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/24/adjusting-a-colors-brightness-using-the-colorutil-class/ 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, [...]]]> 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.

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

 
]]> http://blog.flexexamples.com/2007/08/24/adjusting-a-colors-brightness-using-the-colorutil-class/feed/ 2 Using the ColorPicker control’s colorField and labelField properties http://blog.flexexamples.com/2007/07/31/using-the-colorpicker-controls-colorfield-and-labelfield-properties/ http://blog.flexexamples.com/2007/07/31/using-the-colorpicker-controls-colorfield-and-labelfield-properties/#comments Tue, 31 Jul 2007 15:56:08 +0000 Peter deHaan http://blog.flexexamples.com/2007/07/31/using-the-colorpicker-controls-colorfield-and-labelfield-properties/ In a previous post, “Formatting colors as strings with ActionScript“, A reader asked about the ColorPicker component. So here’s a quick little example of creating a ColorPicker control, as well as setting the labelField and colorField properties to display color names in the ColorPicker control.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white"> [...]]]> In a previous post, “Formatting colors as strings with ActionScript“, A reader asked about the ColorPicker component. So here’s a quick little example of creating a ColorPicker control, as well as setting the labelField and colorField properties to display color names in the ColorPicker control.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function intToHex(color:int = 0):String {
                var mask:String = "000000";
                var str:String = mask + color.toString(16).toUpperCase();
                return "#" + str.substr(str.length - 6);
            }
        ]]>
    </mx:Script>

    <mx:Array id="colorPicker_dataProvider">
        <mx:Object name="black" value="0x000000" />
        <mx:Object name="blue" value="0x0000FF" />
        <mx:Object name="green" value="0x008000" />
        <mx:Object name="gray" value="0x808080" />
        <mx:Object name="silver" value="0xC0C0C0" />
        <mx:Object name="lime" value="0x00FF00" />
        <mx:Object name="olive" value="0x808000" />
        <mx:Object name="white" value="0xFFFFFF" />
        <mx:Object name="yellow" value="0xFFFF00" />
        <mx:Object name="maroon" value="0x800000" />
        <mx:Object name="navy" value="0x000080" />
        <mx:Object name="red" value="0xFF0000" />
        <mx:Object name="purple" value="0x800080" />
        <mx:Object name="teal" value="0x008080" />
        <mx:Object name="fuchsia" value="0xFF00FF" />
        <mx:Object name="aqua" value="0x00FFFF" />
        <mx:Object name="magenta" value="0xFF00FF" />
        <mx:Object name="cyan" value="0x00FFFF" />

        <mx:Object name="halogreen" value="0x80FF4D" />
        <mx:Object name="haloblue" value="0x009DFF" />
        <mx:Object name="haloorange" value="0xFFB600" />
        <mx:Object name="halosilver" value="0xAECAD9" />
    </mx:Array>

    <mx:HBox width="{box.width}">
        <mx:ColorPicker id="colorPicker" dataProvider="{colorPicker_dataProvider}" colorField="value" labelField="name" editable="false" change="box.setStyle('backgroundColor', event.color);" />
        <mx:Label text="{intToHex(colorPicker.selectedColor)} {colorPicker.selectedColor}" />
    </mx:HBox>

    <mx:Box id="box" width="200" height="100" />

</mx:Application>

If you’re curious as to where I got the color names from, you can check out the colorNames object in the mx.styles.StyleManagerImpl class. The class isn’t listed in the documentation, but you can find it in the SDK source code at “frameworks\projects\framework\src\mx\styles\StyleManagerImpl.as”.

Happy Flexing!

 
]]> http://blog.flexexamples.com/2007/07/31/using-the-colorpicker-controls-colorfield-and-labelfield-properties/feed/ 0