Color name to uint value

Filing under the “why didn’t I find this before” folder. On the Adobe Flex forums, there was a question about changing the color value of a button based on a switch statement. The user was trying to change the value to “Red”, “Yellow” or “Green”. In the button, the type for color is uint value, so the input needs to be something like “0×990000″ for “Red”. I usually just insert in the uint value for a color and not the name, since I usually have to change it. But, this question on the forum got me thinking and searching for an answer. The simple answer is the IStyleManager2, which allows you to get the uint value of a color name. Presto!

Here’s the reply to the user’s question that I have been attempting to post to the forum.


First set a declaration of the variable. I am setting the default value to Black in uint value.

<fx:Declarations> <fx:uint id="batteryStatusColor">0x000000</fx:uint></fx:Declarations>

This will allow you to bind it to your button parameter.

<s:Button id="Battery" x="791" y="513" width="124" height="46" 
label="Battery" fontSize="20" color="{batteryStatusColor}" />

Then, in your function, make sure you convert the String value of the color to a uint

private function changeBatteryStatusColor(batteryStatus:int):void {
	var tmpColorString:String = "Black";
	switch(batteryStatus)
	{
		case 1:                                                                                                                 
			tmpColorString = "Red";                                                                                          
			break;
		case 2:                                                                                                                 
			tmpColorString = "Green";
			break;
		default:                                                                                                                 
			tmpColorString = "Yellow";                                                                                                    
			break;                   	
	}   
	
	var newStyleManger:IStyleManager2 = StyleManager.getStyleManager(this.moduleFactory);	
	batteryStatusColor = newStyleManger.getColorName(tmpColorString);
}

The key part is the IStyleManager call that converts the String value of the color to a uint.

Update to Egg Timer

On one of my projects at work I ended up using two Egg Timers but in different states. Since it would be easier to know if the correct Egg Timer was in the correct state, I added a couple of new parameters to the Egg Timer.

<fx:Declarations>
	<fx:uint id="backgroundColor">0xFFFFFF</fx:uint>
	<fx:uint id="faceColor">0xFF0000</fx:uint>
	<fx:uint id="bezelColor">0xcccccc</fx:uint>
</fx:Declarations>

Then I replaced the static colors with these defined variables to make it work.

timerBackground = new Sprite();
timerBackground.graphics.lineStyle(3, bezelColor);
timerBackground.graphics.drawCircle(0,0,timerSize);
timerBackground.graphics.endFill();
timerBackground.filters = [bevelfilter, glowFilter];
				
backGroundCircle = new Sprite();
backGroundCircle.graphics.beginFill(faceColor);
backGroundCircle.graphics.drawCircle(0,0,timerSize);
backGroundCircle.graphics.endFill();
backGroundCircle.filters = [dropShadow];

After those simple changes, the Egg Timer parameters can easily be added when placing the component.

<components:EggTimer id="eggTimer5" backgroundColor="0xCCFFFF" bezelColor="0x6600FF" />

Fairly simple. Since the color parameters are already set as uint, there is no for any further conversion to make the color. I also added a style sheet to the example to help with the color coding for the site.