Overview | Properties | Methods | Events | Styles | XML

A complete skin for the Color Picker Pro V3 component contains three movie clips in the Library (and not on the Stage), one for each mode of the component: button, easy and pro. Each of the three movie clips have to meet a few conditions, listed below.

1. The button mode clip

This clip is supposed to act like a button with four states: up, over, down and disabled. Each state is represented by a movie clip or a graphic symbol. All of these movie clips are required to exist in the button mode clip, and, for the button to function as required, each of the four movie clips have to have a specific name: "buttonUp" - for the up state clip, "buttonOver" - for the over state clip, "buttonDown" - for the down state clip and "buttonDisabled" - for the disabled state. The four movie clips should be positioned in separate layers in the first frame of the button mode clip. Along with these four clips, the button clip can display the currently selected color. This can be done by inserting into the button clip, another movie clip called "newColor" (this is optional). This can be a simple shape, since the entire clip will be colored with the selected color. This movie clips should be positioned on top of the movie clips representing the four states of button, on the first frame of the button mode movie clip. The button mode clip has to have the linkage id of "Default_style1_ButtonMode".

2. The easy mode clip

This should be a simple version of a color picker. You can create any design you wish for this clip and implement it taking into consideration a few constraints. Like the button mode clip, the easy mode clip is composed of a few movie clips that are required to have a specific name. The linkage id for the easy mode clip should be "Default_style1_EasyMode".

The background clip represents the background of the color picker and may contain the design elements that are not relevant to the functions of the component. This clip should be called "backgroundClip".

The drag bar clip [optional] is the clip used to drag the color picker around the Stage. Usually it is located in the top of the easy clip and has the name "dragBar".

The color palette is the clip that contains the colors used for color picking. This clip can be anything from multiple colored shapes to images. It's name must be "colorPalette".

The newly selected color [optional] is displayed in a movie clip called "newColor". This can be a simple shape, since the entire clip will be colored with the selected color.

The switch mode button [optional] is used to switch from easy mode to pro mode and is a movie clip or button called "switchModeButton".

The close button [optional] is used to close the easy clip, without saving the selected color. This is a movie clip or button called "closeButton".

The hexadecimal text field [optional] is used to display the value of the color in hexadecimal mode. This text field should be called "colorValue".

The disabler [optional] is a movie clip, used to disable the easy mode clip. This movie clip has to be on top of any other symbol in the easy mode clip and it has to be called "disabler". It consists of a white shape with an alpha value of 60%, which gives the easy clip a "disabled look".
 

3. The pro mode clip

Just like the other two modes, this clip contains multiple movie clips with specific names. The difference from the easy clip is that this one represents a more advanced color picker, with possibility to display RGB, HSL and CMYK values. Furthermore, this mode contains the SliderControlV3 and NumericSliderProV3 components which also have to have their skins defined. The linkage id for the pro mode clip is "Default_style1_ProMode".

The background clip represents the background of the color picker and may contain the design elements that are not relevant to the functions of the component. This clip should be called "backgroundClip".

The drag bar clip [optional] is the clip used to drag the color picker around the Stage. Usually it is located in the top of the pro clip and has the name "dragBar".

The color palette is the clip that contains the colors used for color picking. This clip can be anything from multiple colored shapes to images. It's name must be "colorPalette".

The current color (the previously selected color) [optional] is displayed in a movie clip called "currentColor". This can be a simple shape, since the entire clip will be colored with the selected color.

The newly selected color [optional] is displayed in a movie clip called "newColor". This can be a simple shape, since the entire clip will be colored with the selected color.

The switch mode button [optional] is used to switch from pro mode to easy mode and is a movie clip or button called "switchModeButton".

The hexadecimal text field [optional] is used to display the value of the color in hexadecimal mode. This text field should be called "colorValue".

The Ok and Cancel buttons are required to close the pro clip when the user selected a color from the color palette. Each one is a movie clip or button called "okButton" and "cancelButton". The ok button closes the pro clip and saves the selected color and the cancel button closes the pro clip without saving the selected color.

The Copy button [optional] copies the hexadecimal value of the color into the Clipboard, to be used in other applications. This is a movie clip or button called "copyButton".

The gradient slider [optional] is used to change the luminosity of a chosen color. This is a SlideControlV3 component and it is called "gradientSlider" (must be use together with the color gradient movie clip).

The color gradient [optional] is a rectangle shaped movie clip, called "colorGradient", in which a color gradient is generated each time the new color changes. This clip is positioned usually over the gradient slider. The gradient color must be drawn vertically and, if the  gradient slider is positioned at an angle larger than 0 degrees, it must be rotated to match that angle, so the gradient can be displayed correctly (must be used together with the gradient slider).

The RGB, CMYK and HSL values [optional] are NumericSliderProV3 components with the following names: "redValue", "greenValue", "blueValue", "cyanValue", "magentaValue", "yellowValue", "blackValue", "hueValue", "saturationValue" and "luminosityValue".
These components have a few parameters which have to be set by the user:

• minumum: the minimum value for the numeric slider
• maximum: the maximum value for the numeric slider
• spacing: the space between the top/bottom side of the slider bar and the actual area where the slider button moves; this spacing can have the value 0 or more, depending on the design of the NumericSliderProV3 component

Values for the minimum and maximum properties:

Component name	Minimum value	Maximum value
redValue	0	255
greenValue	0	255
blueValue	0	255
cyanValue	0	100
magentaValue	0	100
yellowValue	0	100
blackValue	0	100
hueValue	0	359
saturationValue	0	100
luminosityValue	0	100

The disabler [optional] is a movie clip, used to disable the easy mode clip. This movie clip has to be on top of any other symbol in the easy mode clip and it has to be called "disabler". It consists of a white shape with an alpha value of 60%, which gives the easy clip a "disabled look".

Skinning the SliderControlV3 component

This component is used for the gradient slider, in the pro mode clip of the color picker. It consists of a slider bar and a slider button. The slider bar has three states: normal, over and disabled. Each state has to correspond to a movie clip in the Library, with the following linkage ids:
"Default_style1_GradientSliderNormal",
"Default_style1_GradientSliderOver" and
"Default_style1_GradientSliderDisabled".

The slider button has four states (up, over, down and disabled) which have to correspond with movie clips in the Library having the linkage id's of: "Default_style1_GradientSliderButtonUp",
"Default_style1_GradientSliderButtonOver",
"Default_style1_GradientSliderButtonDown" and
"Default_style1_GradientSliderButtonDisabled".

Skinning the NumericSliderProV3 component

This component consists of multiple movie clips used as component states and a SliderControlV3 component which provides the sliding capabilities. The numeric slider has four states (up, over, down and disabled) and each state have to correspond to a movie clip in the Library, with the following linkage ids:
"Default_style1_NumericSliderUp",
"Default_style1_NumericSliderOver",
"Default_style1_NumericSliderDown" and
"Default_style1_NumericSliderDisabled".

To skin the slider component, you must use method presented in the previous paragraph with movie clips having the following linkage ids:
"Default_style1_SliderBarNormal",
"Default_style1_SliderBarOver",
"Default_style1_SliderBarDisabled",
"Default_style1_SliderButtonUp",
"Default_style1_SliderButtonOver",
"Default_style1_SliderButtonDown" and
"Default_style1_SliderButtonDisabled".

Extending the functionality of the color picker

The color picker functionality can be extended by writing actions directly in the button, easy and pro mode clips. This way, a more complex design can be created, for example a design consisting of multiple panels containing different components of the color picker, panels which can be opened and closed separately (the case of the CMYK panel in the Default theme).

Notes:

The disabled state of the NumericSliderProV3 and SlideControlV3 components is not used, since none of them enters in the disabled state. In the easy and pro mode movie clips, the disabler clip "disables" the component and prevents user interaction. And, for the components to function correctly there's only need for the normal state clip and up state clip, the rest of the component states will display the movie clip used for the normal state of the slideControlV3's slider bar and the up state of SlideControlV3's slider button and NumericSliderProV3's up state.

If a movie clip contains shapes and images, the images will not display correctly. In this case, the images should be transformed into symbols.

In case the user wants to create a new theme, the name in the linkage id should change according to that theme's name from "Default_style1_ClipId" to "ThemeName_style1_ClipId".
The theme component should have a class associated which contains the method to create the color picker's styles object.
The easyClip and proClip disablers take the size of the background clip of each movie clip. This means that, in case one of the easy or pro clips consist of multiple panels that can be turned on and off, these panels should all be placed inside the clip called backgroundClip and use ActionsScript to show or hide the panels (clip._visible = true/false for AS 2.0 and clip.visible = true/false for AS 3.0). When one of those panels is hidden, the clip that contains the panels should be scaled down to 0 (clip._xscale/_yscale = 0 for AS 2.0 and clip.scaleX/scaleY = 0 for AS 3.0) and when it's turned visible, should be scaled to 100 (clip._xscale/_yscale = 100 for AS 2.0 and clip.scaleX/scaleY = 100 for AS 3.0), so the size of the background clip could be returned correctly (normally a movie clip's size takes into consideration all the composing movie clips regardless of their visibility).

Restrictions

In order to have the color gradient correctly drawn at any angle, it should be created by the user in the vertical position and than rotated to the desired angle.
When the NumericSliderProV3 and SliderControlV3 components are placed into the pro clip design, the user must set the properties for those components (minimum, maximum values and spacing are the most important properties). Also, the movie clips used as skin for the NumericSliderProV3 component should contain only shapes and movie clips (not bitmap images - jpg or png) - if the user needs to have images embedded into the skins, those images should be, first, transformed into movie clips and then added to the skin clips.

This component is using Macromedia's DepthManager class to open the easy and pro clips on the correct depths, in this case it is recommended for the user to use the same DepthManager class in his flash clip, and otherwise the application might not work correctly.

The user should explicitly set the scale mode for the Stage to "showAll", "noBorder" or "exactFit", in order for the color picking to work properly, when the color source is "stage" and the component is attached to the Stage by ActionScript.

Overview | Properties | Methods | Events | Styles | XML