Dieser Block behandelt detailliert fortgeschrittene Animationstechniken mit Google Web Designer (GWD). Zunächst wird erklärt, wie GWD Objekte, sogenannte Assets, verwaltet, die für Animationen genutzt werden. Assets sind externe Elemente wie Bilder, Videos oder Audiodateien, die über den Befehl „Assets importieren“ in das Projekt eingebunden werden. Diese Elemente werden in einer Bibliothek gespeichert, wo sie organisiert und jederzeit wiederverwendet werden können, auch nachdem sie von der Bühne entfernt wurden. Das effiziente Verwalten von Assets erleichtert die Arbeit, insbesondere bei größeren Projekten, da Bilder oder Videos nachträglich ersetzt werden können, ohne dass bestehende Animationen verloren gehen.

Ein weiterer zentraler Aspekt ist das Gruppieren von Objekten. GWD ermöglicht es, mehrere Objekte zu einer Gruppe zusammenzufassen, die dann wie ein einzelnes Objekt behandelt werden können. Das bietet den Vorteil, dass Gruppen als Assets in der Bibliothek gespeichert und mehrfach wiederverwendet werden können. Änderungen an einer Gruppe wirken sich dabei automatisch auf alle Instanzen dieser Gruppe aus. Diese Funktion hilft besonders, wenn komplexe Animationen mit vielen Objekten erstellt werden sollen, da so die Übersicht gewahrt bleibt.

In dem Teil zu den Multimedia-Komponenten werden erweiterte Funktionen von GWD vorgestellt. GWD bietet eine Vielzahl von Komponenten, die es ermöglichen, dynamische Elemente wie Fotogalerien, Videos oder Audiodateien in eine Animation zu integrieren. Besonders die Karussell-Galerie wird als Beispiel verwendet, um zu zeigen, wie sich Bilder innerhalb einer Animation rotieren oder vergrößern lassen. GWD erlaubt es, diese Komponenten nicht nur einfach einzubinden, sondern sie auch nahtlos in Animationen zu integrieren. So können Videos und Fotogalerien auf der Bühne bewegt, skaliert oder sogar animiert werden. Auch die Integration von YouTube-Videos wird thematisiert, wobei erklärt wird, wie Videos direkt aus YouTube importiert und in Animationen eingebettet werden können.

Ein besonders interessantes Thema sind die verschachtelten Animationen. Hier geht es darum, wie Objekte, die selbst aus mehreren Teilen bestehen, animiert werden können, während sich ihre Bestandteile unabhängig voneinander bewegen. Ein Beispiel dafür ist ein Motorradfahrer, dessen Motorrad in eine Richtung fährt, während sich die Räder unabhängig von der Bewegung des Fahrers drehen. Verschachtelte Animationen erfordern eine präzise Handhabung der Zeitachsen. GWD ermöglicht es, mehrere Zeitachsen zu verwenden, sodass die Animation der einzelnen Objekte auf verschiedenen Ebenen abläuft, während sie in einer größeren Animation zusammengeführt werden. Diese Technik eröffnet viele kreative Möglichkeiten, insbesondere wenn es darum geht, komplexe Bewegungsabläufe wie „Bewegung in der Bewegung“ darzustellen.

Zusätzlich wird erklärt, wie Audio-Komponenten in Animationen integriert werden können. So wird beschrieben, wie Soundeffekte mit bestimmten Zeitachsenereignissen synchronisiert werden, beispielsweise ein Motorgeräusch, das abspielt, während ein Fahrzeug über die Bühne fährt, oder ein Hundebellen, das nach dem Vorbeifahren eines Motorrads ertönt. GWD bietet dabei die Möglichkeit, Zeitachsen-Ereignisse zu setzen, die automatisch bestimmte Aktionen wie das Starten oder Stoppen von Audiodateien auslösen.

Ein weiteres wichtiges Kapitel behandelt die Einbettung der erstellten Animationen in bestehende Webseiten. Es wird erläutert, wie Animationen, die in GWD erstellt wurden, in Webseiten integriert werden können, indem man sie in iframes einfügt. Dies ist eine einfache und effiziente Methode, um GWD-Animationen in HTML-Seiten einzubinden, ohne den komplexen von GWD generierten Code manuell bearbeiten zu müssen. Der von GWD erzeugte HTML- und CSS-Code ist umfangreich, sodass es empfehlenswert ist, diesen Code als Ganzes in einem iframe zu verwenden, anstatt ihn in andere Dokumente zu zerlegen.

Zum Schluss erhält man weiterführende Empfehlungen, wie man sich selbstständig mit zusätzlichen Funktionen und Tutorials von GWD beschäftigen kann, um das Gelernte zu vertiefen und noch effizienter zu arbeiten. Es wird darauf hingewiesen, dass die aktuelle Version von GWD viele professionelle Funktionen bietet, die in der Webentwicklung nützlich sind, und dass regelmäßige Updates neue Möglichkeiten hinzufügen. Die Integration von Multimedia, Animationen und verschachtelten Zeitachsen ermöglicht es, komplexe und interaktive Webanimationen zu erstellen, die auf modernen Webseiten zum Einsatz kommen.

 

Das Übungsobjekt: Das Auto ist animiert – Die Reifen drehen sich, während es von rechts nach links fährt. Außerhalb des sichtbaren Bereichs erfolgt eine Drehung des Fahrzeugs, um es wieder nach rechts fahren zu lassen. Die gesamte Zeit wird ein Hintergrundsound eines vorbeifahrenden Autos abgespielt. Was auf den ersten Blick einfach erscheint, ist, wenn man mit dem Teil „Animationen – Google Webdesigner“ beginnt, zwar kein Hexenwerk, aber zunächst wird man im GWD (Google Webdesigner) von einer Vielzahl an Möglichkeiten überrannt. Der GWD ist ein inzwischen sehr umfangreiches Programm, mit dem viele Dinge mehr möglich sind, als nur ein Objekt im „2D-Modus“ über den Bildschirm zu bewegen.

Der Inhalt zu diesem Thema, in kurzen Worten beschrieben.

Datum: KW 36, 37, 38 – 2024

Dieser Blogbeitrag bezieht sich auf das Fernstudium Medieninformatik (interner Link ↪ zu der Übersicht Vita/Medieninformatik ILS), das ich von Mai 2023 bis Mai 2025 verfolgt habe.

Fachlektoren: Dr. Thomas Wecker – Tilman Leher