Delaying the start of tweens with Fuse
January 14th, 2008 . by polyGeekThere are three main ways that you would want to use Fuse to move a group of MovieClips:
- animate everything one, after another
- animate everything at the same time
- animate everything on a staggered delay
Here is an example of the three groups ( download FLA )
The difference in how these work is pretty simple:
If you want each animation to run when the previous one has completed then just add the data for each target MovieClip individually, one after another.
If you want each animation to run at the same time then add all of the MovieClips as an array at the same time.
If you want to stagger the animations so that one starts before the previous one has completed then you push all the MovieClips at the same time, in an array, and add the delay argument to each set of data that you pass to your instance of Fuse.
Fuse is really powerful and I used to use it a lot until I found that it adds 55kb on top of your Flash movie. Now I use Tweener. Much smaller footprint and almost as powerful.
@Dave, 55k? The SWF from the example above is only 34k total. That’s still substantial.
It would be great if you would do something similar using Tweener so we could compare the file sizes.
This is the function that I use when I need to create this effects (or any other tween effect, like alpha or anything) in a small SWF (advertising for instance).
import mx.transitions.Tween;
import mx.transitions.easing.*;
import mx.utils.Delegate;
/**
* Generic Tween function.
* @param obj Object - Object to be Faded. Default value = this.
* @param param String - Parameter to be tween, could be “_alpha”, “_x”, “_y”, “_xscale”, “_yscale” etc.
* @param endPos Number - End value of the tween parameter.
* @param p_dur Number - Duration of the tween in seconds. Default value = 1.
* @param tweenFinished Function - Function to be called when Fade finished. Default = undefined (no function called).
*/
public function tweenTo(obj:Object, param:String, endPos:Number, p_dur:Number, tweenFinished:Function):Void
{
obj = (obj==undefined)? this:obj;
p_dur=(p_dur==undefined)? 1:p_dur;
obj._visible = true;
if (obj.objTween!=undefined)
obj.objTween.stop();
obj.fadeTween = new Tween(obj, param, Regular.easeOut, obj[param], endPos, p_dur, true);
if (tweenFinished != undefined)
obj.objTween.onMotionFinished = Delegate.create(obj, tweenFinished);
}
Usage:
tweenTo(mc, “_alpha”, 100, 1);
or
tweenTo(mc, “_y”, 150, 1);
I have several functions like that one (some uses arrays of tweens) that do the same, but allowing multiple effects, etc.
Hope it helps for those looking for a small SWF.
There’s another tween engine that I just learned about last night called Tween-lite. I’ll take it for a test drive soon and write about it. From what I understand it has the best performance and the smallest file footprint.
Wow, tween-lite rocks ;) at least what they say about it, I’ve to go a little deeper into the code…
Thanks polyGeek, I didn’t know it and it looks pretty good.
Leave a Reply