AS3 – Eaze tween library update

Let’s state it again: "tweening" is a commodity with plenty of alternatives, which means you’re not obliged to use a) crappy ones, b) bloated ones, and c) commercial ones.

Like many Flash developers I started developping Eaze because a) it’s fun, b) it’s (mildly) challenging, and c) I really had a few ideas to innovate in this field.

Since then I had the occasion to discuss (I should say brainstorm) with other Flash developers (hi Joshua and Steve) about our "tweening needs" (sounds dirty, isn’t it?) and our idea of the perfect library. This was very entertaining and they all gave me lots of crazy syntax ideas which turned out to be possible…


Here’s the big change

Internally Eaze has not changed much – I optimized one or two things, improved timing precision. But the syntax has changed enough to break existing code.

The first big breaking change is the entry point: the static Eaze class is now replaced by a package function, eaze(target), which returns a EazeTween instance wrapping the target. Now if you ask me, I feel that’s jQuery-like!

// before
Eaze.to(target, duration, params);
Eaze.delay(duration).chainTo(target, duration, params);

// after
eaze(target).to(duration, params);
eaze(target).delay(duration).to(duration, params);

This change doesn’t look like a big deal, but I think the syntax can hardly get better. In particular, I was seriously annoyed by the confusing static to()/from() versus instance’s chainTo()/chainFrom(). Say "thanks" to package functions 🙂 This little used AS3 language gem is just brilliant (however you can only add one public package level declaration per file, and this is just lame).

New features

I didn’t only fiddle with syntax, but also added some important features like ColorMatrixFilter:

eaze(target).to(duration)
    .filter(ColorMatrixFilter, { brightness:0.5, saturation:-1 });
// brightness[-1/1], contrast[-1/1], saturation[-1/1], 
// hue[-180/180], tint[RGB]/colorize[0/1]

Other "big" new feature is Bezier support… Ok, this is something that I actually only used a few times, but I’ll object that now, in Eaze, this is such a commodity that you may find yourself using Bezier tweens a lot more!

// tween using any number of control points [c1, c2, c3..., p2]
eaze(target).to(duration, { x:[80, 100], y:[100, 0] });
// tween through any number of points [[p2, p3, p4..., p5]] (dbl array)
eaze(target).to(duration, { x:[[80, 100]], y:[[100, 0]] });

Last notable change is tint handling – now the parameter can either be a uint color, or an Array where you can optionally quantify the colorization and a color multiplier:

eaze(e.target).to(1, { tint:0xffffff }); // classic
eaze(e.target).to(1, { tint:[0xffffff, 0.5] }); // 50% tint
eaze(e.target).to(1, { tint:[0xffffff, 0, 1.5] }); // 50% lighten
eaze(e.target).to(1, { tint:[0xffffff, 0, 0.5] }); // 50% darken

Eaze features list:

  • alpha has autoAlpha behavior (use autoVisible to keep the element visible),
  • tint (see “New features”),
  • frame (alternatively, use eaze(target).play(frame)),
  • volume (anything with a soundTransform member),
  • filters (BlurFilter, GlowFilter, DropShadowFilter and ColorMatrixFilter),
  • Bezier (see “New features”),
  • short rotation (TODO, still thinking about the syntax).

That’s a lot of features I think, weighting under 9Kb in the final SWF. Oh and according to Jack “TweenLite/Max” Doyle’s tweening speed test, Eaze is the fastest library around. Yep.

Learn more / download Eaze, it’s free and open source (non-restrictive MIT license).

62 thoughts on “AS3 – Eaze tween library update

  1. Many Thanks Philippe work like a charm ,and let me add.. its rally a great class and thank you for letting as have an alternative to that Jack (Gs) dictator class (:

  2. Hey Philippe.
    Is there a way i can kill all tween instantly in one function , instead of doing :

    eaze(target1).killTweens();
    eaze(target2).killTweens();

    Thanks in advance

  3. Hi Philippe congrats for the fastest easing engine around
    what is the fastest way to tween an array of vectors?
    is there an easy solution
    do i need to have a for loop and create a new tween instance for each vertex (it doesnt seem a good idea)

    best regards iannis

  4. @Iannis Eaze doesn’t animate Arrays/Vector – the best option is to tween a custom class property between 0 and 1, and in the property setter use a loop to modify the values.

  5. Hi Philippe
    Thanks a lot for your quick reply
    iam doing something like this
    //empty buffer fade out
    eaze(buf).to(0.5,{Vector:emptybuffer}, true).easing(Linear.easeNone);

    //fill buffer
    eaze(buf).delay(1).from({Vector:emptybuffer}.to(4 ,{Vector:_allBuffers[0]}, true).easing(CustomBezierEase.byName(“envelopeEase0”)).;
    eaze(buf).delay(2).from({Vector:buf}.to(4 ,{Vector:_allBuffers[1]}, true).easing(CustomBezierEase.byName(“envelopeEase1”)).;

    calling an onUpdate for each tween to interpolate the data doesnt seem efficient too
    i think i have to add this feature to the ease tween class
    any hint would be much appreciated

    best regards iannis

  6. Hi Philippe,

    eaze tween is great, but i´m missing a BOUNCE easing as in TweenLite 😉
    Is there a way to implement it?

    thanks

  7. You can obviously implement all the missing easing functions you want: those are just simplified Robert Penner’s easing functions.
    You should be able to even take TweenLite’s function and modify it a bit so it only takes a ‘k: 0-> 1’ parameter instead of the 4 params.

Comments are closed.