Tweening in FIVe3D
You may not have heard of it, but FIVe3D is Mathieu Badimon’s collection of ActionScript 2 classes to create 3d geometry in Flash movies. You can see FIVe3D at work at Mathieu’s award-winning LAB website.
The big difference when compared to existing packages such as Papervision3D - which is also manages to be its biggest advantage and bigger disadvantage - is that FIVe3D is based on vector drawings; meaning all geometry is produced by the drawing API (well, technically, Papervision3D also uses the drawing API, but in its case, it’s more focused on a surface drawn with bitmap fills).
That is an advantage because since all points and edges used are known, the surface projection and distortion can be as accurate as mathematically possible; drawing things like text using this extension can produce a much better result than having it on a plane and having it mapped using triangles. That is also a disadvantage because you can’t have texture fills, and you need to describe all of your drawing data mathematically (including all text).
Still, the result is pretty good and that’s why this is a great collection of classes to have available. Depending on the result wanted, it makes total sense to pick FIVe3D over any other 3d rendering extension.
While written in Actionscript 2, FIVe3D uses a structure and syntax that is very similar to Actionscript 3. I recently started using FIVe3D on a website I’m developing, and I first gave it a whirl to see how easy it was to tween properties of instances created with it. Below is an early result of that experimenting; click the object to rotate it to random directions. It’s one of the original FIVe3D examples, but with just a few lines added to make the transition go smoothly from one random rotation to the other.
Download the source here (Flash 8, Actionscript 2).
Again, this is an original FIVe3D example, so I won’t claim ownership over it or anything. This is all the code I’ve actually added to it:
import caurina.transitions.Tweener;
...
Tweener.addTween(this, {
_rotationx:Math.random()*100-50,
_rotationy:Math.random()*100-50,
_rotationz:Math.random()*100-50,
time:0.6,
transition:"easeInOutBack"
});
Because FIVe3D exposes aspects of its instances as numeric properties, animating via actionscript on it is pretty much a no-brainer: just tween the values.
If anyone is interested, I’d definitely recommend anyone giving FIVe3D a test. It doesn’t replace more robust packages such as Papervision3D, but the reverse is also true.
