Image Color Tinting using Actionscript
Description: Change the tint of an image using the ColorTransform and Transform classes
Author: John Bezanis
Added: April 11th 2008
Version: Flash 8
Flash 8 makes tinting an image a piece of cake with the ColorTransform and Transform classes. The above demo uses a few lines of code on a movie clip to create a color shifting effect.
Begin by importing an image to the stage using File->Import To Stage.
Convert it to a movie clip by right clicking the image and clicking Convert to Symbol. Set the type to Movie Clip.
Select the movie clip by single clicking it and insert the following code into the actions tab:
- onClipEvent(load){
- //Import the classes needed to transform the color
- import flash.geom.ColorTransform;
- import flash.geom.Transform;
- //A starting amount to tint the image
- redamount = 0;
- //Is the image getting more red or more blue?
- goingred = true;
- }
- //Run at the start of each frame
- onClipEvent(enterFrame) {
- //if going red is set to true, set the color transform to tint the image more red
- if (goingred) {
- redamount++;
- //otherwise, it is getting more blue
- } else {
- redamount--;
- }
- //the boundaries. If a limit (0 or 64) has been reached, flip from going red to going blue
- if (redamount == 0 || redamount == 64) {
- goingred = !goingred;
- }
- //Declare a new ColorTransform object
- var colorTrans:ColorTransform = new ColorTransform();
- //Set the red offset to the specified amount. Higher is stronger
- colorTrans.redOffset = redamount;
- //when the red offset is low, the blue offset is high, and vice versa.
- colorTrans.blueOffset = 64-redamount;
- //Create a new Transform object. This is attached to the movieclip 'tintedimage'
- var trans:Transform = new Transform(this);
- //apply the color transform to the transform object
- trans.colorTransform = colorTrans;
- }
The source file is available below for download:
Download Source File
Download Demo SWF
Comments
awesome post, thanks for the help!
April 18th 2008 10:04AM - isaac
muy bueno gracias me esta sirviendo de mucho =D
May 23rd 2008 10:05AM - derleth
Found the Color class today - it extends ColorTransform, so can be applied to any DisplayObject in the same way as ColorTransform, but adds tinting functionality so it's a load easier to get your head around instead of the offsets and multipliers :)
var c:Color = new Color();
c.setTint( Math.random()*0xFFFFFF,.4 );
mySprite.transform.colorTransform = c;
var c:Color = new Color();
c.setTint( Math.random()*0xFFFFFF,.4 );
mySprite.transform.colorTransform = c;
June 4th 2008 06:06AM - tripleaxis
The Color class extends Object, as does ColorTransform, but Color is deprecated.
June 4th 2008 08:06AM - John
How easily could you add this effect to a scroller bar? Basically it would be great to be able to let the user scroll (Say with 3 RGB scrollers) giving the amount of tint they want then let them save a copy of the image with the tint they wanted?
April 15th 2009 04:04PM - Mansafe
i want asfile format
June 5th 2009 05:06AM - adfdf
Add a Comment