Papervision3D für Banner?

Guido von Marientreu — Thu, 11 Feb 2010 19:31:43 +0000

Ein klassisches Thema: Die Kreation kommt mit einer vermeintlich simplen Banneridee in 3D. Wir selbst mussten uns nun einmal durch alle Varianten der

Umsetzung quälen, aber wir wollten partout nicht mehr einsehen in Zeiten von Papervision und away3D mit optischen Fakes zu hantieren. Die technischen

Bedingungen:

Filesize: max. 75 KB

Flash Player Version: bestenfalls V9

AS Version: bestenfalls AS3

Die Layouts, die es umzusetzen gilt:

(BILDER EINSETZEN)

UMSETZUNG IN PAPERVISION

Das Papervision3D Framework “Great White 2.0″ fällt beim Zielwert von 75KB komplett aus – alleine bringt es schon 68 KB auf die Waage. Eine von uns abgespeckte Variante – nur mit den notwendigen Klassen – kostete noch 49 KB. Zu viel, um mit den 3D Modellen und Bildern zu einem qualitativ akzeptablen Ergebnis zu kommen. Ernüchterung – aber immerhin hatten wir es versucht.

Unsere offene Ressource gibt es hier zum Download.

UMSETZUNG IN FIVe3D

Die Lösung brachte die noch wenig thematisierte Vektor 3D Engine FIVe3D. Das Framework ist mit nur XX KB extrem schlank. Die angebotenen Klassen sind für

simple 3D Umsetzungen wie man sie in einem Banner ohne allzu große Interaktion verwendet völlig ausreichend. Leider ist die Dokumentation nicht ansatzweise so umfangreich wie bei den Alternativen – also mit der Nase in den Code und ansehen, wie das Ding aufgebaut ist. Ein paar Stunden später war die erste Version fertig.

Unsere offene Ressource gibt es hier zum Download.

Ein klassisches Thema: Die Kreation kommt mit einer vermeintlich simplen Banneridee in 3D.

Die technischen Bedingungen:

Filesize: max. 75 KB
Flash Player Version: bestenfalls V9
AS Version: bestenfalls AS3

Die Layouts, die es umzusetzen gilt:

Umsetzung in Papervision3D

Das Papervision3D Framework “Great White 2.0″ fällt beim Zielwert von 75KB komplett aus – alleine bringt es schon 68 KB auf die Waage. Eine von uns abgespeckte Variante schlug immer noch mit 49 Kb zu Buche. Zu viel, um mit den 3D Modellen und Bildern zu einem qualitativ akzeptablen Ergebnis zu kommen. Ernüchterung – aber immerhin hatten wir es versucht.

Umsetzung in FIVe3D

Die Lösung brachte die noch wenig thematisierte Vektor 3D Engine FIVe3D. Das Framework ist mit unter 30 KB extrem schlank. Die angebotenen Klassen sind für simple 3D Umsetzungen wie man sie in einem Banner ohne allzu große Interaktion verwendet völlig ausreichend. Leider ist die Dokumentation nicht ansatzweise so umfangreich wie bei den Alternativen – also mit der Nase in den Code und ansehen, wie das Ding aufgebaut ist. Ein paar Stunden später war die erste Version fertig.

Optimierung

Um den Code noch schlanker zu machen, haben wir auch noch an der Tweening Engine gespart. TweenLite ist mit 4.7 KB für uns schon lange der Standard für Banneranimationen. Mit dem v11 Release des Greensock Tweening Frameworks gibt es ja jetzt zum Glück TweenNano, welche in As3 gerade mal mit 1.6 KB beansprucht.

Am Ende war der Banner inklusive Bilder keine 60 KB groß, sodass wir am Ende die Bilder bei der Komprimierung mit einer stolzen Qualität von 60% ausgeben konnten.

Unsere offene Ressource (mit anderem “Content” – deshalb größer) gibt es hier zum (Preview) Download.

Heye Digital Lab » code

Papervision3D für Banner?

Umsetzung in Papervision3D

Umsetzung in FIVe3D

Optimierung

bebe Young Care Banner Beispiel: