Shawnblais.com v2

The Lab

Color Tween Class

with one comment

Here’s a very handy utility class to tween the tint of a MovieClip. It works by creating 2 color transform objects (based on a start and end color) and interpolates the colors in between. This uses GTween to handle the tweening of a dummy property, while the color is updated on the CHANGE event handler.

Example usage:

import com.shawnblais.utils.ColorTween;

new ColorTween(target_mc, startColor, endColor, duration);

And here’s the class itself:

////////////////////////////////////////////////////////////////////////////////////
//  Thanks goes to Senocular for the heart of this Class
///////////////////////////////////////////////////////////////////////////////////

package com.shawnblais.utils {

	import flash.display.MovieClip;
	import flash.events.EventDispatcher;
	import flash.events.Event;
	import com.gskinner.motion.GTween;
	import fl.motion.easing.*;
	import flash.geom.ColorTransform;

	public class ColorTween extends EventDispatcher
	{
		protected var _tweenObject:Object;
		protected var _startColor:Number;
		protected var _endColor:Number;
		protected var _duration:Number;
		protected var _target:MovieClip;

		public var startTransform:ColorTransform;
		public var endTransform:ColorTransform;

		public function ColorTween(target:MovieClip, startColor:Number, endColor:Number, duration:Number = .35):void
		{
			_startColor = startColor;
			_endColor = endColor;

			_target = target;
			_duration = duration;

			startTransform = new ColorTransform();
			endTransform = new ColorTransform();
			startTransform.color = _startColor;
			endTransform.color = _endColor; 

			_tweenObject = {prop: 0};
			var tween:GTween = new GTween(_tweenObject, duration, {prop:1}, {ease: Cubic.easeOut});
			tween.addEventListener(Event.CHANGE, tweenTransform);
		}

		protected function tweenTransform(e:Event) : void {
			_target.transform.colorTransform = interpolateColor(startTransform, endTransform, _tweenObject.prop);
		}

		protected 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;

		}

	}

}

Written by Shawn

August 19th, 2009 at 11:56 am

Posted in Uncategorized

One Response to 'Color Tween Class'

Subscribe to comments with RSS or TrackBack to 'Color Tween Class'.

  1. [...] Click here to read more… [...]

Leave a Reply

Spam Protection by WP-SpamFree