how to apply color picker component

[evan]

is there a basic tutorial that describes how to implement the colorpicker compenent or a simple example.

http://www.flashandmath.com/basic/mousedraw/index.html

is a good one but I want to see it in a very bare-bones application -I could use their code and alter it but I want to be more flexible.

[Medyman]

The Flash & Math tutorial is the only one I've ever seen on it. A quick Google search (which I"m sure you've done as well) doesn't turn up anything of use.

Quite honestly, the F&M tutorial is fairly bare bones. You can strip the erase functions to make it easier to read.

The only other resource I would recommend are the AS3 Livedocs. There are some examples there. They're not too much different from F&M's tutorial though. The docs are here. Info on the ColorPicker component are in Using AS 3.0 Components > Using UI Components > Using the ColorPicker

[evan]

Thanks much,

The reason for my question -was that while that example is priceless being open sourced and well commented -is the only way I see it applied is to an API drawing tool it's pretty nifty and elimitates alot of coding........but it only shows one way to use it.

I wonder if it can be used to be applied to Movie clip instances, I'm beginning to doubt it though.

If I want a colorpicker to work (from a user perspective) with all tools -both the ones I create with movieclips and the API, I may need to do it another way.

[Medyman]

The reason that the Drawing API is probably used in these examples is because that's the most logical use for the color picker. The methods of the ColorPicker UI component aren't specific to the Drawing API, though.

You can use the color out of the ColorPicker in any method that requires a color.

As I posted in your other thread, to change the color of movieclips, you have to use the ColorTransform class.

For example, say you have a movieclip with a linkage id of "Box". Also, there should be a ColorPicker UI component with an instance name of colorPicker. I'm going to attach "Box" to the stage, then change it's color based on selections from the colorPicker.

import fl.events.ColorPickerEvent;

// Attach "Box" to stage
var box:MovieClip = new Box();
addChild(box);

colorPicker.addEventListener(ColorPickerEvent.CHANGE,changeColor);

function changeColor(event:ColorPickerEvent):void {
	// Transform Color
	var colorTransform:ColorTransform = box.transform.colorTransform;
	colorTransform.color = event.target.selectedColor;
	box.transform.colorTransform = colorTransform;
}

Does that make sense to you?

[evan]

And you made it look so easy!-yes it makes a ton of sense!!!!

I may as well demonstrate I have been tyring to play with this script from the documentation.

From this I can see it was possible because it reffers to an instance from the library -the textbox so it stood to reason you could do it with a movieclip.

/*The following example uses the ColorPicker() constructor and addChild() to create a ColorPicker on the Stage. It sets the colors property to the color values for red (0xFF0000), green (0x00FF00), and blue (0x0000FF) to specify the colors that the ColorPicker will display. It also creates a TextArea and each time you select a different color in the ColorPicker, the example changes the color of the text in the TextArea to match.*/

//To create a ColorPicker using ActionScript:
//Create a new Flash file (ActionScript 3.0) document.
//Drag the ColorPicker component from the Components panel to the Library panel.
//Drag the TextArea component from the Components panel to the Library panel.
//Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript //code:
import fl.controls.ColorPicker;
import fl.controls.TextArea;
import fl.events.ColorPickerEvent;

var aCp:ColorPicker = new ColorPicker();
var aTa:TextArea = new TextArea();
var aTf:TextFormat = new TextFormat();

aCp.move(100, 100);
aCp.colors = [0xff0000, 0x00ff00, 0x0000ff];
aCp.[addEventListener(ColorPickerEvent.CHANGE, changeHandler);

aTa.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus quis nisl vel tortor nonummy vulputate. Quisque sit amet eros sed purus euismod tempor. Morbi tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur diam. Suspendisse at purus in ipsum volutpat viverra. Nulla pellentesque libero id libero.";
aTa.setSize(200, 200);
aTa.move(200,100);

addChild(aCp);
addChild(aTa);

function changeHandler(event:ColorPickerEvent):void {
if(TextFormat(aTa.getStyle("textFormat"))){
aTf = TextFormat(aTa.getStyle("textFormat"));
}
aTf.color = event.target.selectedColor;
aTa.setStyle("textFormat", aTf);
}

I'll mess with the example you gave me and see what happens