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!
Setting up the environment
- 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).
- Give the color picker an instance name of “myColorPicker”.
- 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.
- Give your movie clip an instance name of “myStar”.
- Now let’s make the bottom text boxes. In the bottom left corner, draw a dynamic text field and type “Current color selected:”.
- . 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
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
January 8, 2011 at 9:19 am
Hi
When I try this, the output comes up with “ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::DisplayObjectContainer/removeChild()
at fl.controls::ColorPicker/close()
at fl.controls::ColorPicker/onPopupButtonClick()”
How can I fix this?
January 20, 2011 at 5:40 am
I would like to have 3 color pickers on the stage. Each will change the color of a different part of a logo. To make it easy I have named each instance myStar1, myStar2 and myStar3. I have named each color picker and each of dynamic text boxes. If I duplicate the code you provided (x3), I get duplicate function errors. Is there a way to do this?
Thanks for any help.
Dan