HTML5-Banner mit Adobe ANIMATE

Am Beispiel HTML5 – Banner für „Stelldichein mit York“

Ziel ist IMMER, die Dateien möglichst klein zu halten, da Ad-Plattformanbieter strenge Vorgaben haben. Google Ads z.B. hat eine maximale Größe für ZIP-Dateien von 150kB (Archiv inklusive HTML, JS, Bilddateien).

Adobe Animate Projektdateien NIEMALS auf Netzlaufwerken bearbeiten.
Hier besteht die Gefahr, dass Dateien verschwinden.
Erstellung und Bearbeitung NUR auf lokaler Festplatte ausführen.
Export kann dann auf ein Netzlaufwerk durchgeführt werden.

1. Erstellen eines neuen Dokuments als HTML5-Canvas!

2. Importieren der benötigten Bilder und Elemente in die Bibliothek

Möglichst nur Vektorgrafiken verwenden!

3. Erstellen der gewünschten Animation

Für den Umgang mit der Timeline empfehle ich folgendes Tutorial: https://www.youtube.com/watch?v=sbMxZC-Pra0
Jedes Element muss, damit es einzeln/ unabhängig animiert werden kann, auf eine eigene Ebene.
Um mit Elementen und Bildern in der Timeline zu arbeiten und sie zu animieren, müssen sie in ein Symbol umgewandelt werden

Text sollte als „Statischer Text“ definiert werden.
- Bei statischem Text wird die Schriftart als Vektor eingebunden, d.h. sie muss nicht auf dem System des „Kunden“ vorhanden sein.
- bei dynamischem Text kann zwar eine Webfont eingebunden werden, (muss damit dann auch nicht auf externen Systemen vorhanden sein) aber hier gibt es Anzeigefehler bei einzelnen Browsern (Firefox).

4. Export als HTML5-Banner

Klicken auf „Datei/Einstellungen für Veröffentlichungen“ oder shift+cmd+F12
Unter „Standard“ wird neben Ausgabename und -ort wird hier auch angegeben, wie die Bilddateien exportiert werden sollen. Hier „Bildelemente“ auswählen.
„CreateJS-Elemente exportieren“ muss aktiviert sein.

Unter „Bildeinstellungen“ wird „Bildabmessungen optimieren“ aktiviert.

5. Bilder verkleinern

Nach Export kann es sein, dass die Bilder trotz Optimierung seitens Animate in ihrer Gesamtheit noch zu groß sind. Da hilft dann nur verkleinern. Sehr nützlich hierfür z.B. tinypng.com.
Nach Verkleinerung können die Bilder einfach ausgetauscht werden.
Bei Bedarf diesen Vorgang wiederholen.

6. clickTag erstellen und einsetzen

Ein clickTag muss eingebunden werden, um dem Banner den gewünschten Link zuzuweisen.

Dazu muss man in die exportierte HTML gehen und folgendes anpassen:
Bei Export ist die Variable clickTag standardmäßig leer.
Hier den gewünschten Link einfügen:

Zusätzlich muss das <BODY>-Tag angepasst werden. Hier muss im <DIV>-Tag folgendes hinzugefügt werden:

onclick="window.open(window.clickTag)"

vorher:

nachher:

7a. Error in HTML5 validator // "Relative Asset Check"

Damit HTML-Banner bei Google Ads nutzbar sind, muss man zwei JavaScript-Einträge austauschen.

vorher:

nachher:

Die createJS MUSS extern verlinkt sein.
Die Enabler.js MUSS relativ verlinkt sein.

Inhalt der Enabler.js liegt hier: https://s0.2mdn.net/ads/studio/Enabler.js.
Den Inhalt kopieren und als Enabler.js im Ordner „scripts“ (liegt NEBEN der HTML-Datei) abspeichern.

Diesen Code für die Create.js einfügen:
<script src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2019.11.15_min.js"></script>

7b. Error in HTML5 validator // "Missing primary asset check"

standardmäßig steht in der HTML-Datei:
<meta name="authoring-tool" content="Adobe_Animate_CC">

Dies muss ersetzt werden durch:
<meta name="ad.size" content="width=300,height=600">

Hier ist natürlich die jeweilige Größe der Ad anzugeben.

8. Alle zugehörigen Dateien des Banners als ZIP-Datei abspeichern

Die ZIP-Datei ist die MASTER-Datei des HTML5-Banners. Sie wird bei Google Ads o.ä. hochgeladen.
!!! Für Google Ads gilt: Nicht größer als 150kb !!!

9. Validität prüfen

Die ZIP-Datei bei folgender URL-hochladen:

https://h5validator.appspot.com/adwords/asset

Wenn hier alles grün ist, kann die ZIP durch den Kunden bei Google Ads etc. hochgeladen werden.