Aufgabe
Der Radiosender „COSMO“, der vom WDR, Radio Bremen und rbb gemeinsam produziert wird, möchte sein Markenimage mit dynamischen und lustigen COSMO-Clips kommunizieren und so auf sich aufmerksam machen. Der User sollte die Möglichkeit haben einen tierischen Charakter auszuwählen, diesen mit Namen und wahlweise mit oder ohne Foto zu personalisieren. Vier kurze Audioclips sollten außerdem zur Auswahl stehen, um den eigenen COSMO-Clip mit der passenden Musik zu unterlegen. Anschließend sollte der User sein Video ansehen, herunterladen, teilen und verschicken können.
Vorbereitung
Zu unserer Hauptaufgabe gehörte am Anfang des Projekts die Beratung zur Erstellung der Videos und der geplanten Individualisierung per Name und Bild auf der Kelle, sowie die Abstimmung mit dem Motiondesigner über das Material, das wir für die Individualisierung von ihm benötigen würden.
Text-Individualisierung
Bei der Namenseingabe wurde der User aufgefordert seinen Vornamen einzugeben. Das Resultat sah er live in einer Vorschau über der Eingabemaske. Die Darstellung des Namens war dem Corporate Design von Cosmo angepasst.
Name des Erstellers - 00:00
Der Name ist kursiv geschrieben und mit einer grünen Farbfläche hinterlegt. Hierbei galt es eine technische Lösung zu finden, die gewährleistet, dass der Look immer gleich aussieht, also der Balken immer unter dem ganzen Namen zu sehen ist, egal wie viele Zeichen dieser umfasst und der Balken immer mit einer Schrägen beginnt und mit einer Schrägen endet.
- Erstellung einer Bauchbinde für den Vornamen des Erstellers
- Auswahl und Positionierung der Font
- Festlegen der Funktion die den Text kleiner skaliert wenn der Name zu lang für die normale Größe gewesen wäre.
- Entwicklung eines Skripts das es möglich macht hinter dem Namen eine türkisfarbene Fläche zu erhalten, die jeweils (nach Cosmo CI) am Anfang und am Ende schräg abgeschnitten ist. Die Umsetzung hat Impossible Software programmatisch gelöst.
Bild-Individualisierung
Wollte der User ein Foto in seinem COSMO-Clip verwenden, so hatte er hier die Möglichkeit dazu. Mobile konnte er ein Foto aufnehmen oder aus einem Album wählen. In der Desktop Variante stand ein Datei-Upload zur Verfügung. Das Foto konnte durch Skalierung, Drehung, Kontrast und Helligkeit angepasst werden damit es in die vorgegebene Maske passt. Diese Funktionen wurden jeweils für Mobile und Desktop User optimiert. Das Foto wurde im Clip selbst von dem jeweiligen Charakter an einem Holzstab als eine Art Maske vor das Tiergesicht gehalten.
Erstellerbild auf weißer Pappe am Holzstab - 00:04
Sollte der User ein Bild hochgeladen haben, befindet es sich auf der Kelle, die bei Sekunde 00:04 vor das Gesicht des Tieres gehalten und rhythmisch mitgeschwungen wird.
- Tracking der weißen Pappe am Holzstab
- Erstellung einer Maske die minimal größer als die weiße Pappe ist damit es keine Blitzer gibt.
- Anpassung der Größe des Fotos im Video damit der Ausschnitt genau der Größe entspricht die der User vorher in der Seite eingestellt hatte.
Audio-Individualisierung
Der Ersteller hat die Möglichkeit auf der Webseite aus vier verschiedenen Audio Tracks auszuwählen.
Song: Gyedu
Song: Savage
Song: Sahara
Song: Marimba
- Upload der vier Audiotracks ins Backend
- Im Template einen dynamischen Audiotrack anlegen der über vier verschiedene Variablen auswählbar ist.
- Festlegen der Nomenklatur der vier Audiotracks.
- Testing
Weitere Beispiele
Langen Text und ohne Bild
Beispiel Finja
Website
Um die Bilder hochladen zu können mussten wir eine Upload-Seite im Stil der restlichen Webseite programmieren. Unsere Seite wurde nach Auswahl des Bilduploads als Overlay über der eigentlichen Seite aufgerufen. Wir haben bei der Umsetzung darauf geachtet dass die Applikation sowohl auf dem Desktop-Rechner als auch auf mobilen Endgeräten (Handys, Tablets) reibungslos funktioniert. Nach dem Bildupload hatte der User die Möglichkeit das Bild zu skalieren zu drehen und in Kontrast und Helligkeit anzupassen.
Technische Details
Für die Individualisierung von Namen und Gesichtern in den Clips und das Rendering der derselben nutzte DDD die webbasierte Technologielösung ImpossibleFX von Impossible Software. Die Videos wurden im quadratischen Format 720x720 gerendert (Video on Demand).
Nachdem der User seinen Clip fertiggestellt hatte, konnte er ihn per Facebook, Twitter oder per Mail teilen. Außerdem bestand die Möglichkeit den Film herunter zu laden.
Update 2017
Pünktlich zu Weihnachten gab es ein Update der Individualisierung. Der User hatte nun die Wahl zwischen der "normalen" Version und der "Xmas" Version. Wenn er sich für die Weihnachtsvariante entschied, wurde der Clip mit festlichem Applikationen dekoriert und der Tiercharakter tanzte im Schneegestöber. Wenn er zusätzlich noch sein Userimage hochgeladen hatte, dann bekam das, dem Anlass entsprechend, eine Weihnachtsmütze aufgesetzt. Außerdem wurden die Musikstücke mit weihnachtlichen Sounds unterlegt.
Weihnachtsspecial Beispiel Finja
Weihnachtsspecial Beispiel Ole
Song: Gyedu (Xmas - Edition)
Song: Savage (Xmas - Edition)
Song: Sahara (Xmas - Edition)
Song: Marimba (Xmas - Edition)
