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]); |
| targetObj | the object or array whose values you want to tween |
| endVals | an object or array containing the end values to tween towards |
| propList | an 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. |
| props | an 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.
“while this class can be handy in Flash 8, it really is a lot more useful in Flash 8”
There is an error there 😉
Cool class, I like it, will learn from it I’m sure.
gskinner writes: “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”
i hear ya – and there is no reason to write it – N heads are better than one in this case!!!
for those that don’t know – there are EXCELLENT tweening libs for flash 6 & 7 –
http://laco.wz.cz/tween/
http://www.yestoall.com/flashAPI/
long live open source
ps
I don’t really care about flash 8 as it doesn’t work in linux. i use flash for thin client front ends 80 percent more than web/browser based work.
i’ll catch up with you in a few years when macromedia updates the plugin. they did a great job on flash 7 linux, but it’s a shame they dropped gflashplayer…
Jon – been typing “Flash 8” too much recently. 🙂 Fixed it above.
nano – there are lots of great tweening classes (don’t forget MM’s, and Penner’s), and many of them do not offer support for multi-tweens (particularly with matrixes) which is why I built this system to work with any of them. Often, we do not use tween classes, or roll our own lightweight ones – many of the popular tween classes have gotten bloated and/or slow.
Grant.
Thanks for sharing.
Just to round off tween classes – Have you come across George Medve’s tweenExtend class (http://www.sqcircle.com/downloads/)? It has multi-tweens, and just extends the built in MM tween class.
I’ve been using this happily on some projects now.
I do like your set position property.
I have not got flash 8 yet but am desperate to suss out how to tween mulitple properties of an array. Using mx2004 and fp7 would any one kindly refer me onto the equivalant of grants above example.
A fantastic class grant, Simon
Sorry should of read the article properly and made my request clearer, could I impliment this code to move an array of mc’s to different _x coordinates (in a scroll fashion)?
Penner’s tween class was mentioned above… Has anyone used this extensively? I’ve tried using it but it seems to use a phenomenal amount of resources when running multiple tweens at the same time.
“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. ”
Grant, can you post an example of this? Not sure what syntax to use to make that happen.
Thanks,
Jim Kremens
“Penner’s tween class was mentioned above… Has anyone used this extensively?”
I have. I made a class to work in coordination with it. Its called an animation class. Although I have to admit that Grant’s class probably works better than mine. Because mine was primarily built as a way to animate movie clips, not objects. But I don’t think Penner’s equations use a lot of resources at all. I can run multiple properties and multiple clips animating at the same time with little performance hit. If anyone wants access to my animation.as file, let me know, I can hand it out.
Grant, good work as always – wanted to tip you and other users off to the new Zigo Engine and Fuse classes, available in an advance release now:
The Zigo engine has been updated into the modern world, as an all-static class where the shortcuts like alphaTo are optionally initialized into any object you want. Fuse adds a powerful, flexible syntax to tween as many properties in as many objects as you want (color transforms and filters are fully supported), then create sequences of tweens and method calls.
Here’s what it looks like,
// This method will be used to continuously reapply the filter to the clip.
function reapplyFilters() {
art.filters = filterArray;
}
var dsf = new Fuse();
dsf.target = filter;
dsf.scope = this; // this lets you skip declaring updscope in each action
// add a series of 3 tweens with as many properties as you want.
dsf.push(
{distance:10, seconds:.5, ease:’easeOutQuad’, updfunc:’reapplyFilters’},
{strength:’10’, angle:’40’, seconds:.5, ease:’easeInQuint’, updfunc:’reapplyFilters’},
{blurY:10, seconds:.5, ease:’easeOutQuint’, updfunc:’reapplyFilters’}
);
dsf.start();
yet another way to put your filters in motion is http://www.flash-fmp.de
with these so called filter managing prototypes you can tween your filters just the
same way as you ever did before with any kind of movieclip property (such as x, y or alpha…)
you can use it e.g. in combination with laco tweens or mx.transitions tweens.
Can someone post an exmaple of using this multiTween on an filter (say a blur) ?
I have a problem where, if I import the MultiTween class in the 1st frame:
import com.gskinner.transitions.MultiTween;
And then call it in the 2nd frame:
var mt:MultiTween = new MultiTween(myMC,{_xscale:200,_yscale:200});
I get an error:
The class or interface ‘MultiTween’ could not be loaded.
Why is this happening? Why can’t I call the MultiTween calls in a different frame?
Sam – I’ll post some new examples in the next couple days using filters and the mx Tween class.
Eric – This is just how Flash works. You must import a class on every frame that uses it when using AS1.
Here’s a hack fix (unless there’s a better way).
On the 1st frame have:
import com.gskinner.transitions.MultiTween;
function initMT( obj,props ) {
obj.mt = new MultiTween( obj,props );
}
On the 2nd frame have:
initMT( myMC,{_xscale:200,_yscale:200} );
myMC.mt.position = 1;
Of course you can use an onEnterFrame or tween function for the myMC.mt.position value, but this works for anywhere in your file without having to ugly recode the import everywhere, yuck.
hello smarter people..
i would like to use the multiTween with an onRelease function called from different buttons. For instance, I would like to have a navigation that each nav button could change the background mc to a different color. From what I have seen, I can do something close with onEnterFrame from the samples.. Is there any documentation of this available?
thanks!
please send me source codes in which classes and structures are used