NanoTween

Recently I was working on preloader for a project and needed to use a tweening engine. (We have an internally developed one at Firstborn that is based off of the syntax of Tweener). I wanted to see if I could write my own that would be super small. I wasn’t as concerned with performance – meaning being able to tween thousands of objects at once, a highly unlikely scenario anyways. I wanted to keep compiled file size down, as well as number of classes. So I created a NanoTween class that is a super simple tweening utility. When compiled on it’s own, it only consist of about 1.3 Kb.

NanoTween is only one class. Each tween is created as it’s own more or less independent object. They are however synchronized to a central enter frame event dispatcher, which is kept as a static instance. Instead of providing callback functions and parameters for events such as onComplete and onUpdate (as is the case with some tween engines) NanoTween instead dispatches native Event.COMPLETE and Event.ENTER_FRAME. Additionally, the Robert Penner easing functions are externalized into separate classes to keep filesize down. Special properties such as brightness are not included, but can easily be achieved though an external proxy object.

The syntax looks like this:

The previous example will tween myMovieClip to the position (100,200) over the period of 1.5 seconds using the ease out Quad function, and is delayed by 1 second. Upon completion of the tween the hndlTweenComplete will be called. Likewise, the syntax can also be ‘condensed’ for simple tweens:
new NanoTween(myMovieClip, 1, {alpha:0}).start();

Anyhow, I thought it might be useful to other people, and I wanted to try out Google Code so you can grab it from the project page at: https://code.google.com/p/nanotween/. Once again, the purpose of this is not to replace mammoth tween engines such as gTween, TweenMax, or Tweener. Rather, it is intended for special cases where size is the main importance such as preloaders and banner ads.

 

12 thoughts on “NanoTween”

  1. One thing I tried with ztween a while ago was having instances like that and then using events…

    What I’ve learned with that is that it turns out it’s pretty annoying to work with those (you always have to create an instance before you add the callback), you lose the ability to have ‘immediate’ tweens firing events if you don’t have ‘onComplete’ parameters (because I like tweens with time 0 to be ran immediately instead of at the end of the frame) and events are really, really slow (just doing a dispatch takes a long time, even if no listener exists!).

    I used a bunch of additional boolean properties to ‘shortcut’ the event dispatching for a while to make it faster (ie, only do a dispatchEvent(new Event(TWEEN_COMPLETE)) if hasAnyTweenCompleteListener is true), but honestly, in the end I caved in and used normal callbacks. They’re faster and easier. The only difference is that the way ztween handles callbacks now is by using what I’ve called a ZTweenSignal which is just an extremely simplified copy of Penner’s Signals class. That way you can have them inline on tween creation but also add them later (any number of them) like events.

    xx = ZTween(mc, {x:10}, {time:1});
    xx.onComplete.add(myFunc);

    Events make a lot of sense syntactically, but when you just need to make something after something gets somewhere, being forced to create temporary instances become a pain in the ass.

    1. Heh, yeah, one of my co-worker just mentioned that to me this morning. Pretty funny how I had no idea there was a TweenNano when I came up with the name NanoTween. I originally thought of MicroTween but that too was taken. I guess there are only so many tween names out there :p

  2. Pingback: AS3 Class Library

Leave a Reply to Eric Cancel reply

Your email address will not be published. Required fields are marked *