Kennt ihr unsere Media-Verteilseite, die Euch zu unseren Medienproduktionen wie Podcast und Videosendungen leitet? Der interaktive Presenterheader wurde mit der Software Hype 2 bzw. Hype 3 von der Firma Tumult erstellt. Dies ist nur der Anfang! Hype 2 ermöglicht es uns HTML5 basierte Animationen am Mac ganz einfach zu erstellen. „Wunderschöne animierte und interaktive Web-Inhalte“, so beschreiben die Entwickler von Tumult Inc. ihr eigenes Produkt, lehnen sie sich damit vielleicht etwas zu weit aus dem Fenster? Wir werden Hype 3 mit zwei brand-aktuellen Videos von Tumult genauer betrachten.
Die mit HTML5 angelegten Projekte sollen ohne jegliche Kodierung mit mobilen Geräten wie beispielsweise die iPhones oder iPads, sowie modernen Browsern ohne Probleme kompatible sein. Mit Hype 3 lassen sich Inhalte für Websites, Infografiken, Werbebanner und vieles mehr erstellen. Doch ganz so einfach zu lässt sich das Programm nicht handhaben. Wer noch nie mit solch einer Art von Editor gearbeitet hat wird von der ungewohnten und englischen Benutzeroberfläche erschlagen werden. Gerade diejenigen, die sich an Hype 2 gewöhnt haben und nun wieder eine neue überarbeitete und an Yosemite angelehnte Benutzeroberfläche präsentiert bekommen. Für Anfänger auf dem Gebiet werden jedoch einige Hilfestellungen, Feature-Übersichten, sowie einige Beispiel-Inhalte bereit angeboten. Auf der Website von Tumult gibt es zudem auch FAQs und diverse Tutorials in Video- und Schriftform.
Erstellung einer Animation
Wer schon Erfahrungen mit Videoschnitt und Animationsprogrammen hat, der ist bei Hype 3 schon einmal einen Schritt weiter. Denn um Animationen und interaktive Elemente zu erstellen, arbeitet das Programm mit einer Timeline, in welcher Keyframes angeordnet sind. Diese Keyframes können dann manuell hinzugefügt und positioniert werden. Nun kann man doch auch Animationen auf die Aktionen des Nutzers reagieren lassen, welcher später unsere Web-Inhalte ansieht.
So lassen sich benutzerdefinierte Animationen, Sounds, Szenenübergänge oder Java-Script-Funktionen implementieren. Zudem kann man auch Zeitpunkte der Animationen festlegen. Ein weiteres interessantes Feature sind die Szenen. Sie bieten uns die Möglichkeit, einfach fließende Animationen oder getrennte Inhalte zu erstellen. Es lassen sich so viele Szenen erstellen, wie es für den Benutzer nötig ist. Diese können dann mit einer riesigen Auswahl von Übergängen und Aktionen abgerundet werden.
Export
Endprodukte werden als JavaScript, CSS3-Styles oder HTML5 ausgegeben. Hype 3 bietet hier eine Funktion an, unsere abgeschlossenen Projekte direkt in die eigene Dropbox zu laden oder über die kostenlose iOS App Hype Reflect die Animation gleich auf einem iDevice zu testen.
Die Neuerung von HYPE 3 zusammen gefasst
- seit dem 19.03.2015 in Version 3.0.2 erhältlich
- Vollständig überarbeitete Benutzeroberfläche
- 24 neue TImingfunktionen
- unabhängige Szenengrößen
- Verbesserte HTML-Bedienungshilfen
- Kopieren/Einsetzten und Neuanordnen von Zeitachsen
- Fehlerbehebung und Leistungsverbesserung
Video: Einführung von HYPE 3
Video: Tumult HYPE Professional
Man sollte vielleicht erwähnen, dass die Ausgabe des HTML/CSS nicht direkt erfolgt (also z.B. nicht per Hand in den .css/.html Files zu bearbeiten ist), sondern durch das Hype-JavaScript zur Laufzeit erzeugt wird. Die Texte werden zwar für SEO im HTML als Fallback erfasst, aber ich bin enttäuscht. Per JavaScript den DOM zu manipulieren, ist nicht das Gleiche wie valides HTML/CSS auszugeben.
Ich ging nach den guten Reviews immer davon aus, dass lediglich die Animationen auf JS setzten. Nicht aber Content & Style.