Dank HTML Canvas und SVG, JavaScript und CSS3 sind Animationen im Browser möglich, die es bis vor kurzem nur mit Flash gab. Und spätestens seit dem iPhone und dem Zeitalter des mobilen Surfens gibt es auch Interesse an Flash-Inhalten, ohne Flash Player. Der Vorteil von Flash, bzw. der Grund warum Flash noch nicht durch HTML5 ersetzt wurde ist, dass das Erstellen von HTML5 Animationen noch schwieriger ist. Außerdem sind hier Einbindung und einheitliche Spezifizierung noch nicht so einfach und klar. Das ist vor allem im Bereich der Onlinewerbung wichtig, einem großen Einsatzgebiet von Flash. Es gibt genaue Regeln wie groß ein Banner sein darf, wie skaliert werden kann, wie die Verlinkung bei der Einbindung übergeben werden kann oder wie er zu schließen ist bei großen Formaten. Hierfür gibt es JavaScript Funktionen, nach dem iab-Standard, die auf allen Seiten auf denen Werbung vertrieben wird eingebunden sind. Und Schlussendlich kann man sich beim Flash Player ziemlich sicher sein, dass er auf den allermeisten PCs vorhanden ist. Bei HTML5 Unterstützung besteht da noch mehr Unsicherheit, vor allem weil es noch keine fixen und einheitlichen HTML5-Spezifikationen gibt.

Trotzdem, gerade auf mobilen Geräten ist HTML5 schon Thema, vor allem bei der Werbung. Genau Spezifikationen sind gerade in der Entstehung wie beispielsweise ORMMA (Open Rich Media Mobile Advertising), eine API mit einem Set an Funktionen, beispielsweise für expand und collapse bei Bannern. Man kann sich schon bei etlichen Vertreibern von mobiler Werbung, auch bei In-App Ads, darauf verlassen, dass diese Funktionen vorhanden sind und mit den eigenen Werbebannern verwendet werden können.

Erstellung von HTML5 Animationen

Gleichzeitig entstehen auch Flash-ähnliche Tools, die die Entwicklung einfacher Animationen ermöglicht und teilweise auch schon Zugriff und Integration der ORMMA API ermöglicht (beispielsweise der Sencha Animator). Es gibt aber auch noch andere Tools für HTML5 Animationen, die nicht nur auf Werbung ausgerichtet sind. Hier eine kleine Vorstellung der Tools, mit denen HTML5 Animationen erstellt, konvertiert oder bearbeitet werden können.

• Hype (Authoring-Tool)
• Sencha Animator (Authoring-Tool)
• Adobe Edge (Authoring-Tool)
• Adobe Wallaby (»Kompiliert« Flash-Dateien in HTML5-Animationen)
• Swiffy (wandelt SWF in HTML5 um)
• Radi (Einfache Animations-Software für Canvas)
• Google Automatoon: Einfache HMTL5 Animationen online erstellen

Ein guter Artikel zu dem Thema: http://praegnanz.de/weblog/neue-wege-zur-erzeugung-von-html5-animationen

Und eine kurze Vorstellung aller oben genannten Tools: HTML5_Animationen

Und hier jetzt noch ein Beispiel zu einer HTML5 Animation, die mit Edge erstellt wurde. Zum Einbinden verwendet man am einfachsten iframes. Die Files zu diesem Beispiel stehen hier zum Download bereit: MFG Banner 250×250