Mar 27 2010
uiColorPicker: Adding Drop Shadow To Popup Palette
The uiColorPicker control displays a single rectangular button that brings up a palette of pre-defined set of colors (also known as a color swatch). By default, this popup does not cast a drop shadow, as shown in the screenshot below:
In this post, we look at how to get the popup to cast a drop shadow, by simply adding some directives in the “rules.xml” of the theme you are using.
The uiColorPicker component uses three skin assets:
ColorPicker.png
ColorPickerFrame.png
ColorPickerInput.png
The ColorPicker.png is the image that will be used to render the rectangular button. This skin asset is mandatory. If it is missing, the component will not show.
The ColorPickerInput.png is optional, affecting the look of the text input field in the popup palette. This skin is usually pointed to the same skin asset used by the uiTextInput component:
<ColorPickerInput clone="TextInput" prefs="width|74|focusPadding|1|padding|0" />The ColorPickerFrame.png is the image that will be used to render the background of the popup palette. You can specify styling directives for the popup, such as padding, in the “rules.xml”:
<ColorPickerFrame edge="2" prefs="padding|3" />Therefore, to get the popup to cast a drop shadow, all you need to do is to add the directive as such:
<ColorPickerFrame edge="2" prefs="padding|3|background|shadow,0x000000" />The result will be as shown below:
Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management.
This is a pure AS3 library with no dependency on the Flex framework.
For more information, please click here.
You may experiment with the various features by downloading the trial version.
