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]
Nette Zusammenfassung der Preview!
Leider fehlen die von Adobe angepriesenen HTML5-Elemente und CSS3-Animationen noch komplett. Wir haben die Preview uns auch mal näher angesehen. Für alle Interessierten
http://www.intercorp.de/blog/2011/08/10/adobe-edge-preview-beta-flash-neu-javascript-html5-css3/
Hi ich finde das gut was Adobe da macht. Ich habe ein bischen rumgespielt damit. Ich habe sogar input felder an die rectangles geaddet davor kann ich aber nur warnen weil später das Projekt in Adobe Edge nicht mher brauchbar ist bei mir stürzt sogar die ganze IDE ab. Aber weiter so Adobe und danke für den netten Thread
Mittlerweile ist die zweite Beta von Adobe Edge erschienen.
"Adobe Edge Preview 2 is now available to download. Preview 2 focuses on fit and finish improvements as well as feature enhancements, many of which are in response to community feedback. "