Flash and JavaScript 3D with Sandy-HX - Tweening

Flash and JavaScript 3D with Sandy-HX - Tweening
Page content

It is very common in visual applications to transition the properties of an object over a period of time. Perhaps you want to move an object from one position to another, change its colour, or modify its size. Writing this code by hand is not difficult, but it is tedious. You have to calculate how quickly to change a variable, watch the amount of time that has progressed, apply the new values to the object and stop when you are done.

Thankfully Tweening libraries take care of this transition for you. You simply supply the details, start the tween, and then forget about it: the Tweening library will take care of the rest. It saves you as a developer from writing a lot of boilerplate code, and it makes it very easy to implement some interesting effects.

Haxe has at least two tweening libraries: TweenerHX and feffects. TweenerHX does not support JavaScript applications, so for this example we will use the feffects library.

TweenedObject.hx

The TweenedObject class creates a two cubes – one to represent the destination point (the red cube), and the second to represent the current position of the object (the yellow cube).

The tweening code is set up in the setTween function. First a new random destination is calculated. [code]

Then two new Tween objects are created. They modify the x and z properties of the TweenedObject class. This needs to be done because tweening doesn’t work on the getter/setter functions that we would normally use to modify the position of a Shape3D. So instead we create two vanilla properties called x and z in the TweenedObject class, modify those, and then reflect the changes back to the x and z properties of the Shape3D in the enterFrame function.[code]

The setTween function is then set to be called again once the tween has run its course. This allows us to set up a loop where new tweens are created as the old ones finish. [code]

These Tween objects are started by calling their start function. [code]

Finally the position of the cube that represents the destination position is updated. [code]

In order to ensure that the two cubes appeared above the blue ground plane I have set their forceDepth properties. There is a bug with the current version of Sandy-HX that means the values of the forceDepth properties are applied in the opposite direction in the JavaScript compilation: Flash draws objects with a smaller forceDepth value infront of those with a larger forceDepth value, while JavaScript does the opposite. Some conditional compilation commands allow us to get around this issue though. [code]

Tweening is a very simple concept, but can produce some very impressive results. This demo has been a small example of what you can do with tweening, but its flexibility means that tweening can be use to create almost any sort of animation or transitional effect.

Check out the online demo here, and download the source code here.

Images