Der Hype um HTML5 – Apptest: Hype (Mac)

Man ist ja fast gar nicht drum herum gekommen, um Hype, zumindest um dessen Präsentation im Mac Appstore. Frühere Apple Entwickler hatten als „Tumultco“ diese spannende Software programmiert, die es ermöglichen soll, flashähnliche Animationen gänzlich mit HTML5 zu erstellen. Das schont die CPU und damit auf mobilen Geräten den Akku und zudem soll Hype einfach genug zu bedienen sein, daß auch Laien damit ansehnliche Ergebnisse erzielen können.

Starke Ansagen. Auch der Preis ist durchaus leistbar. Mit um die 30€ Einstiegspreis (nur kurze Zeit!) stürzt man sich nicht in den finanziellen Ruin, sollte sich doch herausstellen, daß Hype nicht die Lösung anstehender Probleme ist.

Wie einfach aber ist es nun, Animationen und Elemente mit Hype zu erstellen, zu bearbeiten und zu veröffentlichen?

Was genau ist Hype?

Woher Hype seinen Namen hat, weiß man wohl nicht so ganz genau. Vermutlich kommt er vom „Hype“ rund um HTML5 als Alleheilmittel zum an Flash erkrankten Internet 😉 Tatsache ist, daß Flash nach wie vor erhebliche Hardwareressourcen benötigt, Flash als Applikation an sich schon mal nicht eben „günstig“ ist und zudem Flash auch nicht gerade „einfach“ zu erstellen ist. Klar, alles eine Ansichtssache.

Meine Erfahrungen mit Flash lagen nun schon einige Jährchen zurück und meine ersten Schritte damals gingen über die üblichen kleineren Animationen nicht wirklich hinaus. In diesem Test möchte ich daher nicht wirklich technisch auf HTML5 und die zugrundeliegende Technik eingehen, sondern kurz und knackig Hype vorstellen. Im Grunde ist es ja für die meisten Anwender auch gar nicht so wichtig „wie“ etwas gemacht wird, sondern lediglich, daß das Ergebnis stimmt.

Animationen erstellen mit Hype

Hype ist ein Programm, mit dem relativ einfach und auch schnell vor allem Animationen und/oder Übergänge erstellt werden können. Zuvor wird definiert, in welchem Arbeitsbereich sich diese Animation abspielt. Nennen wir den Arbeitsbereich einfach Bühne. Es ist also bei jedem neuen Projekt ratsam, sich genauestens zu überlegen, wo z.B. die Animation oder eben diese „Bühne“ eingebunden werden soll. Wird sie ins eigene Weblog integriert und muß sich den Platz am Bildschirm vielleicht mit einer Seitenleiste teilen? Oder kann die Animation den gesamten Bildschirm füllen?

Ist die „Bühne“ definiert, können eigentlich sofort per Drag & Drop oder über die entsprechende Schaltfläche Elemente hinzugefügt werden. Das kann eine Textbox sein, das kann eine Grafik sein. zu bedenken gilt aber, daß z.B. teiltransparente PNG Grafiken wegen des HTML5 Standards einige Eigenheiten aufweisen. Fügt man z.B. ein Rechteck mit abgerundeten transparenten Ecken ein, so wird zwar die Transparenz erhalten, möchte man aber einen Schlagschatten anwenden, so ignoriert selbiger leider die Rundung und würde nur auf die Außenkanten der Grafik angewendet. Das schränkt leider ein kleines bisschen ein.

Zentrales Element ist natürlich die Zeitleiste. Alle Elemente, die sich auf unserer Bühne befinden, finden sich auch wieder auf der Zeitleiste ein. Dort können sie umbenannt oder umarrangiert werden. Die Hirarchie des Arrangements stellt auch die innerhalb der Bühne dar. Elemente ganz oben, stehen ganz vorne, jene ganz unten auf der Liste der Zeitleiste, stehen ganz hinten.

Hype macht es unglaublich einfach, Animationen zu erstellen. Einerseits können manuell sogenannte „Keyframes“ erstellt werden, was den Kennern unglaublich viel Freiraum bei der Erstellung der Animationen bietet, andererseits können Animationen auch einfach „aufgezeichnet“ werden.

Man bewegt dann einfach den Zeitcursor an die Stelle, an der alles starten soll und arrangiert alle Elemente in Ausgangsposition. Sodann startet man die Aufnahme, wählt auf der Zeitleiste den Endpunkt der Animation und vergrößert oder verkleinert die Elemente oder ändert deren Attribute wie Transparenz oder Schatten sowie deren Position. Stoppt man die Aufnahme, so zeigt Hype mit rosaroten Linien einerseits auf der Zeitleiste die Animationen beim jeweiligen Attribut (z.B. dem Schlagschatten oder der Transparenz, siehe oben) an, als auch durch eine gestrichelte Linie auf der Bühne, sofern sich die Position eines Elements geändert hat.

Elemente können zwar zusammen markiert und z.B. verschoben werden, nicht aber gruppiert und dann gemeinsam in ihrer Größe geändert werden (Stand 6/2011, V1.02). Das ist leider momentan noch etwas mühsam. Etwas umfangreichere Tutorials auf der Entwicklerhomepage hätte ich persönlich sehr begrüßt, da einem dies die Arbeit mit Hype nochmals erleichtern könnte.

Einfache Integration

Was Hype so genial macht, mal von der recht einfachen Bedienung, sofern man das Arbeiten auf einer Zeitleiste verinnerlicht hat abgesehen, ist die einfache Integration in bestehende Umgebungen. Wie in der Werbung reichen tatsächlich drei Zeilen Code um das erstellte Kunstwerk in bestehende Websites zu integrieren. Das funktioniert bei einem WordPress Blog genauso wie z.B. auf „Maintenance“ Seiten oder sonstigen statischen Seiten. Drei Zeilen und gut ist. Sehr fein.

Hype kann dabei einen entsprechenden Ordner exportieren und gleich alle notwendigen Grafiken in selbigen packen. Ein Export in den öffentlichen Ordner der eigenen Dropbox ist ebenso möglich, was sich als äußerst praktisch bei der schnellen Veröffentlichung äußert. Es reicht dann zum Einbinden drei Zeilen Code (prinzipiell nur ein DIV Container) der auf das entsprechende Javascript verweist, einzubauen – fertig. Theoretisch könnte man sogar auf die eigene Dropbox verweisen, was aber nicht unbedingt empfehlenswert ist.

Bedienung

Gut gelöst ist auch das konzept des Inspektors. Über selbigen können schnell alle Attribute zum jeweiligen Objekt oder der jeweiligen Szene geändert werden. Ich fände es allerdings noch schöner, wenn der Inspektor kein separates Fenster darstellen würde, sondern in eine Art Seitenleiste integriert wäre. So wäre ein Arbeiten im Vollbildmodus generell einfacher möglich. Speziell bei umfangreicheren Projekten werden nämlich die Zeitleiste bzw. die übereinander (und momentan noch nicht gruppierbaren) gestapelten Objekte zu einer recht langen Liste, die dann zunehmend Platz vom Bildschirm abzwacken.

Hier wäre dann z.B. vielleicht auch ein modifizierbares Layout ganz praktisch, das z.B. die Zeitleiste im Hochformat und daneben die Vorschau darstellen könnte. Ich bin ja kein Interfacedesigner, aber hier könnte durchaus am guten Design noch ein wenig nachgebessert werden.

Fazit

Hype minimiert die Einarbeitungszeit durch recht geradlinige und einfache Bedienung. Wer jedoch noch nie auf einer Zeitleiste oder ähnlichem gearbeitet hat, dürfte durchaus etwas länger für die Einarbeitung brauchen. Wer jedoch z.B. mit iMovie oder Flash schon gearbeitet hat, wird sich recht schnell zurechtfinden.

Wünschenswert wären aussagekräftige Tutorialvideos, vor allem jene, die die Fähigkeiten der Software etwas besser zur Schau stellen, als die bisher auf der Website vorhandenen.

Hype ist für jeden der etwas mehr Individualität und Kreativität in seine Website integrieren möchte ein starkes und schönes Werkzeug. Natürlich darf man dabei die Effekte nicht übertreiben – weniger ist mehr, heißt wie immer die Devise!

Sein Geld ist Hype definitiv mehr als wert, also zuschlagen und kaufen, solange es noch um etwa 30€ im Mac Appstore verfügbar ist!

[app 436931759]