Heye Digital Lab » flash

Ribbons!

Jonas Volger — Mon, 03 Jan 2011 10:28:31 +0000

Im Rahmen einer Dolormin-Facebook-Appplication galt es einen dynamischen Textstreifen ähnlich eines Paperstreifens einzublenden. Um ab von den üblichen Effekten zu kommen, haben wir uns für einen „Ribbon-Effect“ entschieden, der den Textstreifen entlang eines Splines aus dem Hintergrund nach vorne animiert. Wie so oft lag der Knackpunkt jedoch bei dem Wort „dynamisch“. Heraus gekommen ist folgendes:

Die virtuelle Obstwiese

Bosse Küllenberg — Mon, 23 Aug 2010 18:52:22 +0000

Seit einigen Wochen ist es grün im Heye Digital Lab. Auf den Monitoren werden digitale Bäume gezüchtet, Fotos blühender Wiesen hängen als Anschauungsmaterial an den Wänden und ein Hauch von Frühling liegt in der Luft. Auch die Tage werden scheinbar wieder länger – zumindest geht das Team jedoch später nach Hause.

Wir arbeiten fieberhaft an einem spannenden Projekt in Flash / Flex mit Papervision 3D und Facebook.
Das Ziel:

Eine interaktive Plattform,
auf der jeder User einen Baum pflanzen kann
und diesen hegt und pflegt und wachsen lässt.

Die Herausforderung:

Wir wollen, dass die Plantage erlebbar ist. Wir wollen das sie begehbar ist und interaktiv.
Wir wollen das sich jeder User mit seinem Facebook Account einloggen kann. Direkt in unserer pv3D Website. Wir wollen unsere Facebook Freunde sehen und deren Bäume betrachten und pflegen können.
Wir wollen einen ganz besonderen Look, der natürlich und gleichzeitig auch ein wenig phantasievoll ist. Eine Wiese auf der ich auch gerne ein Picknick machen würde.

Wir nennen es “social growing”

Und dies ist bisher passiert …

Erste Herausforderung – wie viele Papervision3D Polygone verträgt ein durchschnittlicher Browser?

Am Anfang standen viele Feldversuche. 3D Modelle in Cinema 4D aufbauen, in unsere pv3D Testumgebung laden, Framerates checken.
Und vor allem: Immer versuchen bessere Performance zu gewinnen.

Unser erstes Testmodell eines Baumes.

Sieht noch etwas dürftig aus, aber es dreht sich immerhin.

Die Obstwiese von oben

Läuft schon ganz gut – die Map läd sich ähnlich Google-Maps dynamisch nach.

Der Baum wächst.

Wir sind ein gutes Stück weiter gekommen, der Baum ist etwas lichter geworden und ganz so allein steht er nun auch nicht mehr da.

Ach ja, die Sonne scheint nun mit einem leichten Lens Flare und auch die Wolken ziehen schon am Himmel vorbei.

Mehr Gras, mehr Schatten, mehr von allem!

Langsam macht es schon Spaß über die Wiese zu fahren.

Wernesgrüner Relaunch

Guido von Marientreu — Fri, 12 Feb 2010 14:36:48 +0000

Der neue Online-Auftritt der Wernesgrüner Brauerei ist ab sofort jünger, frischer und urbaner als bisher. Wir von Heye Digital Lab haben im Pitch mit einem Gesamtkonzept überzeugt, das den klassischen Markenauftritt aufgreift und zeitgemäß in die digitale Welt verlängert. In der Umsetzung haben wir bewusst auf viel Text verzichtet und großformatige Bilder und Filmsequenzen, quasi ohne Ladezeiten, für die Marke sprechen lassen. Link

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.

bebe Young Care Banner Beispiel:

CASIO Exilim H10

Daniel Wiedemann — Mon, 04 Jan 2010 13:09:26 +0000

Finde die 5 verstecken Animationen

Für das Webspecial für die CASIO Exilim H10 wurde eine interaktive Foto-Urlaubs-Story entwickelt. Foto für Foto stapelt sich die Urlaubsgeschichte, während man unter dem Stapel beobachten kann zu welchem Zeitpunkt man sich in der Story befindet.

Für den Fotostapel wurde extra ein spezieller Algorithmus entwickelt, der einen Videoplayer in einen wachsenden Fotostapel verwandelt.

Probiert es doch einfach selber einmal aus und findet die 5 versteckten Animationen.