Animation im modernen Web – Tools im Überblick

Mit Animationen angereicherter Rich-Content ist nicht mehr aus dem modernen Web wegzudenken. Was jahrelang exklusiv durch Adobe Flash animiert wurde, kann dank HTML5 plattformunabhängig und mit unzähligen Tools erledigt werden. Egal ob Online-Editoren oder lokale Programme – praktisch alle setzen hierbei auf Webstandards wie Cascading Style Sheets (CSS3) und JavaScript.

Diese Technologien sind bekanntlich keineswegs neu. Neuer ist jedoch die Möglichkeit, mit einer grafischen Benutzerobefläche nach dem WYSIWYG-Prinzip zu gestalten und zu animieren, ohne programmieren zu müssen («What You See Is What You Get» – englisch für «Was du siehst, ist was du bekommst»). Zurzeit gibt es ungefähr 15 verschieden Programme, die um die Gunst der Animations-Willigen buhlen. Einige davon möchte ich in diesem Beitrag vorstellen. Sämtliche für diesen Beitrag verglichenen Tools erlauben es versierten Usern, auch eigene Scripts einzufügen und auf den Quellcode einzuwirken.

Auf diese Weise erstellte Animationen können Microsites, Intros, Infografiken oder natürlich Werbebanner sein.

Voraussetzung für die Verwendung der Tools

Zumindest Basiskenntnisse im Umgang mit Vektor- und Pixelgrafiken (Adobe Illustrator und Adobe Photoshop) sollten vorhanden sein, wenn man sich an animierten Webinhalten versuchen möchte. Verständnis und Erfahrung mit Internet-Technologien schadet auch nicht. Wer bereits eine Script-Sprache beherrscht, hat dementsprechend mehr Möglichkeiten beim Animieren.

Die Tools

Als Mieter der Creative Cloud nutzte ich von Anfang an das enthaltene Programm Edge Animate CC. Nach dem Start im Jahr 2011 ist es inzwischen bestens in die Reihe der bestehenden Kreativprogramme integriert und vollständig mit Webstandards aufgebaut. Das heisst konkret, dass alles was in Edge Animate CC angezeigt wird, auch so im Browser läuft. Gedacht ist dieses Tool für die Erstellung interaktiver und animierter Webcontents.

An dieser Stelle ein aktueller Hinweis: Adobe hat leider die Weiterentwicklung von Edge Animate CC im November 2015 eingestellt. Wer also künftig noch Animationen für HTML5 und andere Plattformen erstellen will, dem sei ein Blick auf das entstehende Adobe Animate CC empfohlen.

Flash CC ist insofern nicht tot, erlebt aber eine komplette Neuausrichtung aufgrund der veränderten Anforderungen im modernen Web. Eine neutrale Plattform für alles rund um Edge Animate ist http://edgedocks.com. Edge Animate CC ist wie sämtliche Desktop-Produkte von Adobe für Windows und Mac verfügbar.

Website: www.adobe.com/edge-animate
Twitter: @AdobeAnimateCC

Adobes bekanntester Mitbewerber im Feld der Animations-Tools ist sicherlich Hype von Tumult. Zurzeit in der Version 3.5 auf dem Markt, gibt es Hype in einer Standard- ($49.99) und Pro-Version ($99). Wobei sich letztere durch In-App-Käufe erweitern lässt. Mir gefiehl hier besonders die Live-Vorschauf auf mobilen Geräten. Freunde von Microsoft Windows gehen leider leer aus.

Website: www.tumult.com/hype
Twitter: @hypeapp

Viele Anbieter von Werbe-Servern bekunden Mühe, Inhalte aus Animations-Tools zu übernehmen. Das Programm Google Web Designer verspricht hier Besserung und zielt speziell auf Banner-Erstellung ab. Alle Tools exportieren zwar HTML, CSS und JS – die Serveranbieter sind hier aber noch zu wenig vorbereitet auf die spezifischen Anforderungen.

Wer ausschliesslich Werbebanner erstellen muss und ein Tool sucht, das sich nahtlos in den Google-Workflow einfügt, fährt gut mit diesem kostenlosen Programm. Konkret erwähnt sei auch die Integration von Google Drive, DoubleClick Studio und AdWords.

Website: www.google.com/webdesigner
Twitter: @GoogleWDesigner

Ein sehr interessanter Online-Editor ist der HTML5 Maker. Leider ist er nur in Englisch verfügbar, ab $4.99 pro Monat ist man aber dabei. Für Einsteiger stehen zahlreiche Templates und Banner zur Verfügung, um gleich loszulegen. Für User ohne Creative-Cloud-Zugang und für die gelegentliche Erstellung von Slides oder Banner dürfte dieses Tool absolut ausreichen.

Website: www.html5maker.com
Twitter: @html5maker

Mit Animatron steht ein weiterer beliebter Online-Editor für Animationen am Start. Wie so oft setzt auch Animatron auf das sogenannte Freemium-Modell, mit drei Abstufungen von kostenlos bis $20 pro Monat. Wer kein Problem mit der englischen Sprache und cloudbasierten Diensten hat, kann in wenigen Schritten einen kostenlosen Account errichten und loslegen.

Website: www.animatron.com
Twitter: @Animatron

Must Haves – was ein Tool braucht

Wie eingängig erwähnt, verfügen alle vorgestellten Tools über eine Design- und Code-Ansicht. Der Export ist (in der Regel) für animierte GIFs, Videoformate und natürlich HTML möglich. Das Erweitern mit eigenem Code (JS) ist selbstverständlich, bei den Sharing Features gibt es jedoch Unterschiede.

Gemeinsam haben auch alle Tools den Crossbrowser-Support und nach Bedarf die Möglichkeit zu responsivem Verhalten.

Fazit

Für einfachere Arbeiten reichen die Online-Editoren und deren Vorlagen sicherlich aus. Für komplexere Animationen und spezielle Verhalten ist Erfahrung mit JavaScript und CSS sehr zu empfehlen. Auch hierfür sind die lokalen Programme tendenziell hilfreicher.

Ausschlaggebend für die Wahl des passenden Tools dürfte vor allem die spätere Verwendung der erstellten Animation sein. Aus Erfahrung lohnt es sich, beim Webmaster oder AdServer-Anbieter die technischen Voraussetzungen zu erfragen.