First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Winx | Website: http://www.winx.ws

by Winx on | 07 Mart 2006

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:


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;

throw("operands are not the same type");
return null;

c=new Object();
for(prop in d)
for(prop in a)

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)
op=new OperatorsEx();

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???
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)


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

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
case "alphaOffset": //not tested

case "redOffset": //not tested
case "greenOffset":
case "blueOffset":

case "ColorTransform":
//create new random color




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.

» Level Advanced

Added: 2006-03-09
Rating: 8 Votes: 10
» Author
alex winx
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.