Color Chooser
| Category | : Flash | Views | : 24325 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : color-chooser.zip | ||
| Result | : See the result | ||||
setRGB() uses "0x" plus the hexadecimal number of a color, but getPixel() returns a decimal number, so we use "toString(16)" to convert it to a number with base 16(hexadecimal).
//if the user clicks the image
image.onRelease = function()
{
//gets the hexadecimal value
color = colorBitmap.getPixel(_xmouse, _ymouse).toString(16).toUpperCase();
//make the text box display the code for the color
_root.colorTxt.text = "#" + color;
//changes the Movie Clip color
mcColor.setRGB("0x" + color)
}
//if the mouse leaves the image Movie Clip
image.onRollOut = function()
{
//set the Movie Clip color to the previously selected color
mcColor.setRGB("0x" + color)
}
"0x" + "color" will be the code for the selected color, "0x" is used to indicate that it痴 a hexadecimal value.
This is very simple and cool feature for customizations.
Code Explanation
import flash.display.BitmapData;
colorBitmap = BitmapData.loadBitmap("colors");
_root.createEmptyMovieClip("image", 5);
image.attachBitmap(colorBitmap, 5);
image.useHandCursor = false;
The line above set the property "useHandCursor" to false so we use the standard mouse cursor.
mcColor = new Color(userColor);
This line links the color object mcColor to the Movie Clip userColor. If we change the color object the color of the Movie Clip will also be changed.
_root.onEnterFrame = function()
{
if (colorBitmap.getPixel(_xmouse, _ymouse) != 0)
{
If the function getPixel return 0 the mouse is not over the image and there is no need to run the line below.
mcColor.setRGB("0x" + colorBitmap.getPixel(_xmouse, _ymouse).toString(16));
}
}
Set the color of the mcColor object to the color in the _x and _y position of the mouse.Function getPixel:
getPixel(x, y);
Return a decimal number correspondent to the color of the pixel in the _x and _y position.As we need to use a hexadecimal value in setRGB we use .toString(16) to convert the number returned from this function into a hexadecimal.
Function setRGB:
setRGB(color in hexadecimal);
Set the color of a Color object using and hexadecimal value.
image.onRelease = function()
{
color = colorBitmap.getPixel(_xmouse, _ymouse).toString(16).toUpperCase();
If the user clicked on the image get the color from the mouse position.
_root.colorTxt.text = "#" + color;
Set the text to the color value.
mcColor.setRGB("0x" + color);
}
Set the color of the userColor Movie Clip.
image.onRollOut = function()
{
mcColor.setRGB("0x" + color)
}
On rollout set the color of the userColor Movie Clip to the color chosen by the user.More cool tech articles from other blogs.
