AS 3.0 Color Transform Animation.

As I start to test out ideas for my new portfolio site, I scripted up an example of how to change color on shapes or MovieClips in AS 3.0. Well, it first started out as a basic Color Transform but then it evolved into a sort of color pusher, (if you will). I scoured the internet to make sure I was not re-inventing the wheel. I found some code snippets from Senocular which helped out a lot. The result is a square which is created then pushed from one color to the next using the Timer Class, Color Transform and Tween classes in Flash.

All you need to do to get this running is create an .fla and point the Document class to Main.as (below)

package{
import flash.display.*;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class Main extends Sprite{
private var sqr:ColorSquare;
private var timer:Timer;
private var colorArray:Array;
private var colorIndex:Number;

public function Main():void
{
colorArray = [0xff0000,0xccff00,0x226655,0x99cccc];
colorIndex = 0;
timer = new Timer(10000,0);
sqr = new ColorSquare(550,400);
addChild(sqr)
startAnimation();
}
private function startAnimation():void
{
timer.addEventListener(TimerEvent.TIMER,pushColor);
timer.start();

}
private function pushColor(evt:TimerEvent):void
{
if(colorIndex > colorArray.length-1){
colorIndex = 0;
}

sqr.animateColor(colorArray[colorIndex]);

colorIndex++;
}

}

The Main.as has some logic which basically holds an Array of colors, instantiates the ColorSquare class, and starts a timer which pushes the square color around.

The ColorSquare.as class (below), holds all the Color Transform logic. So you can use the class just to create a square and give it color or have it push your color from one color to the next, it's pretty simple. Remember to SAVE the ColorSquare.as in the same folder as Main.as and the .fla.

package{
import flash.display.*;
import flash.geom.ColorTransform;
import fl.transitions.easing.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;

public class ColorSquare extends Sprite {
private var sqr:Shape;
private var pushedColor:Number;
private var startColor:ColorTransform;
private var endColor:ColorTransform;
private var emptyClip:MovieClip;
private var tw:Tween;

public function ColorSquare(w:Number=25,h:Number=25,color:Number=0x000000):void
{
makeShape(w,h,color);
}
private function makeShape(w:Number,h:Number,c:Number):void
{
sqr = new Shape();
sqr.graphics.beginFill(c);
sqr.graphics.drawRect(0, 0, w, h);
addChild(sqr);
}
public function animateColor(c:Number = 0x336699):void
{
pushedColor = c;
startColor = sqr.transform.colorTransform;
endColor = new ColorTransform();
endColor.color = pushedColor;
emptyClip = new EmptyMovie();
emptyClip.x = 25;
addChild(emptyClip)
tw = new Tween(emptyClip, "alpha", Strong.easeOut, 0, 1, 50);
tw.addEventListener(TweenEvent.MOTION_CHANGE, tweenTransform);
tw.addEventListener(TweenEvent.MOTION_FINISH, cleanUp);
}

public function changeColor(c:Number):void
{
var myColorTrans:ColorTransform = sqr.transform.colorTransform;
myColorTrans.color = c;
sqr.transform.colorTransform = myColorTrans;
}

private function cleanUp(e:TweenEvent):void
{

removeChild(emptyClip);
tw.removeEventListener(TweenEvent.MOTION_CHANGE, tweenTransform);;
tw.removeEventListener(TweenEvent.MOTION_FINISH, cleanUp);
}

private function interpolateColor(start:ColorTransform, end:ColorTransform, t:Number):ColorTransform
{

var result:ColorTransform = new ColorTransform();
result.redMultiplier = start.redMultiplier + (end.redMultiplier - start.redMultiplier)*t;
result.greenMultiplier = start.greenMultiplier + (end.greenMultiplier - start.greenMultiplier)*t;
result.blueMultiplier = start.blueMultiplier + (end.blueMultiplier - start.blueMultiplier)*t;
result.alphaMultiplier = start.alphaMultiplier + (end.alphaMultiplier - start.alphaMultiplier)*t;
result.redOffset = start.redOffset + (end.redOffset - start.redOffset)*t;
result.greenOffset = start.greenOffset + (end.greenOffset - start.greenOffset)*t;
result.blueOffset = start.blueOffset + (end.blueOffset - start.blueOffset)*t;
result.alphaOffset = start.alphaOffset + (end.alphaOffset - start.alphaOffset)*t;
return result;
}

private function tweenTransform(e:TweenEvent):void
{
sqr.transform.colorTransform = interpolateColor(startColor, endColor, e.position);
}

}

}

OH YEAH there is one more thing! If you read through the ColorSquare.as class (above) you will notice that I'm attaching an emptyClip to perform the Tween color transformation.

emptyClip = new EmptyMovie();
emptyClip.x = 25;
addChild(emptyClip)
tw = new Tween(emptyClip, “alpha”, Strong.easeOut, 0, 1, 50);

so you will need to create an emptyMovieClip in your .fla and have to export it for ActionScript.
read up on my post attaching MovieClips to learn how to do that if you don't already know how.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: