Philippe.me

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

Tags: AS3, Eaze, libray

This entry was posted on Friday, November 6th, 2009 at 19:51 and is filed under AS3, Eaze, library. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.