Blog Bild

HTML5 Banner mit Edge Animate

Vor nur wenigen Jahren war Flash das unumstrittene Format schlechthin für Werbebanner aller Art – ein Umstand der durch die Sperre der meisten mobilen Endgeräte des Formates allerdings stark ins Wanken geraten ist. Mobile ist immerhin schon lange kein Randthema mehr: Gemäß einer Statistik von Werbeplanung.at nutzen im Oktober 2014 bereits 70% der Österreicher außerhalb Ihres Haushaltes mobiles Internet.

HTML5 ist ohne diese Einschränkung ebenfalls als Player in den Markt der Bannererstellung eingezogen und bringt somit einen entscheidenden Vorteil mit.
HTML5 Banner müssen hierbei nicht stets von Hand gecoded werden – es gibt zahlreiche Tools, welche die Erstellung eines Banners ähnlich wie bei Flash-Pendants ermöglichen. Eines dieser Tools ist so zum Beispiel seit der Creative Cloud Adobe’s Edge Animate, welches in diesem Artikel näher beschrieben wird.

Nach Erstellung eines neuen Projektes ist so im Standardsetting die leere „Bühne“ und eine Timeline zu sehen, sowie das Eigenschaften-Panel, in welchem erste Standardwerte wie die Hintergrundfarbe oder die Größe des Banners direkt verändert werden können. Neben den Feldern für Breite und Höhe, befinden sich direkt Umschalter, welche zwischen Pixel und Prozent für responsive Werbemittel wechseln lassen. Auffallend ist weiters die Option „Responsive Scaling“, welche je nach Wunsch den Banner direkt auf die Höhe, Breite bzw. beidem des Bildschirms anpassen lässt.

Sobald ein Objekt auf der Stage, z.B. eine Form oder Text erzeugt wird, generiert Edge Animate automatisch einen neuen Layer in der Timeline – praktisch im direkten Vergleich zum häufigen Ebenenchaos in Adobe Flash. Auch die Animation von Objekten ist bewusst einfach gehalten: Um ein Objekt zu animieren reicht es, in der Timeline an die gewünschte Stelle zu gehen und neben der gewünschten Eigenschaft, z.B. der X-Koordinate auf das Rautensymbol zu klicken. Durch diesen Klick wird ein neuer „Keyframe“ für die gewählte Eigenschaft erzeugt. Diese Eigenschaft wird darauf direkt unter der Ebene in der Zeitleiste dargestellt, wo sie auch im Schnellzugriff per Drag&Drop verändert werden kann. Wenn nun ein weiterer Keyframe erzeugt wird und sich beide Werte voneinander unterscheiden generiert Edge Animate automatisch eine Transition und es kommt zur Animation. Dies kann natürlich beliebig mit den verschiedensten Eigenschaften und Objekten wiederholt werden.

Edge Animate
Edge Animate

Wenn der gewünschte Banner fertiggestellt wurde, kann in Edge Animte, ähnlich wie in Flash, die Arbeit unter „Datei -> Veröffentlichen“ exportiert werden. Das Ergebnis dieses Export-Vorganges ist ein Ordner mit generiertem HTML und Javascript sowie einem Ordner mit allen enthaltenen Bildern. Das bietet natürlich Vorteile für Frontend-Entwickler, da alle Files natürlich mit jedem beliebigen Editor geöffnet und noch bearbeitet werden könnten – eine Möglichkeit die z.B. für nachträgliche CSS Anpassungen oder bei der Einbindung eines clickTags sinnvoll sein können.