Archive for the 'ColorPicker' Category

15
Jun

Using an embedded font with the ColorPicker control in Flex

The following example shows how you can use an embedded font with the Flex ColorPicker control by setting the fontFamily style.

Full code after the jump.

Continue reading ‘Using an embedded font with the ColorPicker control in Flex’

01
Jan

Changing the text field width for the ColorPicker control in Flex 3

In a previous example, “Changing the preview color width for the ColorPicker control in Flex 3″, we saw how you can change the preview color width for a ColorPicker control.

The following example shows how you can change the text field width in the ColorPicker control’s drop down swatch panel by setting the swatchPanelStyleName and textFieldWidth styles in Flex 3.

Full code after the jump.

Continue reading ‘Changing the text field width for the ColorPicker control in Flex 3′

01
Jan

Changing the preview color width for the ColorPicker control in Flex 3

The following example shows how you can change the preview color width in the ColorPicker control’s drop down swatch panel by setting the swatchPanelStyleName and previewWidth styles in Flex 3.

Full code after the jump.

Continue reading ‘Changing the preview color width for the ColorPicker control in Flex 3′

31
Dec

Toggling the text field in a Flex ColorPicker control

The following example shows how you can toggle the nested text field in a ColorPicker control’s swatch panel in Flex by setting the showTextField property.

Full code after the jump.

Continue reading ‘Toggling the text field in a Flex ColorPicker control’

30
Dec

Changing the ColorPicker control’s nested text field styles in Flex 3

The following example shows how you can customize the appearance of the ColorPicker control’s nested text field in Flex 3 by setting the textFieldStyleName style.

Full code after the jump.

Continue reading ‘Changing the ColorPicker control’s nested text field styles in Flex 3′

29
Dec

Changing the swatch grid background color for a ColorPicker control in Flex 3

The following example shows how you can set the swatch grid background color on a Flex 3 ColorPicker control by setting the swatchGridBackgroundColor style. You can also see how you can set the horizontalGap, and verticalGap styles using CSS.

Full code after the jump.

Continue reading ‘Changing the swatch grid background color for a ColorPicker control in Flex 3′

29
Dec

Changing the swatch highlight size for a ColorPicker control in Flex 3

The following example shows how you can set the swatch highlight size on a Flex 3 ColorPicker control by setting the swatchHighlightSize style. You can also see how you can set the swatchBorderColor, swatchBorderSize, and swatchHighlightColor styles using CSS.

Full code after the jump.

Continue reading ‘Changing the swatch highlight size for a ColorPicker control in Flex 3′

29
Dec

Changing the swatch border size for a ColorPicker control in Flex 3

The following example shows how you can set the swatch border size on a Flex 3 ColorPicker control by setting the swatchBorderSize style.

Full code after the jump.

Continue reading ‘Changing the swatch border size for a ColorPicker control in Flex 3′

27
Dec

Changing the Flex ColorPicker control’s swatch panel background color

The following example shows you how you can change the ColorPicker control’s background color in Flex 3 by setting the backgroundColor style using CSS and ActionScript.

Full code after the jump.

Continue reading ‘Changing the Flex ColorPicker control’s swatch panel background color’

12
Oct

Styling the ColorPicker control in Flex 3

I saw this come up on a list recently, so thought I’d share the answer with my loyal readership. Styling the ColorPicker control changed somewhat between Flex 2.0.1 and Flex 3. Now, instead of applying certain styles directly to the ColorPicker itself, you create a new custom style and assign the swatchPanelStyleName style on the ColorPicker. But enough of my rambling, code is worth 1000 words.

Full code after the jump.

Continue reading ‘Styling the ColorPicker control in Flex 3′

24
Aug

Changing the ColorPicker control’s easing duration and easing functions

The following example shows how you can control the easing duration and easing functions that the ColorPicker control uses to display its drop-down swatch palette. Of course, this probably isn’t the best example of “useful animation” and will probably just annoy users (the long 2 second easing animation), but it is nice to know that you can change these if you need to.

Full code after the jump.

Continue reading ‘Changing the ColorPicker control’s easing duration and easing functions’

13
Aug

Converting and formatting colors

Here’s a quick post on converting some colors from strings to integers, and splitting colors into separate red/green/blue values, and formatting colors using Flex.

Full code after the jump.

Continue reading ‘Converting and formatting colors’

31
Jul

Using the ColorPicker control’s 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.

Continue reading ‘Using the ColorPicker control’s colorField and labelField properties’