While updating the Gumbo-Components on this blog to flex 4 final I noticed that the style-property baseColor has been changed to chromeColor.

In addition to this the flag useChromeColor can be set to tell the SparkSkin to use chromeColor for colorization. For custom skins this can be set by overriding initializationComplete() in the skin.

override protected function initializationComplete():void  {
 
	useChromeColor = true;
	super.initializationComplete();
}

Internally Flex checks this flag in updateDisplayList() of a SparkSkin and uses the value in chromeColor for colorization (respecting exclusions in get colorizeExclusions()).

If you are using Gumbo-Components from this blog that use baseColor be sure to make these adjustments.

update: Check this example for a more advanced and generic approach

Here’s an example of a Spark Icon Button done in Flex 4. There are smooth transitions on the background gradient between the up and over states. From the over state to the down state the shadows are removed smoothly. Each button has a different base color.

Click here for a demo.

Apart from the new skinning architecture there are a couple of (more…)

Here’s an example of how to enhance the default Spark CheckBox. This example uses a mark for the unchecked states and one for the checked states. Some simple transitions are used to make things a little bit nicer.

The skin uses two additional properties (symbolColorChecked,  symbolColorUnchecked) for the (more…)

Here’s a little example of a ToggleButtonSkin that uses some effects to create a subtle chrome-impression when the button is selected.

The gradient is calculated from the backgroundColor-Style of the host component. Then in selected state some Tint and Animate effects are applied to the Strokes that make up the border.

Click here for the example. Needs flash player 10 (beta).

Here’s the source for the (more…)