I've wanted an easy way to tween multiple properties of an object for a while now, but always been a little too lazy (or busy) to build one. Enter Flash 8, with its abundance of matrixes and filters, just begging to be tweened. My requirements were fairly straightforward:

  • Support for matrixes (arrays) and objects
  • Simple to integrate with existing tweening classes and custom tween routines
  • An extremely straightforward and easy to use API
The result was the com.gskinner.transitions.MultiTween class, which you can download at the end of this post. It allows you to programmatically tween multiple object properties or array elements by changing a single value. Here's a quick API spec:

Constructor: 

MultiTween(targetObj:Object,endVals:Object [,propList:Array,props:Object]);
targetObjthe object or array whose values you want to tween
endValsan object or array containing the end values to tween towards
propListan optional array containing the property names you wish to tween. If this is omitted, a list will be automatically generated from the endVals object. If a specified value is null or undefined in the targetObj or endVals, it will be set to 0. If the value is equal in targetObj and endVals, or if it is NaN, it will be omitted from the propList.
propsan optional object containing arbitrary data related to this tween. For instance, you might choose to store a velocity and acceleration value in this object.

Properties: 

multiTween.position
gets or sets the position of the tween, where 0 is the starting values of targetObj, and 1 is the values of endVals. For instance, setting position = 0.5 will tween targetObj's values halfway between its initial values and the specified end values. Setting this property will update the values of the targetObj. Values above 1 and below 0 are permitted to allow bouncing out of range and similar effects. 

multiTween.props
gets or sets the props object. The props object contains arbitrary data related to the tween.

Example:
This example tweens a color transform object. If you look at the propsList parameter, you will see that the alpha transform properties are being specifically excluded. You could achieve the same results by not including them in the colTargets object, or setting them to the same value as in colTransform. 

import com.gskinner.transitions.MultiTween;

var colTransform = {ra:100,ga:100,ba:100,rb:0,gb:0,bb:0,aa:100,ab:0};
var colTargets = {ra:10,ga:200,ba:90,rb:-30,gb:60,bb:-5,aa:40,ab:-20};
var col = new Color(myClip);
col.setTransform(colTransform);

var mt:MultiTween = new MultiTween(colTransform,colTargets,
    ["ra","ga","ba","rb","gb","bb"],{vel:0.05});

function onEnterFrame() {
     mt.position += mt.props.vel;
     if (mt.position >= 1) { mt.props.vel = -0.05; }
     else if (mt.position <= 0) { mt.props.vel = 0.05; }
     col.setTransform(colTransform);
}

This architecture let's you use any existing tween class, or custom tweening functions without any modifications, by simply applying the tweening to MultiTween.position value rather than the object properties. I will post more concrete examples, and possibly an updated version of the class after the launch of Flash 8 (while this class can be handy in Flash 7, it really is a lot more useful in Flash 8). You can download the MultiTween class and a couple of simple Flash 7 examples by clicking here.