Dec
22
2009
Articles // Tutorials

How to change color of Sprite or MovieClip

Author An article by Kuba    Comments 2 Comments

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 & 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 & 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: download now How to change color of Sprite or MovieClip

Tags: , ,

Related Posts

About the Author: Kuba Gaj

Hi, my name is Kuba and I am the founder of massiveProCreation. I am interested in almost everything that is connected to technology (specially Adobe Flash). If you have any questions or suggestions please feel free to contact me :)

2 Comments + Add Comment

  • kires 27 December, 2009 at 3:29 pm

    It’s GreenSock not GreenShock. Anyway thanks for sharing this info.

  • Kuba 29 December, 2009 at 12:38 pm

    Sorry already fixed the error ;)

Leave a comment

Flip-Book
ActiveDen
ThemeForest

Become an Author

We are looking for Authors, if you have a Flash (or related) knowledge and you want to share it with the community on our blog please contact us.

Useful Links

Partners