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
Total Views: 10305
Views in the Past 7 Days: 287
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;
June 4th 2008 06:06AM - tripleaxis
The Color class extends Object, as does ColorTransform, but Color is deprecated.
June 4th 2008 08:06AM - John
Add a Comment