Tinting with Actionscript 3

Posted 29th July 08 by Matt Cain

Within the Flash CS3 IDE you can quite easily add a "tint" to a MovieClip. In the "Color" drop down menu on the Properties pane whilst you have a MovieClip selected, you'll find the tint options. These are very useful.

However, when I decided that I would like to add some tints during run-time using Actionscript, it took me a while to figure out how the heck to do it. Here's what I eventually came across:

import fl.motion.Color;
//create a Color object
var c:Color=new Color();
//set the color of the tint and set the multiplier
c.setTint(0xff0000, 0.8);
//apply the tint to the colorTransform property of
//the desired MovieClip/DisplayObject
mc.transform.colorTransform=c; //mc is a MovieClip

This will add a red 80% tint to your MovieClip.

The setTint method changes the tintColor and tintMultiplier properties of the Color object to the arguments that you pass. The first argument is a uint value representing the color you want to use (0x followed by the RGB color code), and the second argument is the multiplier (or opacity) of the tint, which must be a number between 0 and 1.

Color is an extension of the ColorTransform class, which allows you to apply a Color object to the colorTransform property of the MovieClip's transform property.

Let's do a practical example. The following is the code for applying a tint to a MovieClip based on the value of a slider. Please note that the slider's parameters have been altered within the IDE to make this work. You can download the FLA here.

import flash.ui.ContextMenu;
import flash.events.Event;
import fl.events.SliderEvent;
import fl.motion.Color;

//Stop people mucking about with the right click menu :)
var cm=new ContextMenu();
cm.hideBuiltInItems();
this.contextMenu=cm;
//set slider event listener
slider.addEventListener(SliderEvent.CHANGE, changeTint);

function changeTint(s:SliderEvent):void {
	//make a new Color object
	var c:Color=new Color();
	//set the color of the tint and set the multiplier
	c.setTint(0xFF0000, slider.value);
	//apply the Color object to the colorTransform
	//property of the desired MovieClip/DisplayObject  
	mc.transform.colorTransform=c;
}

Thank you for reading. If you have any queries, suggestions or hate mail, feel free to send it to me here.

Check out our other Articles

IX Web Hosting Review

Posted: 19th August 08

A brief review of the woeful 2 months that I spent with IX Web Hosting! READ MORE

Using imported sounds in Flash CS3 with Actionscript 3

Posted: 30th July 08

So you've imported a sound into Flash CS3, but now you want to play it at the time of your choosing using Actionscript 3. How do you do that? It's not as obvious as you might expect. READ MORE

Or check out some Flash!

The Gaming Quiz

Posted: 20th September 08

A quiz about Video Games and the Gaming industry. Take the quiz and see how much you really know about gaming. PLAY THIS GAME

Earth Defender

Posted: 2nd September 08

Defend the world from an alien invasion and generally shoot things in this arcade style space shooter. PLAY THIS GAME

© Cain Media 2008