HTML5-Anzeige mit Expandable Banner für Google DoubleClick erstellen.
Dieses Video zeigt, wie du mit Adobe Animate eine HTML5-Anzeige mit Expandable Banner für Google DoubleClick gestalten kannst.
Veröffentlicht am
Willkommen bei diesem Tutorial zur Erstellung von Expandable Banners mithilfe von Adobe Animate.
In diesem Video zeige ich Schritt für Schritt, wie das geht.
Zuerst sehen wir uns das fertige Banner kurz an.
Das ist ein Expandable Banner für eine Airline namens skyhigh.
So sieht das Banner in der Ausgangsposition aus.
Und das ist das Banner in seiner vollen Größe.
Die Erstellung eines solchen Banners umfasst fünf Schritte.
Im ersten Schritt wird eine Maske erstellt.
Ich öffne die Animation und erstelle eine Maske in der Größe des geschlossenen Banners im ersten Frame.
Das Banner soll sich von links nach rechts ausrollen.
Ich platziere das Rechteck also in die obere linke Ecke.
Nun lege ich die Größe des vollständig ausgerollten Banners fest.
Für den Übergang zwischen der geschlossenen und der geöffneten Position verwende ich ein Form-Tween.
Adobe Animate weiß jetzt, wie das Banner erweitert werden soll.
Nun muss ich festlegen, wie sich das Banner wieder zusammenzieht.
Die Verkleinerung wird initiiert, wenn die Animation endet.
Ich habe festgelegt, wie das Banner geöffnet und geschlossen wird.
Dafür musst du nur diese Ebene in eine Maske konvertieren und alle anderen Ebenen darunter legen.
Sehen wir uns die Vorschau an.
Klicke auf das Schlosssymbol, um die Maske zu aktivieren.
Die Maske funktioniert.
Sehr schön.
Als Nächstes muss ich überlegen, wie die User mit dem Banner interagieren sollen.
Sie können auf die Werbung klicken oder mit der Maus darüber fahren, um das Banner zu öffnen.
Ich zeige, wie ein Banner per Mouseover aktiviert wird.
Ich füge eine Ebene für einen Button hinzu und erstelle ein Rechteck in der Größe des geschlossenen Banners.
So kann der User den Mauszeiger an beliebiger Stelle über das geschlossene Banner bewegen, um es zu aktivieren.
Konvertiere diese Form in eine Schaltfläche.
Da die Schaltfläche per Mouseover aktiviert wird, sollte sie unsichtbar sein.
Dazu setze ich den Zustand auf „Aktiv“ (Hit).
Ich wähle die Schaltfläche aus und gebe einen Namen für die Instanz ein.
Sehen wir uns das Ergebnis an.
Der Button ist durchgängig sichtbar, während sich das Banner öffnet.
Das ist nicht korrekt.
Er sollte nur am Anfang sichtbar sein.
Um das zu korrigieren, füge ich einen leeren Keyframe bei Frame 2 ein.
Nachdem ich eine Schaltfläche zum Öffnen des Banners erstellt habe, brauche ich auch eine zum Schließen des Banners.
Ich füge einen Keyframe am Ende der Animation ein und erstelle einen Button zum Schließen.
Ich gebe der Instanz einen Namen.
Schauen wir, ob die Schaltfläche nur am Ende der Animation sichtbar ist.
Eine neue Vorschau.
Es funktioniert.
Für das Verständnis des nächsten Schritts sehen wir uns unsere Arbeit in einem Browser an.
Das Banner wird automatisch geöffnet und geschlossen – in einer Endlosschleife.
Das war nicht das Ziel.
Es sollte sich nur öffnen und schließen, wenn der Anwender damit interagiert.
Das korrigiere ich jetzt.
Ich erstelle eine Aktionsebene.
Mit dem Assistenten lege ich fest, dass die Animation im ersten Frame stoppt, sodass das Banner nur geöffnet wird, wenn der User die Maus darüber bewegt.
Mit dem Assistenten setze ich nun einen Stopp an das Ende der Animation, damit das Banner nur geschlossen wird, wenn der Anwender auf die Schließen-Schaltfläche klickt.
Sehen wir uns die Vorschau an.
Das Banner funktioniert wie vorgesehen.
Der nächste Schritt ist erforderlich, um sicherzustellen, dass das Banner auf Marketing-Plattformen funktioniert, wie z.
B.
Google DoubleClick oder Seismic.
Marketing-Plattformen wie Google DoubleClick bieten bereits genehmigte Vorlagen, die wir in Animate in einen HTML-Wrapper integrieren müssen.
Zuerst downloade ich die passende Vorlage von der Vorlagen-Datenbank der Google Rich Media Gallery.
Parallel dazu muss ich einen Animate-HTML-Wrapper exportieren.
Ich öffne beide Dateien in einem Text-Editor.
Die Google-Vorlage ist auf der linken Seite.
Ich kopiere Code aus der Google-Vorlage in den HTML-Wrapper aus Animate.
Die Google-Vorlage kann jetzt geschlossen werden.
Ich öffne die JavaScript-Datei und entferne nicht benötigten Code.
Das kann einige Minuten dauern.
Es ist wichtig, dabei sorgfältig vorzugehen.
Wenn du fertig bist, kann der Code aus der JavaScript-Datei in den HTML-Wrapper aus Animate kopiert werden.
Bevor es zum nächsten Schritt geht, muss ich noch etwas Code im Animate-HTML-Wrapper anpassen.
Dann muss ich dafür sorgen, dass Google DoubleClick nachverfolgen kann, wann User die Werbeanzeige öffnen oder schließen.
Dafür kopiere ich Code aus dem Animate-HTML-Wrapper in die Bedienfelder „Aktionen“ der entsprechenden Frames.
Google DoubleClick kann nun erfassen, wann Anwender mit dem Banner interagieren, aber nicht, wann sie auf den Call-To-Action-Button klicken.
Das machen wir jetzt.
Das Banner kann jetzt veröffentlicht werden.
Es lohnt sich, ein Profil zu erstellen, das du wiederverwenden kannst, wenn du ein ähnliches Banner erstellst.
Ich importiere den Animate-HTML-Wrapper und veröffentliche die Datei.
Nun befinden sich eine HTML- und eine JavaScript-Datei im Projektordner.
Unser Banner ist bereit für den Upload auf Google DoubleClick.
Gut gemacht!
Bevor du die Datei auf Google DoubleClick hochladen kannst, muss noch ein Backup-Bild des Banners in der geschlossenen Form erstellt werden.
Dieses Bild verwendet Google DoubleClick, wenn das Banner nicht wie vorgesehen funktioniert.
Ich packe alle soeben exportierten Dateien und das Backup-Bild in eine Zip-Datei und lade die ZIP-Datei in mein Konto auf DoubleClick Studio hoch.
Im folgenden Bildschirm gebe ich die URL ein, zu der die Anwender geleitet werden, wenn sie auf den Call-To-Action-Button klicken.
Schließlich gebe ich die Breite und Höhe des geöffneten Banners ein.
Ich überprüfe das Ergebnis.
Es funktioniert.
Hervorragend.
Auf dem nächsten Bildschirm kann ich den Content veröffentlichen.
Nun weißt du, wie du ein Expandable Banner mit Adobe Animate erstellen kannst.
Du kannst auch eine Beispielvorlage herunterladen, die den gesamten Code enthält, der für die Erstellung eines solchen Banners erforderlich ist.
Viel Glück.
Zusammenfassung:
Banner-Animation erstellen und per Maske den erweiterten und verkleinerten Zustand des Banners gestalten
Mit dem Aktionsassistenten Code hinzufügen, um Interaktivität für die Ereignisse „On Mouse Click“ und „On Mouse Over“ zu definieren
Google DoubleClick-kompatiblen HTML5-Wrapper erstellen und zu Animate hinzufügen
CTA zur Anzeige hinzufügen
Kompatibilität der Anzeige mit Google DoubleClick prüfen und bei Google DoubleClick Studio hochladen
Beitrag Von
Get It Communications
