Sunday, 11 October 2009

Limit colours in the colourPicker component

In this tutorial you will learn how to limit the amount of colour swatches in a colour picker component. This means if you only want certain colour in your component, you can set these colours. To limit the colour swatches you need to use the ‘colors’ properties from the colourPicker component. I have limited the colours to red, yellow, green, and blue in the example below.

Limit colours in the colourPicker component

Step 1

Open a new AS3 Flash file.
Select Window > Components and drag the ColorPicker component into the library.

Step 2

On the timeline insert a new layer called ‘Actions’ and enter the following code in the actions panels. To limit the colours you will need to change the hexadecimal numbers highlighted in red below. You can find the hexadecimal numbers of the colours by clicking on either the stroke or paint bucket palette on the tool box, and the hovering over the colours.

//Import the packages needed.
import fl.events.ColorPickerEvent;
import fl.controls.ColorPicker;
import flash.geom.ColorTransform;

/*Creates a new instance of the a sprite class which fills the whole stage area
in black colour, and add the display object at the bottom position (index 0).*/
var bgColour:Sprite = new Sprite();
bgColour.graphics.beginFill(0x000000);
bgColour.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
addChildAt(bgColour,0);

//Creates a new instances of the colour picker class.
var mycolorPicker:ColorPicker = new ColorPicker();

//Limit the colours to red, yellow, green, and blue.
mycolorPicker.colors = [ 0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00];

/*Moves the colour picker to (20,20) and set the size to (50,50) and add the
component on the stage.*/
mycolorPicker.move(20, 20);
mycolorPicker.setSize(50, 50);
addChild(mycolorPicker);

//Add the change event to the colour picker.
mycolorPicker.addEventListener(ColorPickerEvent.CHANGE, changeBg);

function changeBg (event:ColorPickerEvent):void {
//Creates a new instance of the ColorTrasform class.
var myColorTransform:ColorTransform = bgColour.transform.colorTransform;

//An instance of selected colour from the colour picker.
var theColor:Number=mycolorPicker.selectedColor;

//Sets the new colour from the colour picker.
myColorTransform.color=theColor;

//Apply the colour changes to the movie clip.
bgColour.transform.colorTransform=myColorTransform;
}

Step 3

Test your movie clip Ctrl + Enter. Now try clicking the colour picker and you should only see four colours in the palette.



You should be able to limit the swatches in the colourPicker component

1 comments:

Odiousfunk 29 March 2011 at 10:06  

Thanks for the toot... Helped me a great deal.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP