Als unsere Freunde von Law Creative uns beauftragten, für ihren Kunden Mitsubishi Chemical eine Reihe von Elementen zur Kaiteki City Website beizusteuern, sah der Plan noch anders aus.
Die Website sollte Mitsubishis Vision einer nachhaltigen Zukunft visualisieren – aufgeteilt in diverse Bereiche sollte hier eine futuristische Stadt erkundet werden dürfen.
Unsere Aufgabe war es, diese Stadtteile und die City Skyline, die alles zusammenfügt, zu erschaffen.
Die Skyline sollte von Anfang an mehr als nur ein Rendering sein – im ursprünglichen Konzept war hier ein loopender Film vorgesehen, mit subtilen Animationen die der Stadt ein wenig Leben einhauchen.
Grundsätzlich wäre das kein Problem gewesen, die Stadt, sämtliche Stadtteile und Interieurs wurden ohnehin von uns in Cinema 4D erstellt.
Aber das hätte uns eingeschränkt. Die Website-Performance beschränkt Dateigrößen, der Film muss also entweder kurz, klein oder hochkomprimiert werden – vermutlich sogar alles davon.
Aber wie kurz kann der Film werden, ohne dass der Loop den Zuseher stört? Wie lange muss er sein, damit ein Zug quer durchs Bild fahren kann?
Ok, Shinkansen sind schnell, aber das sollte nicht die Rechtfertigung sein.
Außerdem ist der Film nur ein Hintergrund-Element, eine bewegte Tapete, mit der man sonst wenig machen kann.
RIVE statt MP4.
RIVE ist die Brücke zwischen Code und Motion Design – interaktive Grafiken, die zustandsbasiert betrieben werden können. So kann eine Animation auf den User reagieren oder mit der Website kommunizieren.
Eine Animation, die durch eine Maus-Interaktion gestartet wird, ist so ebensowenig ein Problem wie eine, die durch einen Event aus der Website selbst getriggert wird.
So wird ein Hover State direkt zum Input für die Grafik und ein Klick kann an die Website weitergeleitet werden, um ein Overlay zu triggern.
Die Animation wartet dann brav im korrekten Zustand, um bei Bedarf wieder in einen anderen Modus zu wechseln. Alles ist möglich.
Animationen wie Züge, Flugzeuge usw. lassen sich zufällig starten. So fährt mal ein Zug durchs Bild, mal zwei, und ein Flugzeug hebt am Flughafen in unregelmäßigen Abständen ab.
Da muss man sich dann keine Sorgen mehr machen, dass der User das Gefühl bekommt, dass alle 20 Sekunden ein Film von vorn startet.
Während des Hover States laufen übrigens alle Animationen nahtlos weiter, das wäre beim MP4 etwas schwer zu lösen gewesen.
Und als etwas später im Entwicklungsprozess noch der Wunsch aufkam, einen Start State einzurichten, der den User begrüßt, bevor die Stadt freigelegt wird, war dies auch kein Problem
Eine kleine Kamerafahrt konnte problemlos in die nötige Logik integriert werden.
Apropos Logik: Die wird komplett innerhalb des Animations-Files gehandelt.
Die Website kommuniziert mit diversen Ein- und Ausgängen und kann theoretisch auch komplett von der Grafik gesteuert werden – oder eben umgekehrt – wie man es braucht.
Die Vorteile sprechen also für sich, und so wurde RIVE auch für die Unterseiten verwendet, um den ursprünglich nur als Bildern geplanten Seiten zumindest durch Hover Events etwas Leben einzuhauchen.
Und wie groß war nun diese interaktive Animation? Welchen Nachteil musste man für all diese Vorteile in Kauf nehmen? Wo ist der Haken?
Im Vergleich zum anfangs ca. 20–30 Sekunden langen MP4 mit hoher Komprimierung konnten wir mit der interaktiven RIVE-Animation....
