Adobe Edge: Animationen mit HTML, CSS und JavaScript

Mit Adobe Edge veröffentlicht Adobe eine erste Version eines zukünftigen Tool, das zur Erstellung von Animationen für HTML-Seiten gedacht ist. Da lediglich HTML, JavaScript und CSS verwendet werden, können die Animationen sowohl auf aktuellen Desktop-Browsern als auch auf mobilen Devices ohne Flash Player abgespielt werden (z.B. iPhone, iPad).

Adobe Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Wie bereits vor einiger Zeit verkündet zeigt Adobe hiermit, dass sie neben Flash auch im Bereich HTML5 entsprechend unterstützen werden (ist auch logisch, da Adobe ja an den Tools verdient und nicht an den Runtimes).

Adobe positioniert Edge als Tool für Werbung, einfache Animationen und Motiondesign, während Flash für umfangreiche Anwendungen angepriesen wird („Immersive interactive experiences, mobile applications, gaming, premium video, advertising”).

Zeitleisten-basierte Animationen

Das Tool bietet dabei eine im Vergleich zur Flash IDE eine bislang sehr einfach gehaltene Oberfläche, mit der zeitleistenbasierte Animationen erstellt werden können.

Wer z.B. Flash oder After Effects kennt, dürfte mit dem Setzen von Keyframes sofort vertraut sein. Adobe schreibt auch: „It’s influenced by our customers’ favorite features and functionality in class-leading tools like After Effects and Flash Professional, but innovates in its ease of use.”

Nach einem ersten Test kann ich sagen, dass die Timeline auch sehr gelungen und wirklich einfach zu bedienen ist (siehe Demovideo unten).

Alle gängigen Parameter wie Skalierung, Rotation, etc. können animiert werden. Die ebenfalls aus Flash bekannten Easing-Funktionen sind auch vorhanden.

Werkzeuge

Mit der geringen Anzahl an Werkzeugen lassen sich bisher Rechtecke (eckig oder mit abgerundeten Ecken) oder Texte platzieren. Auch Grafikdateien können importiert und animiert werden.

Browser und JavaScript-Framework

Edge setzt auf das Webkit auf, die Animation sollen jedoch auf allen gängigen Browsern funktionieren (z.B. Chrome, Safari, Firefox, IE, Mobile Safari für iOS und dem Android-Browser). Unter der Haube kommt das jQuery-Framework zum Einsatz und die Daten der Animationen werden in JSON abgelegt.

Einführungsvideo

Hier ein Adobe-TV-Video, das die ersten Schritte in Adobe Edge zeigt.

Adobe Edge Download

Adobe Edge ist als Preview für Mac und Windows verfügbar. Man kann es kostenlos in den Adobe Labs herunterladen.

Link: Adobe Edge Preview
Demo: Meine erste Edge-Animation

[ad]