A banner built using FIVe3D
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.
June 4th, 2008 at 10:31 am
I Think that’s very cool, not heard about that 3d engine before but surely give a try if i has a chance.
At first view the code is really lightweight and well written.
Best,
A.
June 4th, 2008 at 3:53 pm
hmm, i guess people don’t yet understand that the only point of using flash based 3d engines is that they provide real-time interactivity… i could redesign that same banner in cinema4d and after effects way doper, and render out an optimized flv video that would only be a couple kbs heavier. good post nonetheless.
June 4th, 2008 at 4:01 pm
This is pretty cool, but most publisher don’t accept banners in a Flash version higher than 8 (most of them are still in version 6!!!). I can’t wait till they accept stuff done with AS3
June 4th, 2008 at 4:16 pm
@escee totally agree with the interactivity part, but it was not my goal here this time. I can also imagine how much cooler such banner would be executed in Maya or Cinema4D and AE. But a 40KB FLV out of it? I think it would be very very hard to acheive that!
June 4th, 2008 at 5:53 pm
nicely done bartek.
czy ty urodzilesz sie w polsce i mieszkasz w USA?
June 6th, 2008 at 8:45 pm
Nice work man.
I appreciate good-looking, code-intensive banners :)
June 10th, 2008 at 9:05 am
Very nice banner!
@zedia.net
//This is pretty cool, but most publisher don’t accept banners in a Flash version higher than 8 (most of them are still in version 6!!!). I
I’ve just delivered 3D flash 9 banners to belgium sites and yes they were doing difficult for the version. They did’nt even know Flash was already that far. The most pain was not to make them understand that the client was paying for the ads and that they had to adjust their obsolete systems, not way arround. No the biggest problem was the “ClickTag” system they use. They all claim they use this standard. I’ve ended up support more than 7 different variations of it…
June 10th, 2008 at 11:47 pm
[…] Bartek shows this time a cool banner using the FIVe3D. He also mades available the source of the banner so you can check the code […]
June 11th, 2008 at 12:07 am
@zedia. As far as I checked on the polish market, version 8 is generally accepted, but most of the media companies do not want flash 9 indeed. The coverage is now around 99% so I can’t understand why. I heard though that one of the major polish portals started to accept flash 9 lately, so things are about to change….
@fabrice you are right. Nobody will give me back all those hours spent on creating verions of the same banner for those different “standards” :)
June 11th, 2008 at 8:29 pm
I like this engine a lot; it’s extremely easy to use and I just finished my first commercial project with it today. I wondered when someone might try a banner with it.
Also, I would really like to see an example of a 40k FLV that looks like this. I think 40k might be pretty optimistic.
June 19th, 2008 at 3:16 pm
Also, I just put together another experiment with FIVe3D, and my SWF size ended up at 16k (example here). Maybe there’s more fat that can be trimmed.
June 24th, 2008 at 2:07 pm
Nice work! You could also make the animation in 3D Max and import as vectors (to go below 30k and meet publishers requirements) but I appreciate your effort! Especially it would be extremely easy (with no extra size cost) to remake it as a banner-game, i.e. 3D football penalty or something. Just to impose clicking!
Big up!
PS Ja urodzilem sie w Polsce i mieszkam w UK. ;-) Jak tam w Sztokholmie? :)
July 14th, 2008 at 1:21 am
isn’t there an as2 version of five3d as well?
30k and flash8 are still requirements flash banners on most sites..
if anyone’s got five3d banners running in as2 and under 30k give me a shout!
July 15th, 2008 at 7:07 pm
@jouni yes, there is an AS2 version, but I haven’t tried it, so I am not sure about weight/performance for that one. You can download it from FIVe3D homepage - it is the Version 1.0 of the package.
July 25th, 2008 at 6:54 pm
[…] de Five3D… ¿Cómo hacer un banner publicitario para web en 3D?… La solución está en este tutorial. Excelente idea: la flexibilidad de Flash con la presentación de Five3D crean un banner fuera de […]
August 30th, 2008 at 6:36 pm
[…] Direct link: click here […]
September 9th, 2008 at 10:52 pm
Usually I use Illustrate for 3ds max - it can export 3d animation in swf format. Very simple!