201101Aug

Adobe Edge: Animationswerkzeug für HTML5/CSS3

Nicht mehr ganz aktuell, aber wahrscheinlich für viele interessant, dürfte die nun veröffentlichte Preview-Version von Adobe Edge sein. Dabei handelt es sich um eine Software, die speziell auf die Animation von DOM-Elementen ausgelegt ist und dabei Gebrauch von HTML5, CSS3 und jQuery macht. Die aktuelle Benutzeroberfläche von Edge erinnert stark an After Effects und funktioniert ähnlich: Auf einer Bühne können Flächen (derzeit Rechtecke und abgerundete Rechtecke) oder Texte erzeugt und anschließend über eine Zeitleiste durch Keyframes animiert werden. Wer also schon mit After Effects, Flash oder Premiere gearbeitet hat, wird sich schnell zurechtfinden.

Adobe Edge Preview - HTML5 tools, Animation tools

Die Bedienung ist intuitiv und für Adobe typisch. Einfache Symbole und aufgeräumte Panels machen die Erstellung von Animation einfach. Elemente können durch CSS3-Attribute gedreht, skaliert oder rotiert werden, während für Bewegungen JavaScript zum Einsatz kommt. Manche Funktionen sind noch nicht ganz ausgereift und so können beispielsweise Keyframes in der Zeitliste nicht per Doppelklick geöffnet oder bearbeitet werden, wie man es von After Effects kennt. Es handelt es sich noch um eine Preview-Version, die in der Testphase kostenlos ist.
Die Quelltext-Ausgabe der Animationen ist ordentlich und die Dateigröße der "Edge"-Bibliothek ist mit rund 60 KB kompakt gehalten. Leider ist noch eine veraltete Version der jQuery-Bibliothek enthalten, was sich aber noch ändern dürfte. In einer JavaScript-Datei namens "Projekt-Name_edge.js" findet sich der gesamte JavaScript-Code, der für die Animation zuständig ist, in Form eines großen Arrays. Gespannt sein darf man übrigens auf das Fenster "Editor", das in der Preview-Version zwar als Menüpunkt vorhanden, aber nicht auswählbar ist.
Adobe Edge wurde zuvor unter dem Titel "Helium" entwickelt und dürfte eine direkte Antwort auf den Sencha Animator sein, der ein ähnliches Werkzeug darstellt. Wer sich noch ein paar ausgefallenere Beispiele ansehen will, die mit Edge erstellt wurden, kann sich Demos inklusive den Quelldateien auf dieser Seite ansehen.

Kommentare

Andre schrieb am 02.08.2011 #1

Edge ist sicherlich für den ein oder anderen zu gebrauchen.
Mal sehen was daraus noch alles werden wird.

Adobe = Neuer Marktführer für HTML5&CSS3 Animationssoftware? Flash bald geschichte?

mfg Andre