Default Macromedia Tween class has many limits. One of that limits is that it can’t tween objects or its properties. Let say you need to tween movie RGB colors which are tightly connected with ColorTransform and Transform objects. During achivement of this goal I try to reuse Macromedia Tween class original code more as I can. Less code for me less changes for you. This tutorial also cover inheritance(extending, subclass or it was superclass who can remember all that different languages different keywords on same ball) and customization to make your developer live easier.

First, i have to figure out how Tween class working by digging in Tween.as torned from Flash8 “sophisticated” debugger (TweenMa.as in download files) (Let me found MovieClip implementation this way ?! ) )

Tween class has a constructor like this:

function TweenEx(obj:Object, prop:String, func:Function, begin, finish, duration:Number, useSeconds:Boolean

obj is object(most of the cases MovieClip) on its propertie prop is applied external(incrementing/decrementing) function func (like some Easing.Elastic) or internal(incrementing/decrementing) linear function if func is null from starting propertie value begin to ending propertie value finish. Eather you use duration in seconds(useSeconds=true) or number of frames (useSeconds=false) is dependable only on FPS (frames per second) and not with real time. (Uhhhh i’made that in 6 rows)

At the begining there was Tween and I extend it:

class tween.TweenEx extends Tween

To achive our goal and tween object (its properties) in our case ColorTransform object:

ColorTransform(
[redMultiplier:Number],
[greenMultiplier:Number],
[blueMultiplier:Number],
[alphaMultiplier:Number],
[redOffset:Number],
[greenOffset:Number],
[blueOffset:Number],
[alphaOffset:Number])

we must to extend begin, finish, change…. variables to type Objects from formerly Number type

public var begin:Object;//change
public var change:Object;//change
public var prevPos:Object;//change
private var op:OperatorsEx;//change
private var _pos:Object; //change

Also we must to change all operation between them becouse change:Number=begin:Number-finish:Number its not the same as change:Object=begin:Object-finish:Object. I try to find someting about overloading operators but i’ve found that is not possible in AS2 so i’ve made simple class OperatorsEx. Let see exmple how String and Number addition can be to transformed to include also Object addition :

class math.OperatorsEx
{
var className:String=”OperatorsEx”;

function OperatorsEx()
{
}

function add(a:Object,b:Object,d:Object)//d:Object for custom properties
{
var prop,c:Object;
if(a==undefined || b==undefined)
{
throw(”operands undefined”);
return null;
}

if(typeof(b)!=typeof(a))
{
throw(”operands are not the same type”);
return null;
}

if(typeof(a)==”object”)
{
c=new Object();
if(d!=undefined)
for(prop in d)
c[prop]=a[prop]+b[prop];
else
for(prop in a)
c[prop]=a[prop]+b[prop];
}
else
{
c=a+b;
}

return c ;
}
…….

So new overloaded function are looking like this:

function set finish (f:Object):Void { //change
this.change = op.sub(f,this.begin,propObject); //change
}

function get finish ():Object {
return op.add(this.begin,this.change,propObject);
}

where op is op=new OperatorEx.

TweenEx constructor have all input parametars as Tween consturctor + extended:Boolean (which define if u wanna use Ex(tended) or classic features) + exParam1,exParam2 which are input parametars.

function TweenEx(obj:Object, prop:String, func:Function, begin, finish, duration:Number, useSeconds:Boolean,extended:Boolean,exParam1,exParam2)
{
this.extended=extended;
op=new OperatorsEx();
//classObject=this;

this.currentMovie=MovieClip(obj);
if(!extended || extended==undefined)
stdTween(obj, prop, func, begin, finish, duration, useSeconds);
//super.Tween(obj, prop, func, begin, finish, duration, useSeconds); //should but won’t???
else
exTween(obj, prop, func, begin, finish, duration, useSeconds,extended,exParam1,exParam2);//

}

If u choose extended tween prop(rgb,bezier,redOffset…) by setting extended constructor parameter to true you will initiate different constructor. Becouse this class was first designated as extension for “rgb” tween i will describe colorRGBTween constructor.

function colorRGBTween(obj, prop, func, begin, finish, duration, useSeconds)
{

It takes begin-finish hex or RGBA values.Then initiate and set tweening object (in our case Transform object applied on our MovieClip obj) and its “colorTransform” prop which will be tweened:

trans = new Transform(MovieClip(obj));
this.obj = trans;
this.prop = “colorTransform”;

Then set our custom tweening function (function that caluculate incrementing/decrementig peaces every interval t) rgbTween func:

if (!func) this.func = rgbTween;

which look like this:

function rgbTween(t, b, c, d):ColorTransform
{
var prop,clrTrans:ColorTransform=new ColorTransform();
for(prop in this.propObject)
{

clrTrans[prop]=c[prop]*t/d+b[prop];
}

return clrTrans;
}

Note: In code you can find function “std” that is a default Tween class tweening function and compare with “rgbTween” or “bezierTween” as a example writing your own.

Function setPosition has task to apply tweening function calculated peace to tweened object properties.

function setPosition (p):Void {//change:Object
this.prevPos = this._pos;
this.obj[this.prop] = this._pos =p;

Not satisfy with tween starting after constructor inicialization, i’ve commented line ” this.start()” in the constructor, so you must start tweening where you want and when you want like this:

import mx.transitions.*;
import mx.transitions.easing.*;
import tween.TweenEx;
twnRGB=newTweenEx(mc,”rgb”,null,”0,128,8,50″,”255,255,0,100″, 10, true,true);
twnRGB.start();

I’ve overload yoyo function to achive “yoyo to random value(color)”:

function yoyo (rand:Boolean):Void {
var alpha;
if(rand)//yoyo to random value
{
if(extended)
{
switch(prop)
{
case “alphaOffset”: //not tested
this.begin=this.finish;
this.finish=-randRange(0,255);
break;

case “redOffset”: //not tested
case “greenOffset”:
case “blueOffset”:
this.begin=this.finish;
this.finish=randRange(0,255);
break;

case “ColorTransform”:
alpha=begin.alphaOffset;
this.begin=this.finish;
//create new random color
this.finish=rgbObject(randRange(0,255)+”,”
+randRange(0,255)+”,”+randRange(0,255)+”,
“+Math.round((alpha+255)/2.55));

break;
}

this.start();

}

}
else
this.continueTo (this.begin, this.time);
};

Note1: Some code is //not tested cos of changes during writing this tutorial.

Note2: How to use other TweenEx class tweening pls review TweenEx.as

Support functions:
function rgbObject(strColor:String):ColorTransform – allows hex or (RGBA) entry.

Support functions:
function isNaRGB(numColor):Boolean – check if number is RGB.

Support functions:
function randRange(min:Number, max:Number):Number – Macromedia random ex. function.

by Winx in flashkit