Wednesday, 2 March 2011

AS3 colour picker tool

In this tutorial you will learn how to create a custom colour picker tool in Actionscript 3. The tool will display the sample colour from an image and also display the hexidecial value of the colour. For this tutorial you will need any image.

AS3 colour picker tool

Step 1

Open up a new AS3 file and import your image onto the stage by selecting File > Import > Import to stage. Convert your image into a movie clip (F8) and give it the instance name: image_mc.

Step 2

Next you need to create a dynamic text field on the stage with the Text tool and give it the instance name: output_txt. This text field will display the hexadecimal representation of the sampled colour.

Step 3

Select the rectangle tool with black colour fill and make a small rectangle shape on the stage. Then convert your shape into a movie clip (F8) and give it the instance name: colourBlock_mc. This block will show the colour of the current sampled area.

Step 4

On the timeline insert a new layer called Actions then open up the Actions panel (F9) and enter the following code.

//This creates a new instance of the BitmapData class with the
//width and height of the movie clip image.
var imageBitmap:BitmapData = new BitmapData(image_mc.width, image_mc.height);

//This draws the image onto the bitmapdata.

//Adds the mouse move event onto the stage.
stage.addEventListener(MouseEvent.MOUSE_MOVE, detectColour);

function detectColour(event:MouseEvent):void{

//The pixel values of the mouse x and y position
//of the bitmap is stored in a variable.
var dColour = imageBitmap.getPixel(mouseX, mouseY);

//The ColorTransform class changes the colour of the rectangle 
//to the colour at the mouse postion. 
var cTrans:ColorTransform = new ColorTransform();
cTrans.color = dColour;
colour_mc.transform.colorTransform = cTrans ;

//Display in hexidecial represenation with all uppercase characters.
output_txt.text = "0x"+dColour.toString(16);

Step 5

Test your movie Ctrl + Enter.

Now move your mouse cursor around the image and you should see the rectangle shape and the text field change values.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP