ActionScript 3 Color Picker

February 6, 2009 by: smonte

In this tutorial, I’ll show you how to change a movie clip’s color with ActionScript 3.0 using the color picker. So start up your Flash and let’s learn something new! At least I hope so…

Setting up the environment

1. First we add the color picker to the stage. In your “Components” window, drag the “ColorPicker” to the top left corner of the stage. If you don’t see the “Components” window, select Window -> Components (Ctrl + F7).

2. Give the color picker an instance name of “myColorPicker”.

3. Now draw a movie clip to the stage. It doesn’t matter what you draw, just make it white since that’s our starting color. I drew a star using the PolyStar Tool.

4. Give your movie clip an instance name of “myStar”.

5. Now let’s make the bottom text boxes. In the bottom left corner, draw a dynamic text field and type “Current color selected:”.

6. Draw another dynamic text field next to the first one. Don’t write anything there, just give it an instance name of “myCurrentColor”. We’ll be changing the text dynamically from ActionScript.

Moving into ActionScript 3.0

6.Create a layer for ActionScript and type the following.

import fl.events.ColorPickerEvent;
import flash.geom.ColorTransform;
 
//Set the color to white at the beginning
myColorPicker.selectedColor = 0xffffff;
 
// Get access to the ColorTransform instance associated with star.
var colorInfo:ColorTransform = myStar.transform.colorTransform;
 
//Add a listener that dispatches an event when user selects a new color
myColorPicker.addEventListener (ColorPickerEvent.CHANGE, colorChanged);
 
function colorChanged (e:ColorPickerEvent):void {
 
        // Set the color of the ColorTransform object.
        colorInfo.color = myColorPicker.selectedColor;
 
        // apply the change to the display object
        myStar.transform.colorTransform = colorInfo;
 
        //Show the selected color in the text field
        myCurrentColor.text = myColorPicker.hexValue;
}

You are done, hope you enjoyed this Flash ActionScript 3 tutorial. If you have any questions concerning the tutorials, please visit the forum.

Related tutorials:

Filed under: ActionScript 3 Basics
Tags: ActionScript 3 Basics

Comments (5)

Comments

5 Responses to “ActionScript 3 Color Picker”

Nitin says:

August 24, 2009 at 4:06 am

Can you please tell me, how I can limit the colors of colorPicker component.

Log in to Reply
bindu says:

July 24, 2009 at 5:31 am

Please tell hoe to make advanced color picker in AS3.

Log in to Reply
natwarg says:

June 24, 2009 at 3:09 am

Please tell hoe to make advanced color picker in AS3.

Log in to Reply
jumper says:

May 15, 2009 at 5:50 pm

thanks by the tutorial from mexico!

Log in to Reply
max says:

February 19, 2009 at 9:48 pm

i tried this script but got up with this error. please help me to overcome it..

TypeError: Error #2007: Parameter text must be non-null.
at flash.text::TextField/set text()
at ActionScript_smp01_fla::MainTimeline/colorChanged()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at fl.controls::ColorPicker/fl.controls:ColorPicker::onSwatchClick()

Log in to Reply

You must be logged in to post a comment.