ActionScript 3 Color Picker

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.