Newest Articles

Flash Media Player
XML Driven Pie Chart
Base Defender
Hangman Game
8 Ball Pool

Popular Articles

Catapult Game
True Fullscreen Flash Mode
Mp3 Player with XML Playlist
Album Slide
FLV Player

Random Articles

Base Defender
Motion along a Path
True Fullscreen Flash Mode
iPod Style Wheel Slider
Image Slider with Easing
Spark Effect


Shapes the Game
Link to SwfSpot
Swf Spot

Contact me on Google+

rss feed

Image Color Tinting using Actionscript

Image Color Tinting using Actionscript
AddThis Social Bookmark Button
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:
  1. onClipEvent(load){
  2.   //Import the classes needed to transform the color
  3.   import flash.geom.ColorTransform;
  4.   import flash.geom.Transform;
  5.   //A starting amount to tint the image
  6.   redamount = 0;
  7.   //Is the image getting more red or more blue?
  8.   goingred = true;
  9. }
  10. //Run at the start of each frame
  11. onClipEvent(enterFrame) {
  12.   //if going red is set to true, set the color transform to tint the image more red
  13.   if (goingred) {
  14.     redamount++;
  15.   //otherwise, it is getting more blue
  16.   } else {
  17.     redamount--;
  18.   }
  19.   //the boundaries. If a limit (0 or 64) has been reached, flip from going red to going blue
  20.   if (redamount == 0 || redamount == 64) {
  21.     goingred = !goingred;
  22.   }
  23.   //Declare a new ColorTransform object
  24.   var colorTrans:ColorTransform = new ColorTransform();
  25.   //Set the red offset to the specified amount. Higher is stronger
  26.   colorTrans.redOffset = redamount;
  27.   //when the red offset is low, the blue offset is high, and vice versa.
  28.   colorTrans.blueOffset = 64-redamount;
  29.   //Create a new Transform object. This is attached to the movieclip 'tintedimage'
  30.   var trans:Transform = new Transform(this);
  31.   //apply the color transform to the transform object
  32.   trans.colorTransform = colorTrans;
  33. }
redOffset, greenOffset, and blueOffset control how much of each color to apply to the image. The range is from -255 to 255. alphaOffset controls the opacity of the image.

The source file is available below for download:

Download Source File
Download Demo SWF
Comments Currently Disabled