How to change color of Sprite or MovieClip

By Kuba Tuesday December 22, 2009

Some of you may wonder how to easily change the color of a sprite, the answer is fairly simply use ColorTransform class. While developing stock applications or websites you may run into this kind of problem. Stock files always have to be customizable, most of them are XML driven, those websites give a user (buyer of website/app) ability to quickly change the color of (almost) any object in the website. This short tutorial explains how to change the color of an object with ActionScript 3.0, further we will explain how to tween the color of the object so it doesn’t change instantly.

How to implement the color change

First of all we have to create some DisplayObject that will be used as our test object.

var guineaPig:Sprite = new Sprite ();
guineaPig.graphics.beginFill(0xFF6600, 1);
guineaPig.graphics.drawRect(0, 0, 100, 100);
guineaPig.graphics.endFill();
 
addChild(guineaPig);

I have created an orange Sprite with 100×100 dimensions and placed it on the stage. Let say I will have a public method in the class that will accept a color as an parameter, then inside the function I will change the color of our sprite to match the value of the parameter.

public function changeColor(inputColor:uint):void {
       // first create new instance of ColorTransform class
	var ct:ColorTransform = new ColorTransform();
       // then assign our inputColor value to ColorTransforms color public property
	ct.color = inputColor;
       // at the end assign the ColorTransform class to out destination object which is guineaPig
	guineaPig.transform.colorTransform = ct;
}

This simply code works similar to Tint color effect which can be selected form the properties panel inside the Flash IDE. Changing the color of an display object is really easy, now we will try to tween the color value.

How to tween the color

For the color animation effect I will use Tweener, but you can achieve this effect with any other tweening engine like: gTween, Tweensy or GreenSock. To tween color with Tweener I don’t have to use the ColorTransform class I simple have to import Tweener classes along with the ColorShortcuts class.

import caurina.transitions.*;
import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();

Then I need to modify the colorChange function.

public function changeColor(inputColor:uint):void {
	Tweener.addTween(guineaPig, {_color:inputColor, time:5, transition:"easeOutExpo"});
}

This is basically it, very simple and very effective.

Conclusion

Changing the color of a Sprite or MovieClip with ActionScript 3.0 is really easy, thats the reason why most stock files have this ability. With more complex objects it gets tricky because when you change the color of the container the children will also change their color so the DisplayObject will look flat, there are two ways to fix this: you either have to change the color of each of the children spectrally or apply some really advanced color filters.

I hope that helps, please let me know what you think.

Complete source code:

Simple version with no animation

package com.massiveProCreation
{
	/**
	 * ActionScript 3.0 Tips &amp; Tricks
	 */
	import flash.display.Sprite;
	import flash.geom.ColorTransform;
 
	public class TipsAndTricks extends Sprite
	{
		private var guineaPig:Sprite;
 
		public function TipsAndTricks()
		{
			super();
 
			guineaPig = new Sprite();
			guineaPig.graphics.beginFill(0xFF6600, 1);
			guineaPig.graphics.drawRect(0, 0, 100, 100);
			guineaPig.graphics.endFill();
 
			addChild(guineaPig);
			changeColor(0xFF0000);
		}
 
		public function changeColor(inputColor:uint):void {
			var ct:ColorTransform = new ColorTransform();
			ct.color = inputColor;
			guineaPig.transform.colorTransform = ct;
		}
	}
}

More advanced version with tween animation

package com.massiveProCreation
{
	/**
	 * ActionScript 3.0 Tips &amp; Tricks
	 */
	import flash.display.Sprite;
	import flash.geom.ColorTransform;
 
	import caurina.transitions.*;
	import caurina.transitions.properties.ColorShortcuts;
	ColorShortcuts.init();
 
	public class TipsAndTricks extends Sprite
	{
		private var guineaPig:Sprite;
 
		public function TipsAndTricks()
		{
			super();
 
			guineaPig = new Sprite();
			guineaPig.graphics.beginFill(0x000000, 1);
			guineaPig.graphics.drawRect(0, 0, 100, 100);
			guineaPig.graphics.endFill();
 
			addChild(guineaPig);
			changeColor(0xFF0000);
		}
 
		public function changeColor(inputColor:uint):void {
			Tweener.addTween(guineaPig, {_color:inputColor, time:5, transition:"easeOutExpo"});
		}
	}
}

Download source code: Color transform (88)

Kuba

2 Comments

kires on Tuesday 22, 2009

It’s GreenSock not GreenShock. Anyway thanks for sharing this info.
Kuba on Tuesday 22, 2009

Sorry already fixed the error ;)