Recently I wrote a tutorial for The Tech Labs, and it has been published yesterday. It is a tutorial which shows how to build a simple 3d photo album using the FIVe3D and TweenLite libraries. You can read it here. I hope you’ll will find it useful!

The Tech Labs is a website recently started by Carlos Pinho. It “is intended to be a tool to contribute for the research, information and knowledge for the IT professionals as also for the non-techies.” Be sure to check it out. There’s already a few good tutorials in there and new stuff is coming every week.

Carlos also runs the Flash Enabled blog, which features cool stuff from all over the web. You will find there plenty of links to resources ranging from Photoshop tips, to Actionscript and Flash/Flex tutorials. It is a great source of information, so be sure to visit!

Ever since Mathieu Badimon released FIVe3d AS3, I was thinking that it would be great to build a 3D animated banner using this library.

The main challenge with banners is obviously the file size. I had to customize FIVe3d a little bit for this one. By organizing some imports and removing some parts of code I did not use I gained a couple of kilobytes. For the animation I used TweenLite, which is a much lighter alternative to Tweener. My final result is around 40KB. My original plan was something closer to 30KB… but ok!

Except for the final 2D animation of the logo, everything is 100% script. All the 3D objects are drawn in code using the FIVe3d drawing functions (which are based on the standard Drawing API). The result is around a 1000 lines of code, plus the code of the libraries – pretty much for a banner, huh?

At Multimania in Belgium, I’ve seen Serge Jespers from Adobe presenting a sneak peak of
Flash CS4 IDE. It seems that it will be possible to prepare this kind of animations directly on the timeline… and probably in a matter of a couple of hours! So this kind of experiments will become obsolete. Nevertheless, this is still a distant future and now FIVe3D rocks!

Source. For anyone who wants to see how it’s done here are the sources. The code is not super clean, but I hope it is readable. As always I release it under MIT license.

As a final note, a few words about the site this banner was made for. Futbolowo.pl is a community site run by a friend of mine (it is all in Polish only). It allows local football clubs to run their websites based on a specialized content management engine.

I downloaded the FIVe3D engine in AS3 a couple of days ago and started to play with it a bit.

The first thing to notice is its simplicity. What I liked in particular is that the structure of classes corresponds exactly to the structure used in standard AS3. Where in AS3 there is a Sprite, in FIVe3D there is a Sprite3D. And you can use a special property Sprite3D.graphics3D to draw 3d objects exactly as you would use classic Sprite.graphics to draw 2d objects. Of course, all the methods like lineTo, curveTo, beginFill or drawRect are there. So if you ever worked with the drawing API everything will look very familiar in FIVe3D. And there is a Shape3D too…

Another nice feature is that the class Sprite3D extends a regular Sprite. As a consequence, all the features of a Sprite are available in Sprite3D, including event handling. It basically means that adding interactivity to you 3d objects works exactly the same way as with regular Sprites – just use listeners and the MouseEvent class!

However, the most impressive part of the package is the way fonts are handled. Font outlines are transformed in FIVe3D into special classes that hold all the coordinates needed to render each character. At runtime, they are rendered as shapes drawn using the Graphics3D object.

From a designers point of view the nice thing about FIVe3D is the quality of the rendering. Flash has always had very good antialiasing support for vector graphics, and FIVe3D takes full advantage of this.

The last big pro of FIVe3D is the size of the files. An animation with a few simple shapes and lines probably will not exceed 10KB. Isn’t that nice?

As a final note, be sure to download the updated version 2.0.1 available now on the project page. The initial 2.0.0 version was throwing some errors when compiled under ‘Strict Mode’ in Flash IDE. Now it is fixed.

Also, remeber to come back here some time, because I will be definitely posting more on that subject.

UPDATE MAY 12th 2008 I posted the source files of this demo. You can download them here.

With all the hype about Papervision3D, Away3D and others, FIVe3d is an interesting tool to look at, because unlike others it renders 3D graphics using vector rather than bitmap data. There are some cases, like projects with lots of simple shapes with no textures and, above all, text, where this approach should give much better results. Check out the project site and you will immediately see what I mean.

There is an excellent post by Andy Zupko about rendering text in Papervision3D, that describes some tips and tricks to use text in PV3D. I think it would be interesting to compare how those two engines are dealing with this.