Tips & Tricks 12: Change the color of a MovieClip using ColorTransform

by flashuser on October 31st, 2009in Flash Tips & Tricks, Flash Tutorials | 7 Comments »

If you ever wonder how to change the color of a MovieClip in Actionscript 3 here’s a very useful tip. All you have to do is use the ColorTranform class. There are many methods to be used, one that come in handy is the color property which I’ll show it to you.

This property replace the old fashion Actionscript 2 setRGB() method. Here’s the code for changing the color of a MovieClip in AS2:

var myColor:Color = new Color(myMovie);
     myColor.setRGB(0x4455ff);

where myMovie is an instance of a MovieClip.

For Actionscript 3 the code isn’t so complicated and here it is:

var newColor:ColorTransform = myMovie.transform.colorTransform;
newColor.color = 0xFF5522;
myMovie.transform.colorTransform = newColor;

To see how the code works have a look at the example below:



Get Adobe Flash player

The code for the example is here:

import flash.geom.ColorTransform;

square1.buttonMode = true;
square1.useHandCursor = true;
square1.mouseChildren = false;
square1.addEventListener("mouseOver", rollOverHandler);
square1.addEventListener("mouseOut", rollOutHandler);

square2.buttonMode = true;
square2.useHandCursor = true;
square2.mouseChildren = false;
square2.addEventListener("mouseOver", rollOverHandler);
square2.addEventListener("mouseOut", rollOutHandler);

function rollOverHandler(e:MouseEvent) {
	var newColor:ColorTransform = e.target.transform.colorTransform;
	if (e.target.name =="square1") {
		newColor.color = 0xFF5522;
	} else {
		newColor.color = 0x0066CC;
	}
	e.target.transform.colorTransform = newColor;

}

function rollOutHandler(e:MouseEvent) {
	var newColor:ColorTransform = e.target.transform.colorTransform;
	if (e.target.name =="square1") {
		newColor.color = 0x0066CC;
	} else {
		newColor.color = 0xFF5522;
	}
	e.target.transform.colorTransform = newColor;
}


Hi, there! I'm Alin the founder of Flashuser.net. My passions are related to web and graphic design, photography and climbing. You can find me at Twitter and Facebook

Tags: , ,

Recent Posts

Related Posts

Wordpress Themes

7 Comments

  1. David
    October 31, 2009 at 10:05 am

    Great tip. But I had a hard time understanding how to apply a tint percentage to movieclip. The same way you can with Flash. I ended up using the Casa Lib color utils. But I’d like to understand how to do it without any abstraction.

    Reply

    Trackbacks

  1. Tips & Tricks 12: Change the color of a MovieClip using ColorTransform | Lively Flash Tuts
  2. Change the color of a MovieClip using ColorTransform
  3. 55+ Fresh Community Links for Designers and Developers | tripwire magazine
  4. Change the color of a MovieClip using ColorTransform | Programming Blog
  5. 55+ Fresh Community Links for Designers and Developers | Programming Blog
  6. 55+ Fresh Community Links for Designers and Developers | Master Design

Leave a Reply