Dieses Jahr habe ich mich in meiner Weiterbildung mit Animationen befasst. Bereits in der Vergangenheit habe ich ein wenig mit Animate CC herumgespielt. Durch den eher hohen Zeitaufwand für das Erlernen der Software blieb es aber auch dabei. Im UX-Team hab ich dann von Hype 3 erfahren, und dass es recht einfach zu benutzen sei. Daher dachte ich mir, give it a try! Als Ziel habe ich mir gesetzt, unseren Puzzle Man zu animieren.
Bekanntschaft machen
In einem ersten Schritt ging es mir darum, Hype kennenzulernen. Einen groben Überblick der Hauptfunktionen gaben mir bereits die Tutorial-Videos. Danach ging es ans Probieren. Es sind “einfache“ Animationen möglich, in denen sich eine beliebige Anzahl an Objekten gleichzeitig oder zeitverschoben manipulieren lässt, sei es durch das Verändern der Grösse, der Position im Raum, des Drehwinkels, etc. Einfache Objekte (geometrische Formen) können direkt in Hype erstellt werden, komplexe Abbildungen müssen jedoch von einem Vektorprogramm (Sketch, Illustrator) als z.B. SVG importiert werden. Die Art und Länge einer Animation wird auf einer Timeline konfiguriert. Dies geschieht auf der sogenannten Szene, die Bühne für die Animation. Für eine Szene können auch flexible Layouts erstellt werden, was die Animation dann responsiv erscheinen lässt, angepasst an das jeweilige Ausgabegerät.
Fliegende Übergänge
Hype ermöglicht es verschiedene Szenen miteinander zu verbinden. Dies macht das Erstellen und Anpassen von Animationen übersichtlicher, da nicht alle Animationen in eine Timeline gedrückt sind, sondern auf mehrere verteilt werden können. Mehrere Szenen können so durch automatische Übergänge zu einem Animationsvideo kombiniert werden. Der Komplexität und der Kreativität sind dabei keine Grenzen gesetzt und es können auch Puzzlemänner zum Fliegen gebracht werden. Des Weiteren können diese Übergänge auch durch Interaktion des Nutzers getriggert werden (z.B. ein Klick auf einen Button). So können interaktive Slideshows, Minigames und interaktive Prototypen kreiert werden, die der Nutzer dann auf eigene Faust erkunden kann.
Alles in allem
Im Vergleich zu Animate-CC ist das Interface für einen ungeschulten Nutzer wie mich wesentlich einfacher und somit kam ich auch schneller zu Ergebnissen. Dies macht Freude und motiviert weiterzumachen. Die Animationen können auch ohne Umstände in gängige Formate exportiert werden (HTML5-Animation, Videodatei, animated GIFs). Ein weiterer Pluspunkt von Hype ist, dass man Animationen erstellen kann, die responsiv sind und so auf allen mobilen Geräten gut aussehen (sofern sie gut gemacht sind).
Alles ist aber nicht möglich, so können z.B. die Pfade der Vektorgrafiken nicht direkt in Hype editiert werden, was die Anwendung ein wenig limitiert und zu Workarounds führt. Hier haben andere Tools (z.B. Animate CC) die Nase eher vorne. Insgesamt ist Hype ein gelungenes und empfehlenswertes Tool und sicher nicht das letzte Mal, dass ich es benutzt habe.