I have several reasons for choosing not to use Greensock libraries for tweening:

• I have great respect for TweenLite, but I have rarely used it in anger. Most of the time, the applications that I work on have some element of pay-to-play, and Greensock has an unusual license that has put-off at least two employers from using it. I do not want to learn a library that I can only use on some of my projects;
• For all the clean code we try to write, Tweening libraries often jar with their funky APIs. I didn’t want my tweening library to be a statically-referenced black-box of almost unreadable code, I wanted it to have elements with well-defined responsibilities, objects that encapsulate concepts of time, tweens and eases. I wanted to be able to TDD these elements and offer my tests for public scrutiny. In short, I wanted my tweening library to feel more like the rest of my code and less like dark magic;
• Probably most of all, I wanted to write it because I could, and because I hadn’t yet.

Speed and Memory

In the tests that I have done so far, gaia-tween is fractionally behind TweenLite on speed. However, it is ahead in memory consumption! Currently the strategy for gaia-tween is to instantiate the elements that it needs and pool them indefinitely, so there is no garbage collection taking place, but I am looking to add that in as a future iteration. During tweening, no object is constructed nor destroyed by the tweening engine. Compare the memory profile of the two tween engines, from the SpeedDemo test below (SpeedDemo source here):

gaia-tween memory graph

TweenLite memory graph

gaia-tween uses considerably less memory to run than TweenLite.

Structure

The API challenge was to find the right separation of responsibilities to keep the tween engine extensible without the extender having to do unnecessary work. The key features of this API are:

• Time is an independent concept from the tweening engine. A Time object is passed into the Tweening engine, which responds to changes in milliseconds-elapsed appropriately;
• The ease functions have been simplified so that eases take one parameter – a proportion between 0 and 1, and return back a proportion between 0 and 1. This should make it easier for custom eases to be implemented;
• The duration of a tween, the delay before starting it and any ease that may be applied to it are defined at the moment that a tween is added;
• All other definition depends upon the context of the tween, and can be defined in a TweenForm. Currently three different kinds of TweenForms exist: a PropertyTweenForm for performing classic property tweens on objects; a ColorTweenForm for tweening the ColorTranform.color property of a DisplayObject; a MethodTweenForm for defining a method that will take the proportion between 0 and 1.

This diagram may help explain the concepts more easily:

I have also added a convenience class that does the job of creating the TweenForms for you, GaiaTweens.as. This object-pools property tween forms and exposes a simplified API for those who want their tweening engine to keep everything under the hood.

Examples

The ColorTweenForm in action (roll-over to trigger):

By passing in a different Time class, timeline animations are possible:

Some issues with time-lining remain, and will be worked on for future improvements to the engine.

Notices and Signals

I am a huge proponent of the as3-signals library. When Robert Penner originally introduced Signals, I was working on something similar with my friend Simone. Since that time I have used Signals in almost every project I have worked on. However, One thing I really want to be able to do is to define a signal that only exposes an addOnce method. I have advocated this but there is clearly a disagreement about the direction that signals should take. So, I have created my own – simplified – implementation of signals. For want of a better name, I’ve called them Notices. However, if you are interested in using or trying-out gaia-tween but are committed to using Signals, there is a signals branch that replaces the Notices with Signals.

Feedback

I have produced this for my work at Gaia Interactive, but Gaia have agreed to it being released because we would greatly appreciate feedback about it so that it can be improved. Please comment on API decisions, code implementations, feature requests, and so on. The more feedback I get, the more likely I can produce a robust, scalable alternative to the Greensock tweening stable. Or of course, you could fork the library and help improve it more directly!

The website was well received, Creative News attributing some of the success of the book to the website and the surrounding social media campaign.

The site itself was assembled in under two weeks by myself and Colin McKinney. The page turning mechanism was built from scratch in that time in order to guarantee integration with the initial animation sequence, the bookmark turn effects. More polish could have been applied with a longer time-frame, but this was not a bad effort, in the circumstances.

This one is more simple, though the logic is exploded over multiple classes. You can get the source files here. I create a bunch of BitmapData objects with semi-transparent circles to represent snowflakes, called FlakeForms. Then, create a bunch of Flake objects which are essentially positions at which those formal flakes should be drawn. Each EnterFrame, wipe the BitmapData clean, update the flake positions and draw the formal flakes into the updated positions.

FlakeForm

/**
 * Copyright (c) 2009 Alec McEachran
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 */
package
{
	import flash.display.BitmapData;
	import flash.display.Graphics;
	import flash.display.Shape;

	public class FlakeForm extends BitmapData
	{

		public function FlakeForm(radius:int, alpha:Number)
		{
			var n:int = radius << 1;
			super(n, n, true, 0);

			var shape:Shape = new Shape();
			var graphics:Graphics = shape.graphics;

			graphics.beginFill(0xFFFFFF, alpha);
			graphics.drawCircle(radius, radius, radius);
			graphics.endFill();

			draw(shape);
		}
	}
}

Flake

/**
 * Copyright (c) 2009 Alec McEachran
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 */
package
{
	import flash.display.BitmapData;
	import flash.geom.Point;
	import flash.geom.Rectangle;

	public class Flake
	{
		private const ORIGIN:Point = new Point(0, 0);

		private var form:FlakeForm;

		private var bounds:Rectangle;

		private var position:Point;
		private var x:Number;

		private var y:Number;

		private var dx:Number;

		private var dy:Number;

		public function Flake(form:FlakeForm, bounds:Rectangle):void
		{
			this.form = form;
			this.bounds = bounds;
			this.position = new Point();

			x = bounds.left + Math.random() * bounds.width;
			y = bounds.top - 20 + Math.random() * (bounds.height + 20);
			dx = Math.random() * 4.2 - 1.5;
			dy = Math.random() * 2 + 1;
		}

		public function update(bitmapData:BitmapData):void
		{
			x += dx;
			y += dy;

			if (x > bounds.right)
				x = bounds.left + x - bounds.right;
			else if (x < bounds.left)
				x = bounds.right + x - bounds.left;

			if (y > bounds.bottom)
				y = bounds.top - 20;

			position.x = x;
			position.y = y;
			bitmapData.copyPixels(form, form.rect, position, null, ORIGIN, true);
		}
	}
}

Snow

/**
 * Copyright (c) 2009 Alec McEachran
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 */
package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.events.Event;
	import flash.geom.Rectangle;

	public class Snow extends Bitmap
	{

		private var count:int;

		private var flakes:Array;

		public function Snow(width:int, height:int, maxRadius:int, count:int, differentFlakes:int = 20)
		{
			super(new BitmapData(width, height, true, 0x00FFFFFF));
			this.count = count;

			var bounds:Rectangle = new Rectangle(0, 0, width, height);

			var factory:FlakeFactory = new FlakeFactory();
			var forms:Array = factory.generateForms(1, maxRadius, differentFlakes);
			flakes = factory.generateFlakes(count, bounds, forms);

			play();
		}

		public function play():void
		{
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}

		public function stop():void
		{
			removeEventListener(Event.ENTER_FRAME, onEnterFrame);
		}

		private function onEnterFrame(event:Event):void
		{
			var i:int = count;

			bitmapData.fillRect(bitmapData.rect, 0x00FFFFFF);
			while (i--)
			{
				var flake:Flake = flakes[i];
				flake.update(bitmapData);
			}
		}
	}
}

Firstly, a big nod to Shane McCartney, who has done the hard work of creating this new tweening library.

A new library means learning a new syntax. As I go, I will post a few things that I learn along the road, since as yet, Tweensy is not that widespread:

A Simple Tween

To tween an object’s position you can use a static method, like TweenMax:

Tweensy.to(myDisplayObject, {x:300, y:100});

It will tween over half a second, unless you add a third parameter indicating the duration of time. This is very close to TweenMax. The static method produces a TweensyTimeline, or you could just create a new TweensyTimeline and add the various properties to it.

A Color Tween

To tween an object’s color, you can create a TweensyGroup and add a colorTransformTo call to it.

var tween:TweensyGroup = new TweensyGroup();
var color:ColorTransform = new ColorTransform();
color.color = 0xFF0000;
tween.colorTransformTo(myDisplayObject, color);

A TweensyGroup I thought? I bet you can tween more than just one item simultaneously with that. And so you can:

Roll-over to trigger the tweens. Click outside when you’ve had enough! If for some odd reason you want the source then you can download it here.

A bit of API confusion

As yet, I’m not really clear what is the difference between a TweensyGroup and a TweensyTimeline. I’m sure it will become apparent. You can’t call TweensyTimeline.colorTransformTo though TweensyGroup.colorTransformTo returns a TweensyTimeline. My suspicion is that Shane spends longer at the chalk-face of creating his extremely impressive BitmapData effects than he does doing the dull-but-important job of ensuring that his API is clean and tidy. Alternatively, there may be a very good reason for the API decision, in which case I am extremely sorry for that supposition.

I am doing some work on isometry and wanted to check how primitive objects look if they are not rendered isometrically… so I changed my “metrics” object to a non-isometric renderer, and this is the result! (It has an identical code base to my ‘isometric fun’ with one class of about a dozen lines substituted in). It is both pretty, and architecturally elegant, so I thought I’d share it here.

Oh, and it qualifies as a non-unit test test case for my other “metrics” class – test driven development cannot always be done through a test runner.

Test Driven Development is a wonderful thing. When I am calm, not under the pressure of deadlines and working most effectively, I would argue that TDD is the optimal way of working. Unfortunately, UI testing does not sit easily within TDD. To really check that graphical code works, you need to see it.

I was working back through isometry logic that I did almost a year ago, revisiting and writing fresh libraries for a project that my company is working on. I found myself needing to visually test that rendering cuboids in isometric space works exactly as I expect it to. It’s one thing for ASUnit to ‘run green’ in the test cases that I could pre-calculate, and quite another to see all these lovely cuboids drawn out. These tests are useful additions to the suite of work, and I thought it was fun enough to share.

It’s a small thing, and not my day-to-day job by any means, but a bit of programmatic animation was a welcome change from the long haul of UI, MMO and avatars.

The football was created using a DisplacementMap. It’s unusual to find a DisplacementMap example that isn’t a map of the Earth, but it works in the same way as all of those others, with the container being rotated as it goes.

A tutorial will follow, but the Displacement Map is about the most complicated bit of Flash to follow, particularly if you’re not a mathematician, so it will take some time to explain clearly! Watch this space.

If you have multiple frames of animation over multiple layers, there’s really no good way of moving all the elements in one go (or if there is, neither Colin nor I know about it), so I’ve created this little JSFL script wrapped into a Flash front-end for him.

This swf needs to be installed into your installation folder to function, which depends on your OS and Flash version. The paths for CS3 are:

• (WinXP) C:\Documents and Settings\[USER]\Local Settings\Application Data\Adobe\Flash CS3\[LANG]\Configuration\WindowSWF
• (OSX) /Users/[USER]/Library/Application Support/Adobe/Flash CS3/[LANG]/Configuration/WindowSWF

where [USER] is your username, and [LANG] is your language (probably “en”).

What it does is pretty simple: Whatever is on stage at the time will all get moved by the amount you specify. It will not respect locked layers, if it’s an element on stage, it’s getting moved!

Source FLA

You are welcome to inspect the source, compile it yourself, so-on and so forth. The source FLA is here. If you do download the file, you will note that I embedded the jsfl code into the fla, wrapped into an XML cdata tag. This is just because you’re not allowed to break Strings across lines in the Flash IDE Actions panel.