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.
<?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.
{ 1 comment… read it below or add one }
The difference between the linear and scaled brightness is that linear adds increases the brightness in all three colors (RGB) by the same amount, regardless of individual value of each of the colors. The scaled adjustment increases the brightness by the amount proportional to the color’s numeric value.
In your example the default value for the color is OxFFFFFF, which means that both of the adjustment methods will produce the same effect. If you choose a color other, which mixes different amount of each of the colors you will see the difference.
Generally speaking the scaled adjustment is better if you need to preserve the color tone.