Adobe Edge Animate – Ein Überblick

April20

Nachdem bereits 2011 offiziell das Ende der Webanimations-Software „Flash“ eingeläutet wurde, indem Adobe verkündete den Support des Flash Players für mobile Endgeräte und langfristig auch für den Desktop einzustellen, standen vor allem Web-Designer ohne tiefergehende Programmierkenntnisse vor dem Problem, plattformübergreifende Webanimationen realisieren zu können. Allerdings veröffentlichte Adobe im gleichen Zeitraum bereits eine Alternative, die auf Basis der populären JavaScript-Library „jQuery“ zum neuen Platzhirsch unter den Web-Animationstools werden sollte. Heute, rund 4 Jahre nach dem First-Release, kann man sagen dass „Adobe Edge Animate“ bereits so ausgereift ist, dass man ohne wenn und aber von einem sehr guten Allrounder sprechen kann. Doch was kann das Tool eigentlich genau? Wir betrachten es einmal aus Sicht eines Designers.


Benutzeroberfläche und Handhabung

Mit der Einführung von HTML 5 und CSS 3 und den damit einhergehenden CSS-Transitions, bieten seit einiger Zeit die guten alten Webstandards die Möglichkeit zu interaktiven Animationen. Davon beflügelt wurde in der Coder-Szene bereits frühzeitig mit Animations-Bibliotheken und -Frameworks experimentiert. Beeindruckende Ergebnisse ließen nicht lange auf sich warten.
Die eher visuell orientierten Designer und Animationskünstler hingegen, konnten sich mangels professioneller Tools, eine Zeit lang jedoch leider noch nicht auf dieser Spielwiese austoben. Genau das hat Adobe mit Edge Animate geändert.
Das Tool bietet eine gut aufgeräumte, grafische Benutzeroberfläche mit allerhand Bedienelementen die dem Ex-Flasher oder dem geneigten After Effects-User bereits bekannt vorkommen dürften. So bilden eine Stage und ein Timeline-Editor die Basis des Interface.

ea-screen

Fenster wie eine Material-Bibliothek und ein Eigenschaften- oder Code-Editor, lassen sich auf Bedarf zuschalten, ausblenden oder individuell anordnen. So passt sich Edge-Animate mühelos auch kleineren Monitoren an, ohne dabei allzu viel Bedienkomfort einzubüßen.
Auffällig ist die sehr dünn bestückte Werkzeugleiste. Zwar ist es möglich einfache geometrische Objekte, sowie Text zu erstellen und ausreichend zu bearbeiten. Pfadwerkzeuge, Pinsel und sonstige Modellierungswerkzeuge sucht man allerdings vergeblich. Wer auf komplexe Vektoren-Modelle nicht verzichten möchte, kommt um Softwares wie Illustrator nach wie vor nicht herum. Edge Animate positioniert sich hier also deutlich als Autorenwerkzeug und reiht sich so konsequent in das Konzept der jeweiligen Spezialisierung der Tools aus der Adobe Creative Suite ein.


Animieren ohne programmieren

Objekte können auf zwei verschiedene Arten animiert werden. Zum einen besteht die Möglichkeit der etwas aufwändigeren Einzelbildanimation. Hierbei wird das zu animierende Objekt, Frame für Frame entsprechend unterschiedlich positioniert um einen Bewegungsablauf zu erzeugen. Sinnvoll ist diese Variante allerdings eher für Trickfilmanimationen, wobei die einzelnen Bilder wahlweise in Photoshop oder Illustrator erstellt, und mittels Importfunktion auf einzelne Keyframes verteilt in die Zeitleiste eingefügt werden können.
Die zweite Variante ähnelt dem bereits aus Flash bekannten „Tweening“. Hierbei wird ein Objekt jeweils in einem Start- und einem End-Keyframe mit entsprechenden Parametern wie z.B. Position, Größe oder Farbe versehen. Die dazwischenliegende Transition erledigt Edge Animate. So lassen sich beispielsweise, auch ohne großen Aufwand, Werbebanner mit linearen Animationen erstellen.
Wer auf effektreichere Bewegungen steht, dem bietet Edge Animate eine abwechslungsreiche Effektbibliothek. Über einen einfachen Klick lassen sich so Bewegungsabläufe mit Effekten wie „Bounce“ oder „Elastic“ versehen. Hier macht es wirklich Spaß ein wenig herumzuexperimentieren, um dem Projekt eine passende Dynamik zu verleihen.
Zudem lassen sich Objekte in Symbole mit eigener Zeitleiste konvertieren. Daraus erschließt sich die Möglichkeit komplexer, verschachtelter Animationen. So ist es beispielsweise kein Problem, kurze Animationsschleifen über die gesamte Dauer der Hauptzeitleiste wiederzugeben. Wer einmal versucht hat eine Figur, laufenderweise vor einem vorbeiziehenden Hintergrund zu animieren, weiß wie sinnvoll diese Funktion ist.

 

Interaktion & Multimedia

Auch das eigene Projekt mit Interaktivität zu versehen, also dem End-Nutzer Navigationsmöglichkeiten zu geben, ist mit geringfügigen Programmierkenntnissen möglich. Edge Animate bietet auch hier eine Bibliothek, mit der verschiedene JavaScript-Codeschnipsel völlig unkompliziert entsprechenden Elementen zugewiesen werden können. Praktisch sind dabei die ausführlichen Erklärungen zu den jeweiligen JavaScript-Fragmenten. Als Nicht-Programmierer sage ich, Lerneffekt garantiert!
Ebenso möglich und simpel ist der Import von Multimedia-Elementen wie Videos (MP4- und OGV-Dateien) oder Tonspuren (MP3- und WAV-Dateien). So können auch eher trockene Inhalte deutlich aufgepeppt werden. Gerade für Messepräsentationen ist das eine feine Sache.


Plattformübergreifende responsive Layouts

Eine der besten und wichtigsten Neuerungen ist es, Arrangements responsive ausgeben zu können. Durch ein paar unscheinbare Größenvoreinstellungen der Bühne und der Objekteigenschaften lassen sich Layouts an verschiedene Viewports anpassen. Das heißt, alle verwendeten Elemente können auf entsprechende Auflösungen individuell zugeschnitten und angeordnet werden. In Zeiten in denen die mobilen Zugriffe und die Vielfalt der Devices stetig wachsen, ist das ein unverzichtbares Feature.

Zur Veröffentlichung eines Projekts lassen sich verschiedene Export-Profile auswählen. So ist sichergestellt, dass Ihre Animation oder ihre interaktiven Web-Elemente plattformübergreifend funktionieren. Edge Animate minimiert zum Beispiel unter dem Profil „Web“ alle HTML und JavaScript-Elemente hinsichtlich der Größen- und Performance-Optimierung und erstellt eine übersichtliche Ordnerstruktur, inklusive aller nötigen Dateien, welche sich problemlos in Ihr Webprojekt integrieren lassen (wenngleich an dieser Stelle natürlich Grundlagenkenntnisse in HTML, CSS und JavaScript von Nöten sind).
Eine weitere Annehmlichkeit ist das optionale Einbinden von Web-Fonts. Die Zeiten in denen man ausschließlich mit Systemschriften hantieren musste sind ja glücklicherweise schon länger vorbei. Dennoch erleichtert Edge Animate dem Anwender die Verwendung von Web-Fonts ungemein. Gerade dem Designer wird dadurch eine angemessene Gestaltungsfreiheit eingeräumt.


Korrespondenz mit anderen Adobe Tools

Ohnehin ist Adobe schon dafür bekannt, dass die Zusammenarbeit unter den Tools der Creative Cloud zumeist tadellos funktioniert. Auch hier ist das der Fall, wenn man sich darüber klar ist, welche Programme überhaupt sinnvollerweise mit Edge Animate zusammenarbeiten sollten. Es ist zum Beispiel unsinnig zu versuchen eine Photoshop-Datei zu importieren, was auch gar nicht möglich ist. Der Import von Illustrator-Dateien inklusive Ebenenaufschlüsselung funktioniert dagegen einwandfrei. Ebenso ist die Zusammenarbeit mit Dreamweaver und Fireworks nicht nur praktisch sondern auch weitestgehend barrierefrei.

 

Fazit

Edge Animate ist eindeutig ein – mittlerweile – gut ausgereiftes Tool für animierte und interaktive Webinhalte. Dadurch dass Adobe die kreative Community schon frühzeitig in den Entstehungsprozess mit eingebunden hat, konnte auf Grundlage des Feedbacks ein sehr zielgruppenorientiertes Werkzeug entwickelt werden. Die Möglichkeiten der komplexen und verschachtelten Animationen, der Einbindung von Web-Fonts und Multimedia-Komponenten, sowie der saubere Export machen Edge Animate im Workflow der Web-Designer zu einer absoluten Bereicherung. Man darf gespannt sein was kommende Updates noch mit sich bringen werden. Alles in Allem bietet Adobe aber hier schon jetzt ein komplexes Tool mit etlichen Möglichkeiten, welches darüber hinaus auch noch wirklich Spaß macht.

 

facebooktwittergoogle_pluslinkedinmail
Über den Autoren:

Email will not be published

Website example

Your Comment: