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 Currently Disabled