Skip to main content

10 Tipps zur HTML-Banner Erstellung mit Animate CC

Jedes Programm hat seine ganz besonderen Herausforderungen. Wir zeigen dir, worauf du bei der Umsetzung von HTML-Banner mit Adobe Animate CC achten musst. Zusammengefasst die häufigsten Probleme, die mir in meinen Schulungen begegnen.

1. Erweiterte Ebenen

Du findest Erweiterte Ebenen in den Eigenschaften unter "Mehr Einstellungen". Die Checkbox sollte NICHT angeklickt sein. Man benötigt erweiterte Ebenen für Shenanigans mit der Kamera. Allerdings führt das bei Adservern zu Problemen. Vielleicht wird sich das in Zukunft ändern (Fingers crossed).

Animate CC - Erweiterte Ebenen

2. Name it!

Benenne deine Ebenen, benenne deine Symbole, benenne deine Funktionen! Alle Dinge brauchen einen Namen.

3. Tweens

Wir verwenden Klassische Tweens und Formtweens, keine Bewegungstweens! Bewegungstweens werden in Einzelbilder konvertiert und machen den Banner unnötig größer.

4. Bilder exportieren

Die Standard-Veröffentlichungseinstellungen von Animate sind nicht für Banner geeignet. Besonders die Bildelemente fallen uns da in den Rücken. Wir wollen KEINE Textur und KEIN Spritesheet, sondern Bildelemente. Ausserdem soll kein extra Ordner dafür erstellt werden. Wir möchten alle Elemente im selben Ordner wie die HTML und JS Datei (Unterverzeichnisse entsprechen nicht dem IAB Standard).

(Ein Spritesheet macht nur Sinn, wenn wir sehr viele kleine PNGs mit Transparenz haben)

Wir benötigen die Bildelemente einzeln, um sie nochmal extra speziell zu komprimieren. So können wir PNGs mit Transparenzen und JPGs optimal zusammen nutzen. Für das Komprimieren benutze wir gerne tinypng.com (Man kann die komprimierten Bilder nochmal durchlaufen lassen um sie noch weiter zu verkleinern).

5. Schatten, Glow und andere Effekte

Vermeide diese Effekte. Wenn Schatten unbedingt notwendig sind, kann man sie im Photoshop erzeugen und in ein transparentes PNG transportieren.

Dazu setze die Fläche auf 0%. Sollte der Schatten dann nicht gefüllt sein, klicke doppelt auf den Effekt und entferne bei „Ebene spart Schlagschatten aus“ das Häkchen.

Gehe dann auf Bild -> Zuschneiden -> Transparente Pixel und exportiere deinen Schatten als PNG24.

Durch mehrfaches Komprimieren erzeugst du damit einen leichteren Banner als wenn du Effekte nutzt.

Photoshop Schatten - Animate CC

6. Banner testen

Bevor ihr eure Banner an den Kunden schickt, wärs gut selbst zu sehen ob alles gut geklappt hat. Ich teste meine IAB Banner hier: https://www.html5check.at Meine Google Banner hier: https://h5validator.appspot.com/dcm/asset Und Adwords Banner hier: https://h5validator.appspot.com/adwords/asset

7. Easings einfügen

Lineare Bewegungen finden sich nicht in der Natur. Sie sind auch nicht besonders schön anzusehen. Wie gut, dass wir Easings haben! Zwar fehlt uns der nützliche Speed Graph von After Effects, aber wir können die einfachen Easings von Animate nutzen um schnelle Verbesserungen unserer Animation zu erzielen! Wir können sie sowohl auf Klassische Tweens als auch auf Form-Tweens anwenden. Dazu klicken wir auf ein beliebiges Frame des Tween Pfeils zwischen den beiden Schlüsselbildern und wählen in den Tweening Eigenschaften den Effekt Ease in-Out -> Quad aus (zur Auswahl muss 2 Mal auf die Enter Taste gedrückt werden!).

7 Easing Auswahl_Animate CC

8. JS File groß

Ein großes JS File kann beideuten dass ihr zu viele Ankerpunkte bei euren Vektorbildern habt. Vielleicht versucht ihr es lieber mit einem PNG? Wenn es sich um ein wiederholendes Element handelt, dann macht ein Symbol aus einem Element und dupliziert es dann direkt in Animate! Ist eure Javascript Datei noch immer zu groß, könnt ihr noch ein paar KB abspecken: https://javascript-minifier.com

9. Zu viele Dateien im Werbemittel?

Das kann leicht passieren wenn man Banner auf einem Mac erstellt. Wenn wir mit dem Finder zippen entstehen zusätzliche Kopien der Dateien im Zip. Um das zu umgehen können wir mit externen Zip Programmen so tun als wären wir ein PC. Ich nutze dafür YemuZip.

10. Banner Stop

Wenn this.stop(); nicht ausreicht:

Dein Banner soll nach 30 Sekunden stoppen, aber verschachtelte Movieclips machen dem Adserver Probleme, sodaß der nächste Banner nicht geladen werden kann? Diese Funktion sorgt dafür, dass alles nach 30 Sekunden stoppt.

function StopAllTheThings() { createjs.Ticker.removeEventListener('tick', stage); } setTimeout(StopAllTheThings,30000);

Macht eine neue Ebene für euren Code und fügt diese Funktion unter Fenster -> Aktion auf das erste Schlüsselbild ein. Wenn alles geklappt hat, steht ein kleines „a“ über eurem leeren Schlüsselbild. Es ist übrigens egal wie ihr diese Funktion nennt. Ihr könnt StopAllTheThings beliebig ändern (keine Umlaute, keine Sonderzeichen!). Es ist nur wichtig, dass in beiden Zeilen exakt derselbe Name steht. Groß-Kleinschreibung beachten! Hier gilt, wie auch sonst bei Code: Don’t try to be a hero -> Copy Paste!

Wenn ihr noch Unterstützung braucht, oder die Banner-Produktion lieber abgeben möchtet, können wir das für euch übernehmen.

Will not be shown