Bei manchen Animationen (z.
B.
Web-Bannern) muss zusätzlicher Code eingefügt werden – Codesnippets oder sogar ganze Code-Bibliotheken –, damit unterschiedliche Publishing-Plattformen unterstützt werden.
Hier ist ein einfaches Web-Banner.
Unser Ziel ist, in den veröffentlichten HTML-Code etwas JavaScript-Code einzufügen.
Dazu verwenden wir HTML5 Canvas-Vorlagen.
Du findest sie unter den „Veröffentlichungseinst...“
(Publish Settings...) für das Dokument.
Für „JavaScript/HTML“ unter der Registerkarte „HTML/JS“ ist „Vorlage für das Veröffentlichen von HTML“ (Template for publishing HTML) auf „Standardvorlage“ (Default Template) gesetzt.
Man kann aber auch eine neue Vorlage importieren.
Das wäre eine benutzerdefinierte Vorlage, bei der etwas Code in den HTML-Code eingefügt wurde, zur Anpassung an das jeweilige Anzeigennetzwerk, für das du arbeitest.
Als Ausgangspunkt für unser Projekt kommt die Schaltfläche „Exportieren“ (Export) ins Spiel.
Durch Anklicken kann für die Vorlage ein Exportziel gewählt und ein Name eingegeben werden.
Der Dateityp, in den exportiert wird, ist HTML.
Wenn alle Einstellungen korrekt sind, klicke ich auf „Speichern“ (Save).
Nun kannst du die HTML-Vorlage an ihrem Speicherort mit einem Code-Editor öffnen, um den Inhalt anzuzeigen und zu bearbeiten.
Gemäß den Notizen hier oben enthält das Dokument verschiedene Token, dargestellt durch ein Dollarzeichen.
Benutzerdefinierter Code soll nur dort eingefügt werden, wo in den Kommentaren angegeben.
Z.
B. hier in Zeile 16: „Write your code here“ (Schreibe hier deinen Code).
Eine Notiz besagt, dass alle vorhandenen Token durch die entsprechenden Werte ersetzt werden.
Zum Beispiel hier, wo die JS-Bibliothekskripts ausgegeben werden – in Zeile 18.
Leerzeilen werden automatisch entfernt.
Auch sollten alle unnötigen Kommentare entfernt werden, bevor die Vorlage erstellt wird.
Wenn ich nach unten scrolle, sieht man, wo der Head-Abschnitt endet und der Body-Abschnitt beginnt.
In der Regel muss der Code an eine Stelle vor dem Ende des Head-Abschnitts platziert werden, v. a. bei benutzerdefinierten JavaScript-Bibliotheken.
Nach dem Aufbereiten der HTML5-Vorlage gemäß den Anweisungen eures Anzeigennetzwerks kannst du die Vorlage speichern und zurück in Adobe Animate eine neue benutzerdefinierte Vorlage importieren.
Hier ist „custom.html“.
Öffnen wir sie.
Die „Vorlage für das Veröffentlichen von HTML“ (Template for publishing HTML) ist nun eine benutzerdefinierte Vorlage (Custom).
Bei jeder Veröffentlichung kommt nun die benutzerdefinierte Vorlage zum Einsatz, mit dem spezifischen Code, den das Anzeigennetzwerk vorgibt, damit die Kompatibilität unserer HTML5-Banner mit der Plattform gegeben ist.
