Updated Jan 18, 2009 by philipp.laeubli
Labels:	Tutorial, Color, Featured

ColorTutorial

This tutorial shows you how you can use the color object.

Colors

When using the mojocolors Color object, you can dynamically generate colors and modify them and apply some color theory to them. this helps you building nicer applications, because you can easily create multiple shades of one color with only one line of code.

In this tutorial we create a swf that contains ten rectangles, each filled with a variation of a color, we initially created. the rectangles interact on mouse events by changing their color.

See the final swf here

Step One - Create the Color

Nothing as easy as this:

	// create a red color
	var color : Color = new Color(142, 27, 19);

Step Two - Create a ColorWheel

The Color class has various to... methods, that allow you instantly create a list of colors that differ from the original color by certain criterias. Most of them are easy to understand and clear in their meaning.

	// create a ColorWheel with ten warm variations of that color; Make
	// those colors darker, so that we can brighten them up later with  
	// mouse events.
	var wheel : ColorWheel = color.toWarm(10);
	wheel.darken(20);
	wheel.deSaturate(20);

Step Three - Loop

We now make a ColorSprite object for each color in the wheel, pass the color to the new object and place it on the screen.

	// loop through the colors and create a ColorSprite for each color.
	for (var i : int = 0;i < wheel.length(); i++) {
		var sprite : Sprite = new ColorSprite(wheel.getColor());
		sprite.y = this.height;
		addChild(sprite);	
	}

Step Four - The ColorSprite Class

The ColorSprite class is a normal object that extends Sprite. It does three things:

The height of the rectangle that is drawn depends on the brightness of the color
On a mouseOver event it brightens the color and adds saturation to it.
On a mouseUp / click event it changes the hue of the color by ninety degrees.

The constructor:

	private var _color : Color;

	public function ColorSprite(color : Color) {
		// assign the color to a field.
		_color = color;
		
		// draw the shape
		redraw(_color);
		
		// add the listeners.
		addEventListener(MouseEvent.MOUSE_OVER, onOver);
		addEventListener(MouseEvent.MOUSE_OUT, onOutOrUp);
		addEventListener(MouseEvent.MOUSE_DOWN, onDown);
		addEventListener(MouseEvent.MOUSE_UP, onUp);
	}

The draw method, here we handle the individual height of a ColorSprite:

	private function redraw(color : Color) : void {

		graphics.clear();
		graphics.beginFill(color.getHex());

		// the properties of the Color object can influence the size of the 
		// ColorSprite. Darker ColorSprites are now bigger than brighter ColorSprites. 
		graphics.drawRect(0, 0, 200, (Math.pow(100 - _color.getBrightness(), 2) / 100 ));
		graphics.endFill();
	}

The Event handling: On a mouseOver event, we make a copy of the color, add saturation and brightness and then draw the rectangle again. It is important to copy the color because otherwise the original color would change on every mouseEvent and thus could influence the appearance and height of the ColorSprite:

	private function onOver(event : MouseEvent) : void {
		// redraw the shape. While the mouse is over this shape, we draw it a
		// little brighter and more saturated.
			redraw(createOverColor());
	}

	private function createOverColor() : Color {
		// copy the color object, because we want to keep the original colors.
		var c : Color = _color.copy();
		// brighten it up and add more saturation.
		c.brighten(20);
		c.saturate(20);
		return c;
	}

The Result

Click here] to see the result.

You can download the source files: