Die interaktive Infoanwendung mit Animationen rund um das Thema „Honigbienen“ sollte von Flash in HTML5 übertragen werden, damit die Inhalte auch über mobile Geräte erreichbar sind. In diesem Zuge sollten auch Illustrationen und Nutzerführung wieder zeitgemäß aufgefrischt werden.

Da die Stories inhaltlich feststanden, konzentrierte sich die Aufgabe der Konzeption vor allem auf die Nutzerführung. Die sollte auf das geänderte Nutzungsverhalten von mobilen Endgeräten angepasst werden. Weniger klicken, mehr scrollen und swipen.

Die beiden am Projekt beteiligten Illustratoren arbeiteten im Prinzip wie beim klassischen Trickfilm. Während Kollege Nils für die Illustration der Hintergründe zuständig war, kümmerte sich Kollege Samuel um Illustration und Animation der Figuren.

In den Animationen steckt einiges an Planung und aktueller Technologie. Anders als in Flash, wo Illustration und Animation im selben Tool stattfinden, entwickelten wir für die Umsetzung einen mehrstufigen Arbeitsprozess, in dem Grafik und Programmierung eng zusammen arbeiteten.

Die Animationen wurden vollständig auf Vektorbasis realisiert. Die Illustrationen entstanden zunächst in Adobe Illustrator. Anschließend wurden die Pfade in After Effects importiert und animiert.

Über ein spezielles Plugin konnten die animierten Sequenzen als json-Dateien exportiert werden. Diese werden im Browser von einem javascript-Framework interpretiert und als SVG-Animation abgespielt. Die Herausforderung für die Programmierung lag dabei vor allem im Setup des Frameworks und der Etablierung des Workflows.

Vorteil der Methode: Die Animationen sehen aus wie ein Videoclip, bleiben aber immer gestochen scharf, egal bei welcher Auflösung. Und das bei einer äußerst geringen Datengröße, was vor allem der mobilen Nutzung zugutekommt.

https://www.planet-schule.de/honigbiene