HTML5 Animationen – Adobe Edge

12. November 2011

In den letzten Tagen hat man es ja durchaus öfter gelesen: “Das Ende von Flash ist eingeläutet“, oder “Flash ist tot“. Denn Adobe hat bekannt gegeben, dass sie die Entwicklung des FlashPlayer für mobile Endgeräte nicht mehr fortsetzen wollen.

Durchaus richtig ist die Annahme, dass die Verwendung von Flash im Web kontinuierlich abnehmen wird. Diesen Trend hat man auch schon vor der Ankündigung durch Adobe sehen können. Dennoch habe ich die Ankündigung zum Anlass genommen, wieder nach einer HTML(5) IDE für Animationen (wie Flash Pro) zu suchen.

Ich bin eigentlich direkt auf Adobe Edge* gestoßen. Ein Kollege hat mir vor einiger Zeit relativ euphorisch davon erzählt. Ich für meinen Teil denke immer Grafik+HTML5=Canvas, was aber in diesem Fall nicht stimmt. Die Animationsbühne (stage) wird in Edge mithilfe von div-Containern aufgebaut, Animationen sind mit jQuery und CSS3 transformations realisiert.

Das primäre Ziel von solchen IDE sollte es aktuell sein, einfache Animationen auch möglichst einfach umsetzen zu können. Beispielsweise simple Werbebanner. Dort geht es hauptsächlich darum, in wenigen Sekunden Animationszeit das Interesse des Users zu wecken. Und tatsächlich — mit Edge konnte ich ohne Vorkenntnisse innerhalb von ca. 45 Minuten einen kleinen Banner herstellen (seitlich eingebunden). Hauptsächlich weil einige Konzepte und UI Elemente von Flash Pro übernommen wurden. Die Timeline ist kein Unbekannter, und auch Features wie Labels, zu denen man zur Laufzeit springen kann, sind vorhanden. Natürlich hat Edge noch viele Fehler und der Funktionsumfang ist recht eingeschränkt. Es produziert aber relativ sauberen Code, was allgemein enorm wichtig ist.

Man darf gespannt sein, wie die Entwicklung voranschreitet. Gibt es erst einmal etablierte, verbreitete HTML5 IDEs für interaktive und animierte Inhalte, so steht einem flächendeckenden Einsatz von HTML5 und Ersatz von Flash nichts mehr im Wege. Ich würde auf jeden Fall empfehlen Edge im Auge zu behalten.

Hier noch die Quelldateien des Banners.

Adobe Edge Preview 3 Screenshot #1

Adobe Edge Preview 3 Screenshot #1

Adobe Edge Preview 3 Screenshot #2

Adobe Edge Preview 3 Screenshot #2

*Adobe Edge ist momentan als “preview” in den Adobe Labs. Es befindet sich also aktuell in Entwicklung, und kann vor Veröffentlichung einen anderen Namen erhalten.