Use the ColorPicker to swap the theme

Experimentation with the ColorPicker component in flash.
This tutorial shows how to personalize a ColorPicker that let the user custom the interface.

View DemoDownload Source

Here is a preview of what we are going to create.

Screenshot

1. Create a new flash file (Actionscript 3.0).

2. Rename “layer 1” to “background”. Take the Rectangle Tool and draw a black rectangle the same size of the stage that you place at (0,0). Convert it to a movie clip and give it an instance name of “bg_mc”.

3. Add a new layer and call it “shape”. Draw a shape as you like and fill it with white. In our case we have imported an .ai (Adobe Illustrator) file. Convert it to a movie clip with instance name of “shape_mc”.

4. Create a new layer named “colorpickers”. Open your components window.
Screenshot
Drag 2 colorpickers on the stage, one to change the background’s color for which you give an instance name of “cpBg” and the second one to change the color of the shape with an instance name of “cpShape”.

5. Next we need to add the actionscript code. Create a new layer at the top named ‘actions’ and lock it. Open the actions panel.

6. First we customize the color Picker by setting some of its properties and specially as we don’t want to show a lot of colors we set its colors property which is an array to the custom colors that we want the component to provide.
Then we add an event listener for the CHANGE event that is dispatched when the user clicks a color in the palette. Don’t forget to make the import:

import fl.events.ColorPickerEvent;

cpBg.colors = [0x000000,0xFFFFFF,0x000099,
	            0x990000,0xFF6600,0xFFFF00,
	            0x00FF00,0x663300,0x9900CC]; 
cpBg.selectedColor = 0x000000;
cpBg.showTextField = false;

cpBg.addEventListener(ColorPickerEvent.CHANGE,changeColorBg);

7. The function changeColorBg that handles the event must change the color of the “bg_mc” movie clip to the one the user has selected in the palette.
To change the color, we use a ColorTransform object – we set its color property to the selected color – which we assign to the transform.colorTransform property of “bg_mc”.

function changeColorBg(evt:ColorPickerEvent):void {
	var newColorTransform:ColorTransform = bg_mc.transform.colorTransform;
	newColorTransform.color = evt.color;
	bg_mc.transform.colorTransform = newColorTransform;
}

8. We’re done with the background. Follow the same principle for “shape_mc”.

9. You should have the following code :

import fl.events.ColorPickerEvent;

cpBg.colors = [0x000000,0xFFFFFF,0x000099,
		    0x990000,0xFF6600,0xFFFF00,
		    0x00FF00,0x663300,0x9900CC]; 
cpBg.selectedColor = 0x000000;
cpBg.showTextField = false;

cpShape.colors = [0xFFFFFF,0x000000,0x000099,
			 0x990000,0xFF6600,0xFFFF00,
			 0x00FF00,0x663300,0x9900CC]; 
cpShape.selectedColor = 0xFFFFFF;
cpShape.showTextField = false;

cpBg.addEventListener(ColorPickerEvent.CHANGE,changeColorBg);
cpShape.addEventListener(ColorPickerEvent.CHANGE,changeColorShape);

function changeColorBg(evt:ColorPickerEvent):void {
	var newColorTransform:ColorTransform = bg_mc.transform.colorTransform;
	newColorTransform.color = evt.color;
	bg_mc.transform.colorTransform = newColorTransform;
}

function changeColorShape(evt:ColorPickerEvent):void {
	var newColorTransform:ColorTransform = shape_mc.transform.colorTransform;
	newColorTransform.color = evt.color;
	shape_mc.transform.colorTransform = newColorTransform;
}

10. Test the movie to see it in action.

3 thoughts on “Use the ColorPicker to swap the theme

  1. John

    Hi! i was just wandering, how do you pass the hex value of the color picker to a variable and allow an event to catch that variable and apply it. e.g.

    lets say we’re using the function MouseEvent.CLICK. So the color would only change by the time you click a button.

Leave a Reply

Your email address will not be published. Required fields are marked *