{"id":1190,"date":"2021-05-21T11:55:53","date_gmt":"2021-05-21T11:55:53","guid":{"rendered":"https:\/\/www.zensations.at\/?p=1190"},"modified":"2023-08-09T01:49:56","modified_gmt":"2023-08-09T01:49:56","slug":"10-tipps-zur-html-banner-erstellung-mit-animate-cc","status":"publish","type":"post","link":"https:\/\/www.zensations.at\/blog\/10-tipps-zur-html-banner-erstellung-mit-animate-cc\/","title":{"rendered":"10 Tipps zur HTML-Banner Erstellung mit Animate CC"},"content":{"rendered":"
\n
\n

Jedes Programm hat seine ganz besonderen Herausforderungen. Wir zeigen dir, worauf du bei der Umsetzung von HTML-Banner mit\u00a0Adobe Animate CC<\/a>\u00a0achten musst. Zusammengefasst die h\u00e4ufigsten Probleme, die mir in meinen Schulungen begegnen.<\/p>\n

1. Erweiterte Ebenen<\/h2>\n

Du findest Erweiterte Ebenen in den Eigenschaften unter „Mehr Einstellungen“. Die Checkbox sollte NICHT angeklickt sein. Man ben\u00f6tigt erweiterte Ebenen f\u00fcr Shenanigans mit der Kamera. Allerdings f\u00fchrt das bei Adservern zu Problemen. Vielleicht wird sich das in Zukunft \u00e4ndern (Fingers crossed).<\/p>\n<\/div>\n<\/div>\n

\"\"<\/div>\n
\n
\n

2. Name it!<\/h2>\n

Benenne deine Ebenen, benenne deine Symbole, benenne deine Funktionen! Alle Dinge brauchen einen Namen.<\/p>\n

3. Tweens<\/h2>\n

Wir verwenden Klassische Tweens und Formtweens, keine Bewegungstweens! Bewegungstweens werden in Einzelbilder konvertiert und machen den Banner unn\u00f6tig gr\u00f6\u00dfer.<\/p>\n

4. Bilder exportieren<\/h2>\n

Die Standard-Ver\u00f6ffentlichungseinstellungen von Animate sind nicht f\u00fcr Banner geeignet. Besonders die Bildelemente fallen uns da in den R\u00fccken. Wir wollen KEINE Textur und KEIN Spritesheet, sondern Bildelemente. Ausserdem soll kein extra Ordner daf\u00fcr erstellt werden. Wir m\u00f6chten alle Elemente im selben Ordner wie die HTML und JS Datei (Unterverzeichnisse entsprechen nicht dem IAB Standard).<\/p>\n

(Ein Spritesheet macht nur Sinn, wenn wir sehr viele kleine PNGs mit Transparenz haben)<\/p>\n

Wir ben\u00f6tigen die Bildelemente einzeln, um sie nochmal extra speziell zu komprimieren. So k\u00f6nnen wir PNGs mit Transparenzen und JPGs optimal zusammen nutzen. F\u00fcr das Komprimieren benutze wir gerne\u00a0tinypng.com<\/a>\u00a0(Man kann die komprimierten Bilder nochmal durchlaufen lassen um sie noch weiter zu verkleinern).<\/p>\n

5. Schatten, Glow und andere Effekte<\/h2>\n

Vermeide diese Effekte. Wenn Schatten unbedingt notwendig sind, kann man sie im Photoshop erzeugen und in ein transparentes PNG transportieren.<\/p>\n

Dazu setze die Fl\u00e4che auf 0%. Sollte der Schatten dann nicht gef\u00fcllt sein, klicke doppelt auf den Effekt und entferne bei \u201eEbene spart Schlagschatten aus\u201c das H\u00e4kchen.<\/p>\n

Gehe dann auf Bild -> Zuschneiden -> Transparente Pixel und exportiere deinen Schatten als PNG24.<\/p>\n

Durch mehrfaches Komprimieren erzeugst du damit einen leichteren Banner als wenn du Effekte nutzt.<\/p>\n<\/div>\n<\/div>\n

\"\"<\/div>\n
\n
\n

6. Banner testen<\/h2>\n

Bevor ihr eure Banner an den Kunden schickt, w\u00e4rs 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<\/p>\n

7. Easings einf\u00fcgen<\/h2>\n

Lineare Bewegungen finden sich nicht in der Natur. Sie sind auch nicht besonders sch\u00f6n anzusehen. Wie gut, dass wir Easings haben! Zwar fehlt uns der n\u00fctzliche Speed Graph von After Effects, aber wir k\u00f6nnen die einfachen Easings von Animate nutzen um schnelle Verbesserungen unserer Animation zu erzielen! Wir k\u00f6nnen 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\u00fcsselbildern und w\u00e4hlen in den Tweening Eigenschaften den Effekt Ease in-Out -> Quad aus (zur Auswahl muss 2 Mal auf die Enter Taste gedr\u00fcckt werden!).<\/p>\n<\/div>\n<\/div>\n

\"\"<\/div>\n
\n
\n

8. JS File gro\u00df<\/h2>\n

Ein gro\u00dfes 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\u00df, k\u00f6nnt ihr noch ein paar KB abspecken: https:\/\/javascript-minifier.com<\/p>\n

9. Zu viele Dateien im Werbemittel?<\/h2>\n

Das kann leicht passieren wenn man Banner auf einem Mac erstellt. Wenn wir mit dem Finder zippen entstehen zus\u00e4tzliche Kopien der Dateien im Zip. Um das zu umgehen k\u00f6nnen wir mit externen Zip Programmen so tun als w\u00e4ren wir ein PC. Ich nutze daf\u00fcr YemuZip.<\/p>\n

10. Banner Stop<\/h2>\n

Wenn this.stop(); nicht ausreicht:<\/p>\n

Dein Banner soll nach 30 Sekunden stoppen, aber verschachtelte Movieclips machen dem Adserver Probleme, soda\u00df der n\u00e4chste Banner nicht geladen werden kann? Diese Funktion sorgt daf\u00fcr, dass alles nach 30 Sekunden stoppt.<\/p>\n

function StopAllTheThings() { createjs.Ticker.removeEventListener(‚tick‘, stage); } setTimeout(StopAllTheThings,30000);<\/p>\n

Macht eine neue Ebene f\u00fcr euren Code und f\u00fcgt diese Funktion unter Fenster -> Aktion auf das erste Schl\u00fcsselbild ein. Wenn alles geklappt hat, steht ein kleines \u201ea\u201c \u00fcber eurem leeren Schl\u00fcsselbild. Es ist \u00fcbrigens egal wie ihr diese Funktion nennt. Ihr k\u00f6nnt StopAllTheThings beliebig \u00e4ndern (keine Umlaute, keine Sonderzeichen!). Es ist nur wichtig, dass in beiden Zeilen exakt derselbe Name steht. Gro\u00df-Kleinschreibung beachten! Hier gilt, wie auch sonst bei Code: Don\u2019t try to be a hero -> Copy Paste!<\/p>\n

Wenn ihr noch Unterst\u00fctzung braucht, oder die Banner-Produktion lieber abgeben m\u00f6chtet, k\u00f6nnen wir das f\u00fcr euch \u00fcbernehmen.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Jedes Programm hat seine ganz besonderen Herausforderungen. Wir zeigen dir, worauf du bei der Umsetzung von HTML-Banner mit\u00a0Adobe Animate CC\u00a0achten musst. Zusammengefasst die h\u00e4ufigsten 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\u00f6tigt erweiterte Ebenen f\u00fcr […]<\/p>\n","protected":false},"author":3,"featured_media":832,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[74,80,84],"tags":[179],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1190"}],"collection":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/comments?post=1190"}],"version-history":[{"count":1,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1190\/revisions"}],"predecessor-version":[{"id":1191,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1190\/revisions\/1191"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media\/832"}],"wp:attachment":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media?parent=1190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/categories?post=1190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/tags?post=1190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}