Wednesday, 8 June 2011

Custom Colour picker in Actionscript 3

In this tutorial you will learn how to create a custom Colour picker using only Actionscript 3 code. I have used two classes to create the color picker: Colourpick and Palette. The first class sets up the background rectangle, selector box and the text field. And the second class generates the palette of colours.


Custom Colour picker in Actionscript 3


Step 1 - embed font

Open a new AS3 file and save it with the name: Colour picker. In the library, right click on the background and select: 'New Font…' A Font embedding window should open up. Change the font family to a font of your choice I have used the Calibri font. Embed the Uppercase, and Numeral glyphs and also include a '#' character. Then in the linkage section, tick the Export to Actionscript button, leave the default Class name as: Font1 and click ok.


Step 2 - Colourpick class

Open a new AS3 class file with the name: Colourpick and firstly type out the necessary classes (import statements) and the static variables.

package {
           import flash.display.Sprite;
           import flash.events.MouseEvent;
           import flash.events.Event;
           import flash.display.Shape;
           import flash.text.*;
           import flash.display.Loader;
           import flash.net.URLRequest;

           public class Colorpick extends Sprite {
                                               
                public static var blockSelect:Sprite;
                public static var tf:TextField;
                       
                public function Colorpick() {
                       
                }

           }
}

To begin, you need to create the white rectangle box for the Colour picker’s background. I have used the drawRect() method to draw a rectangle with 90 pixels width and 20 pixels height. And use the lineStyle() method to create a 1 pixel black border around the rectangle. Now, add the code below inside the constructor.

var bg:Shape = new Shape();
bg.graphics.lineStyle(1, 0x000000);
bg.graphics.beginFill(0xFFFFFF);
bg.graphics.drawRect(0,0,90,20);
bg.graphics.endFill();
addChild(bg);           

Next you add a new instance of the Palette class. This class will be created later on. I have offset the Palette’s y position by 25 pixels, so it appears underneath the white rectangle. And set the Palette to be initially invisible.

var colourBlocks: Palette = new Palette();
colourBlocks.visible = false;
colourBlocks.y = 25;
addChild(colourBlocks);        

You now need to add a selector block which is use to show and hide the palette. I have used the first value from the coloursArray as the initial colour of the selector block.

blockSelect = new Sprite();
blockSelect.graphics.beginFill(colourBlocks.coloursArray[0]);
blockSelect.graphics.drawRect(74.25, 4, 11.55, 11.55);
blockSelect.graphics.endFill();
blockSelect.buttonMode = true;
blockSelect.addEventListener(MouseEvent.CLICK, function(){ colourBlocks.visible = !colourBlocks.visible; });
addChild(blockSelect);

I have added the selector block’s outline separately to prevent it from disappearing when you mouse over a different colour from the palette.

var outline:Shape = new Shape();
outline.graphics.lineStyle(1, 0x000000);
outline.graphics.drawRect(74.25, 4, 11.55, 11.55);
outline.graphics.endFill();
addChild(outline);

Finally, you need to add the text box. I have used the TextFormat and TextField classes to create a dynamic text field. The dynamic text uses the same font from the library. You may need to adjust the x and y positions and the font size if you are using a different font to the one I’m using. I have set the default text to show the initial block selector colour which is: #8B8989.

var format:TextFormat = new TextFormat();
var myFont:Font = new Font1();
format.size = 15;
format.font = myFont.fontName;
                                  
tf = new TextField();
tf.width = 69.50;
tf.height = 22;
tf.x = 6;
tf.y = -1;
tf.type = TextFieldType.DYNAMIC;
tf.defaultTextFormat = format;
tf.embedFonts = true;
tf.text = "#"+colourBlocks.coloursArray[0].toString(16).toUpperCase();
addChild(tf)

Step 3- Pallete class

Open a new AS3 class file with the name: Palette and type out the necessary classes and variables. You can change the values in the colourArray to change the colours in the palette.

package  {
 
 import flash.display.Sprite;
 import flash.geom.Rectangle;
 import flash.events.MouseEvent;
 import flash.filters.GlowFilter;
 import flash.display.BitmapData;
 import flash.geom.ColorTransform;
 import flash.system.*;
 
 public class Pallete extends Sprite {
  
  private var cols:uint = 8;
  private var xOffset:Number = 11.8;
  private var yOffset:Number = 12;
  
  public var coloursArray:Array = new Array(
  0x8b8989,0x191970,0x2e8b57,0xcd5c5c,0x00FF33,0xFFFF00,0xFF3399,0x3333CC,
  0x80FF02,0x7b68ee,0x2e8b57,0x8b4513,0xCC0000,0xFFFF66,0x660099,0x330066,
  0xffdead,0x7b68ee,0x2e8b57,0xf4a460,0xCC3300,0xFFCC99,0x33FFCC,0x0066CC,
  0x708090,0x0000ff,0x2e8b57,0xb22222,0xFF3300,0xFF3399,0x33CCFF,0x0000CC);
  
  private var bpdata:BitmapData;
  private var autoHide:Boolean = true;
 
  public function Pallete() {
     
  }
 }
}

Inside the constructor add the code below. The For loop creates all the colour blocks using the colours from the coloursArray with the size 9.85 width and 9.80 height. Also adds a black outline and the mouse out, over, mouse and click listeners. The colour blocks will appear as eight columns by for four rows.

for(var i:uint = 0; i < coloursArray.length; i++){
                                              
var s:Sprite = new Sprite();
s.graphics.lineStyle(0.1,0x000000);
s.graphics.beginFill(coloursArray[i]);
s.graphics.drawRect(0,0, 9.85, 9.80);
s.graphics.endFill();       
s.x = 0 + xOffset * (i%cols);
s.y = 0 + yOffset * int(i/cols);         
s.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
s.addEventListener(MouseEvent.MOUSE_OVER, overHandler);              
s.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
s.addEventListener(MouseEvent.CLICK, clickHandler);                                              
addChild(s);
}
}
Next create a new instance of the BitmapData class. This is used to get the pixel data from the colour blocks.

bpdata = new BitmapData(width, height);
bpdata.draw(this);

To hide the palette when you mouse out of the colour blocks. I have created roll areas to set the palette invisible when these areas get moused over.

if(autoHide){
var bounds:Rectangle = getBounds(this);
var offset:uint = 10;
                                  
var rollArea:Sprite = new Sprite();
rollArea.graphics.beginFill(0x000000, 0);                        
rollArea.graphics.drawRect(-bounds.width-offset,0, bounds.width, bounds.height);
rollArea.graphics.drawRect(bounds.width+ offset,0, bounds.width, bounds.height);
rollArea.graphics.drawRect(-bounds.width, bounds.height+10, bounds.width*3, bounds.height);
rollArea.graphics.endFill();
rollArea.addEventListener(MouseEvent.MOUSE_OVER, function() { visible = false; } );
addChild(rollArea);
}

These functions gives the blocks a subtle glow effect when you mouse over the blocks and removes the glow effect when the mouse is off the blocks.

private function overHandler(e:MouseEvent):void{
e.currentTarget.filters = [new GlowFilter(0xFFFFFF,1,5,5,1,3,true)];
}
                      
private function outHandler(e:MouseEvent):void{
           e.currentTarget.filters = null;
}

This function changes the colours of the block selector and updates the colour value in the text field.


private function moveHandler(e:MouseEvent):void{
 var selectedColour:uint = bpdata.getPixel(mouseX, mouseY);
                                  
 var colourtransform:ColorTransform = new ColorTransform();
 colourtransform.color = selectedColour;
                                  
 //hides black colour
if(selectedColour != 0){                                            
Colorpick.blockSelect.transform.colorTransform = colourtransform ;
Colorpick.tf.text = "#"+selectedColour.toString(16).toUpperCase();
}
}

This function hides the palette when you click on a block, and also saves the colour value to the clipboard.

private function clickHandler(e:MouseEvent):void{
           visible = !visible;
           System.setClipboard(Colorpick.tf.text);
}

Step 4 – Test the movie

To test the movie you would add the code below.

var cp: Colorpick = new Colorpick();
addChild(cp);

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP