Attention: you're visiting an archived version of this post on my old website. Click here to view this same post on my new website.

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.

Posted on 11/Oct/2007 at 9:33 am | Comments (0) | Trackbacks (0) | Categories: Misc

Comments (17)

Beautiful – love the vector look. Just checked one of the examples – the guy has a class that describes a font as arrays of points! nuts!!

Posted by felix on 11/Oct/2007 at 11:43 am

Nice to see an example, there aren’t many on the interwebs at the moment.

I haven’t seen any proper 3D examples. Can it create cubes and cylinders and stuff? Does it handle semi-transparent faces? Does it blur items that are far away?

Felix:
> the guy has a class that describes a font as arrays of points! nuts!!

How do you think fonts are described? We are past the bitmap font era my friend. Perhaps a quick google for true type fonts is in order.

Posted by monk.e.boy on 17/Oct/2007 at 1:15 am

monk.e.boy: It can describe semi-transparent faces. As it uses the drawing API, you can use any of the features provided by that API, including different fill opacities.

You can create complex geometry like cubes and cylinders. The class is mainly meant for planes but you can rotate planes individually. Apparently there’s no z-sorting however so having complete rotation would need some more work.

There’s no automatic depth of field. It could easily be put together manually though, like people do on other 3d engines.

However, one has to remember the coolest thing about FIVe3D – other than the different, vector approach – is that it’s open-source. Mathieu could as well have sit on the classes and never release it to the public. So not only can use it on what they need (it has saved me some time on some work I’m doing), but also anyone can get it and add the features they want.

PS. I think you’re missing the point on Felix’s post. I bet he knows fonts are described by lines and beziers curves. But it’s the first time (at least that I know) someone uses actionscript to describe a TTF font and redraw its glyphs poly by poly. I was also quite surprised when I saw the font drawing classes. It’s the only correct approach right now, but pretty ingenious nonetheless.

Posted by Zeh on 17/Oct/2007 at 8:51 am

Yeah, using font drawing classes is amazing. Do you know how actually can you convert TTF font into AS arrays, I am sure Mathieu have developed a dedicated tool for it.

Posted by Og2t on 18/Oct/2007 at 2:13 am

I was looking for a class to help me create 3D pie charts. I wanted to make them look glassy and semi transparent.

I’ll take a look at the examples.

Have you guys found any other examples or tutorials anywhere?

monk.e.boy

Posted by monk.e.boy on 18/Oct/2007 at 7:21 am

Has anyone worked out the drawing class polygon method? It takes an array but I’m not sure how to send values in.

This is quite a package and is the same as Flash once you import the classes. It gives you a Z-Plane just by adding “_z” to anything and XYZ rotation. EVERYONE TRY IT NOW!!!

Posted by jef on 24/Oct/2007 at 8:32 pm

Og2t: I think you should write him and ask.

Jef: It’s an array of objects with xy properties as in [{x:10, y:10}, {x:20, y:20}]. If you check the original code (on /five3D/utils/Drawing.as) it should be easy to understand how each method work. There’s also the documentation PDF with the syntax which might help.

Posted by Zeh on 24/Oct/2007 at 8:40 pm

Hola, i try FIVe3D guide searching one way to load external content into 3d scene or use instance of movieclip to apply 3d funcionality. is it possible ? tks for all.

Posted by Pablo on 7/Nov/2007 at 9:24 am

I don’t think its the first time somebody’s used TTF to do describe fonts in actionscript – nic mulvaney did it for his fudge fonts project (http://fudgefonts.com/)

Posted by Simon on 23/Nov/2007 at 7:27 am

Hi!
This class is really cool!!!

do you know if instead of having to create every objects and graphics with code, if it´s possible to use this class with hand-made vector objects, png´s…?

thnx for sharing!!!
grooove

Posted by grooove on 23/Jan/2008 at 6:16 am

I don’t think so. You’ll still have to describe polygons by code. If you have premade objects, then I believe it’s beyond the scope of what five3d is trying to do, and a better option would be Papervision3d, Sandy, or Away3d.

Posted by Zeh on 23/Jan/2008 at 6:41 am

thnx once again Zeh.

oh and I must say your Tweener rulezzzzz 😉

keep up the vibe!!!

Posted by grooove on 23/Jan/2008 at 12:26 pm

this is quite amazing.
can’t wait for more examples and the documentation :O)

Posted by felisan on 21/Apr/2008 at 3:29 am

how I attach a movieclip with five3d???

sorry for my english

Posted by clipdepelicula.com on 22/Apr/2008 at 2:11 am

clipdepelicula: what do you mean?

You don’t “attach” them… you create objects and draw inside of them. It’s not like PV3D where you can attach movieclips from the library and such.

Posted by Zeh on 22/Apr/2008 at 7:26 am

monk.e.boy
> Have you guys found any other examples or tutorials anywhere?

I’m a bit late on this, but I’ve been working on a few examples using FIVe3D 2.0 and 2.1. I’d post more than one but I might get blocked as a spambot (which I am not):

1920’s-style logo (custom Arc class + depth of field effect)

Posted by Zack Jordan on 13/May/2008 at 10:33 am

Anybody know how to attach a clip from the library to a Sprite3d?

FIVe3D 2.0/2.1 is great now with textures etc but I’m struggling to get into a Sprite3d that’s not dynamically loaded or drawn using the vector drawing tools.