AS3: How low can you go? Tny, a 1.9KB Tweening engine for Banner Ads December 10, 2007
Challenged by a Banner ad size limit, I was curious how small I could create a tweening engine with basic color and sound support. Got it down to 1919 bytes, it can get down to ~1500 bytes if you don't need sound or color. Leaving room for more assets (damn Myriad Pro is a hog!)
Of course it's not just for banner ads, it basically wraps a given DisplayObject (including TextFields), and behaves just like setting properties of a clip directly (x, y, xscale), except that it eases to get there. Setting the duration acts as the play().
This makes it pretty easy to prototype with, so much so I'm contemplating using it as the proxy for whever I normally position things, to force me to think about motion earlier, just set duration = 0, and it will jump to the end. It shares the same basic API as Tweeny, so progressive enhancement (if you need the playhead API) is easy to do.
It' s not the fastest engine purely on code, but with rendering overhead, it's among the best available in GreenSock's great little starfield tweening benchmark util
Here's an example of tweening the color and position of textfields, note that the engine is 1.9K, this banner is 10K due to fonts:
Using this code.
-
-
import com.troyworks.core.tweeny.*;
-
-
//similar to t1.target = txt1;
-
var t1:Tny = new Tny(txt1);
-
var t2:Tny = new Tny(txt2);
-
var t3:Tny = new Tny(txt3);
-
var t4:Tny = new Tny(txt4);
-
-
//Setup colors to cycle through
-
var c:Array =[0xFFFFFF, 0xCCCCCC, 0x333333, 0x000000];
-
-
//Set Bounds //
-
var ow = stage.width - txt.width - 100;
-
var oh = stage.height - 80;
-
-
function jump(t:Tny):void {
-
t.x = txt.width + (ow * Math.random());
-
t.y = (oh* Math.random());
-
t.scaleY = t.scaleX = Math.random()*3;
-
t.ease = Elastic.easeInOut;
-
/////// Re-Cycle Colors ////////////
-
var cc = c.shift();
-
t.color = cc;
-
t.colorP =10; //10% tint
-
c.push(cc);
-
-
t.delay = Math.random() * 1;
-
t.duration = Math.random() * 4 + .5;
-
///// on complete callback self ////
-
t.onComplete = jump;
-
t.onCompleteParams =[t];
-
}
-
-
jump(t1);
-
jump(t2);
-
jump(t3);
-
jump(t4);
It's open source, it will be up after the first of the year, still trying to figure out how to get google code's SVN to show up on the blog, and there may be a bug or two lurking I haven't found yet.
As an aside, as this post hopefully shows, the blog is improving technically in periodic jumps, with some exciting upgrades planned in 2008. While a webdev pro, It's my first time professionally blogging and first time using Wordpress. Over the weekend upgraded to the latest, moved it to the correct domain, added several plugins for flash, code snippets sand spam filtering so comments and registration have been reenabled should work correctly. Permalink structures have changed so hopefully google will start indexing correctly by post instead of category.
In theory you should be able to subscribe to changes on pages you're interested in.
1 responses to 'AS3: How low can you go? Tny, a 1.9KB Tweening engine for Banner Ads'
[...] those common points in the 240 superset are indicated by a flag. What I ended up doing was using Tny to fade the extra particles in an out. In retrospect I would have preferred a [...]
Add a Comment: