Heye Digital Lab

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.

Stylokram & Mädchenchic

Bosse Küllenberg — Sun, 23 May 2010 18:54:17 +0000

Die bebe Generation hat nun auch den Social Media Space betreten! Auf Facebook, MySpace, Twitter und SchuelerVZ lassen sich zukünftig alle laufenden Projekte verfolgen und Inspirationen zu den Themen Fashion, Lifestyle, Music und Active mitnehmen.
Wer nun Lust bekommen hat sich selbst zu beteiligen, kann sich auch gleich mit den Zugangsdaten der entsprechenden Social Networks auf bebe Generation ohne zusätzlichen Account anmelden und selbst aktiv werden.

Unterstützung für die jungen Wölfe

Silvia Appel — Fri, 14 May 2010 13:46:40 +0000

Neben den unzähligen Award-Plattformen auf denen sich Arter und Texter untereinander messen können, haben Berater meist das nachsehen. Der Werbenachwuchs hat jetzt aber mal die Chance, Zähne zu zeigen und wird auch seitens des Heye Digital Lab tatkräftig darin unterstützt.
Unter dem Titel „Jung.Hungrig.Ausgezeichnet.“ sind die Absolventen der Beruflichen Medienschule HH-Wandsbeck auf der Jagd nach der Auszeichnung für den besten Nachwuchs in Marketingkommunikation 2010.

Mehr Infos unter www.junge-woelfe.com und natürlich auf Facebook.

St. Sin Website Relaunch

Daniel Wiedemann — Wed, 24 Feb 2010 20:35:55 +0000

Gegen verschiedene unangenehme Atem-Gerüche wirbt nun St.Sin auf einer neuen Homepage. Für die kompakt gehaltene Website wurde die native Flash 10 3D Engine zur Darstellung der Produkte in einem interaktiven Karussell eingesetzt. Bei Klick auf eines der Produkte morpht das Packaging in die nächst größere Variante und zurück.

Am besten einfach mal selber anschauen unter www.st-sin.de. Natürlich gibt’s auch eine kleine Facebook Page. Inklusive authentischer Einblicke in die Welt rund um St. Sin.

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.

Greenpeace Energy – Alles Muss Aus!

Bosse Küllenberg — Thu, 12 Nov 2009 12:40:37 +0000

Alles muss aus. 10 Jahre gegen Atom- und Kohlekraft! Unter diesem Kampagnenmotto sorgen Heye Hamburg und das Heye Digital Lab zum zehnjährigen Bestehen des Ökostromanbieters Greenpeace Energy crossmedial für Aufsehen.

Die Wende hin zu erneuerbaren Energien ist eines der Unternehmensziele von Greenpeace Energy. Auf der Microsite http://www.allesmussaus.de können sich User darüber informieren, was sie selbst zur Lösung der Energiefrage beitragen können:

1. Botschaft verbreiten!
2. Strom sparen!
3. Zu Ökostrom wechseln!

Mit dem ersten Punkt können sie direkt starten: Per Mausklick lässt sich die Botschaft in Social Networks wie Facebook und Twitter verbreiten. Die Twitter-Avatare der neuesten Unterstützer werden auf der eingerichteten Kampagnen webseite abgebildet.

Kleiner Appetizer der Microsite ist ein Video mit einem Schwarm “Twittervögel”, die gemeinsam ein AKW durch eine Windanlage ersetzen: Gemeinsam ist die Energiewende möglich!

Unterstützt werden die Social Media Maßnahmen durch begleitende Kommunikationsaktivitäten wie Poster, Mailings und ein Onlinegame.

muss aus. 10 Jahre gegen

Atom- und Kohlekraft! Unter diesem Kampagnenmotto sorgen Heye

Hamburg und das Heye Digital Lab zum zehnjährigen Bestehen des

Ökostromanbieters Greenpeace Energy crossmedial für Aufsehen.

Die Wende hin zu erneuerbaren Energien ist eines der

Unternehmensziele von Greenpeace Energy. Auf der Webplattform

http://www.allesmussaus.de können sich User darüber informieren,

was sie selbst zur Lösung der Energiefrage beitragen können: „1.

Botschaft verbreiten“, „2. Strom sparen“ und „3. Zu Ökostrom

wechseln“. Mit dem ersten Punkt können sie direkt starten: Per

Mausklick lässt sich die Botschaft in Social Networks wie Facebook

und Twitter verbreiten. Die Twitter-Avatare der neuesten

Unterstützer werden auf der eingerichteten Kampagnenwebseite

abgebildet. Unterstützt werden die Social Media Maßnahmen durch

begleitende Kommunikationsaktivitäten wie Poster, Mailings.

What’s Mashup?

Stefan Buchhop — Tue, 03 Nov 2009 12:08:58 +0000

Ich habe mir vor 5 Minuten die Wallstreet gekauft und dort ein Megaplex für 6 Millionen gebaut. Soll ich mir jetzt noch eine Straße kaufen oder lieber noch ein City Center auf der Wallstreet errichten. Nein, ich bin kein Ölscheich. Ich spiele nur gerade Monopoly City Streets. Ein Online-Spiel, das sich Google Maps zu Nutze macht.
Eine lustige und clevere Variante eines Mashups, also einer Website, die mehrere Dienste kombiniert und so etwas völlig neues schafft.

Der Vorteil: Mashups sind leichter zu entwickeln als ein komplett neuer Service, weil bereits vorhandene Ressourcen genutzt werden.
Der Nachteil: Wenn die verwendete Application versagt, funktioniert die ganze Anwendung nicht mehr.

Mashups verbinden die Schnittstellen (APIs – Application Programming Interface) von Diensten wie Google Maps und verschmelzen deren Daten mit den Eigenen. Dabei ist es egal wieviele Dienste herangezogen werden.

Monopoly City Streets – monopolycitystreets.com

David Berlind von ZDNet “What’s a mashup? – youtube.com/watch?v=ZRcP2CZ8DS8

Google APIs – code.google.com/intl/de-DE/more/#products-products-accounts