Bewegte Web Inhalte mit Tumult: Hype

Um Enttäuschuungen zu vermeiden, sollte man bei Hype zunächst einmal wissen, was das Programm NICHT ist: es handelt sich bei Hype weder um einen Ersatz für Flash, noch um einen vollständigen WYSIWYG Web-Editor.

Mit Hype erzeugt man sehr schnell und intuitiv Animationen für den Internet-Einsatz. Und das zu einem durchaus fairen Preis. Hype ist zum Einführungspreis 23,99 Euro im App Store erhältlich. Eine 15-Tage-Demo-Version findet man auf der Homepage des Herstellers Tumult über diesen Link. Natürlich lässt sich Hype nicht mit Feature-Monstern aus dem Hause Adobe vergleichen und Webdesigner und Entwickler werden sicher die Nase rümpfen, aber für den normalen Anwender, zum Beispiel Fotografen, Grafiker oder Musiker, die auf der eigenen Homepage etwas mehr „Action“ haben wollen, ist Hype das perfekte Werkzeug. Was kann Hype also alles?

Die Oberfläche von Hype

Die Oberfläche von Hype teilt sich in drei Bereiche auf: das Hauptfenster, als Bühne bezeichnet, auf der später alles Vorgänge ablaufen, darunter eine Timeline, in der die Animationen gesteuert werden und ein über allem schwebendes Inspektor-Fenster zur Kontrolle jeglicher Objekte. Nicht ganz unähnlich einigen Apple Programmen findet man dann noch ein zusätzliches Fenster für die Schrift- und die Farbauswahl.

Ein Dokument erstellen

Ist das erste Dokument erstellt, kommt dem Inspektor eine wichtige Aufgabe zu. In ihm legt man zunächst im Document Isnpector die Größe der Animation fest (einige Standrad-Größen stehen im Auswahlmenü zur Verfügung). Im Scene Inspector legt man den hintergrund, verschiedene Timelines und, sehr komfortabel, das Verhalten nach Beenden der Animation, beim Laden oder Verlassen einer Szene, und auf Tastendrücke fest, wobei zu einer anderen Szene gesprungen werden kann, ein JavaScript Aufruf erfolgt, eine andere Timeline angesteuert wird oder eine externe URL geladen wird.

Elemente für die Bühne


Nun fehlt natürlich noch ein Schauspieler auf der Bühne. Hype kennt Rechtecke, Text und zwei Sorten von Tasten, dazu natürlich Bilder und Videos. Damit lässt sich nun schon eine einfache HTML-Seite entwerfen. Jedes Element hat diverse Eigenschaften, die über den Inspektor angepasst werden. Doch der Clou von Hype ist ja die Möglichkeit der Animation.

Bilder lernen laufen


Eine einfache Animation erstellt man am einfachsten so. Man wählt ein Objekt aus, das man animieren möchte. Nun aktiviert man den Aufnahmeknopf oberhalb der Timeline und bewegt das Objekt an eine beliebige Stelle auf dem Canvas. Automatisch wird ein Keyframe erzeugt und in der Timeline angezeigt. Bewegung ist allerdings längst nicht alles, was Hype an Veränderungen aufzeichnen kann. Vielmehr lässt sich praktisch alles animieren, was veränderlich ist: Farben, Größen, Positionen, Sichbarkeit, Rotation und so weiter. Der erste Umgang mit Animationen ist nicht ganz einfach, aber man gewöhnt sich schnell an die Arbeitsweise und dann geht die gnaze Sache leicht von der Hand.

Webseiten-Gestaltung

Theoretisch lassen sich mit Hype auch ganze Websites gestalten. Buttons und Links gehören ja zum Standard-Repertoire. Erstellt man mehrere Seiten, Scenes genannt, und verknüpft diese Miteinander, hat man praktisch eine komplette Webseite erstellt.

Einsatzmöglichkeiten und Fazit


Mit Hype lassen sich schnell Animationen für das Internet erstellen. Die Animationen lassen sich als HTML5 und JavaScript exportieren und damit gut in andere Projekte integrieren, seien es Webseiten aus anderen Programmen oder auch CMS-Systeme. Somit eignet sich Hype weniger als Komplettsystem, obwohl sich mehrere Seiten theoretisch zu einer kompletten Website verknüpfen lassen. Ich empfinde Hype aber als eine perfekte Ergänzung vorhandener Software, um einfach etwas Leben in die Seiten zu bringen. Vorteil: Im Gegensatz zu Flash sind die Animationen weitgehend unabhängig auf nahezu allen Anzeigegeräten abspielbar, wenn auch nicht alle Features überall zur Verfügung stehen.

PS:Ein kleines Video, das die Erstellung einer Animation zeigt, fertige ich heute Abend noch an und stelle es hier online!

1 Gedanke zu „Bewegte Web Inhalte mit Tumult: Hype“

Schreibe einen Kommentar

drei − 1 =