• Thema

  • Technologie

Mit Animate CC leichte Banner exportieren

Mit Animate CC von Adobe lassen sich ja bekanntlich auch Werber-Banner machen, welche schön animiert auf verschiedenen Seiten glänzen sollen. Wo früher Flash noch eine SWF-Datei exportiert hat, kann nun der Animator neu puren Web-Code aus reinem HMTL, CSS und Javascript generieren. Dieser hat den Vorteil, dass er auf allen Geräten angezeigt werden kann und nur wenige KB schwer ist. Nun, zumindest wäre dies das Ziel. Denn viel Betreiber von Webseiten, welche Banner einbinden, limitieren die Maximalgrösse des Banners auf z.B. 150 KB, also fast nichts.

Dateigrösse von Web-Banner kleiner machen

Doch meistens erhält man beim ersten Export eine Gesamtgrösse von 1 MB. Dies ist vor allem dann der Fall, wenn mehrere grossflächige Bilder verwendet werden, oder einige grössere PNG eingebunden wurden. Was also tun?

Wichtig ist, dass die verwendeten Bilder der genauen Grösse entsprechen, welche sie im Banner auch einnehmen. Der Rest muss in den Export-Einstellungen und weiterer Komprimierung optimiert werden.

Exporteinstellungen von Animate CC optimieren

Wenn der erstellte Banner als Web-Banner exportiert werden soll, kann dies unter Datei/Veröffentlichungseinstellungen getan werden. Hier bieten sich einem verschiedene Möglichkeiten zur Optimierung. Die wichtigste Schraube findet sich unter dem Reiter «Spritesheet»:

Hier ist es wichtig, dass die erste Option «Bildelemente in Spritesheets kombinieren» angewählt wird. Dadurch werden alle verwendeten JPEG und PNG in jeweils eine Datei gespeichert. Die grösste Auswirkung hat aber die Qualitäts-Einstellung bei PNG und JPEG. Hier kann, je nach verwendeten Bilder, sehr viel heraus geholt werden. Schraubt man die Qualität bei den JPEG-Einstellungen zu weit nach unten, dann schauen die Bilder nicht mehr so toll aus und werden verpixelt. Je nach Bilder, kann man hier aber schon auf 20 gehen.

Bilder und Javascript von Animate CC komprimieren

Eine weitere Möglichkeit der Dateigrössen-Reduktion, liegt in der Komprimierung. Nachdem der Banner von Animate «Veröffentlicht» wurde, können im Export-Ordner die Javascript-Datei sowie die Bilder gefunden werden.

Bilder

Die Bilder lassen sich auf folgender Seite nochmals, teils erheblich komprimieren:


tinypng.com

Es lohnt sich auch, den Export zuerst auf einer besseren Qualitäts-Stufe durchzuführen und dann die Kompression zu machen, da diese keinen Qualitätsverlust zu Folge hat. Um’s Ausprobieren und mehrfache Exportieren kommt man hier nicht herum.

Javascript

Die Javascript-Datei kann, je nach Einstellungen und Animationen, um die 30 KB oder mehr sein. Da lohnt sich eine mögliche Komprimierung. Dafür muss die Datei mit einem Editor geöffnet und der komplette Inhalt heraus kopiert werden. Dieser kann nun auf folgender Webseite komprimiert werden. Einfach in das Text-Feld hinein kopieren und auf «Compress» klicken.


www.giftofspeed.com/javascript-compressor/

Danach den Code wiederum kopieren und zurück im Editor den Alten damit überschreiben. Nun noch die Datei abspeichern und fertig. Die Dateigrösse sollte sich nun um einige KB reduziert haben.

Falls Ihr noch weitere Tricks für den Export von Web-Banner aus Adobe Animate CC kennt, lasst es uns in den Kommentaren wissen.

Über mich

  • Joel Weiss

    Joel Weiss ist in der Web-Welt zuhause. Themen von der Konzeption über das Design bis zur Umsetzung von digitalen Lösungen faszinieren ihn. Die neue Publishing-Blog Webseite wurde von ihm mit WordPress umgesetzt. In der Freizeit begeistert Joel aber auch seine Canon 70D, welche vor allem zum Filmen herhalten muss.

Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
Das könnte dich auch interessieren:
Ad - SiteGround Webhosting - Einfache Site-Verwaltung. Mehr erfahren.
Beitrag teilen
Was denkst du dazu?
Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
Diskussion

2 Antworten

  1. Die JS-Datei ist gerne sehr groß, wenn man viel statischen Text verwendet. Ich vermute, dass Animate jeden einzelnen Buchstaben als Vektor in die JS-Datei niederschreibt.
    Verwendet man jedoch dynamischen Text mit Webfonts, wird nur noch der reine Text in die JS-Datei geschriebe, was enorm viel Platz spart.
    Kann man das aus bestimmten Gründen nicht tun, kann man immer noch die JS-Datei komprimieren. Dabei hilft jscompress.com. Dort werden sämtliche Leerzeichen etc. aus der JS entfernt, das spart meist so um die 5-10% der Datenmenge.

  2. Hallo, vielen Dank für deinen Beitrag. Ich habe ein Problem, vielleicht kannst du mir weiterhelfen. Images und Javaskript sind richtig schön klein (13 und 28 kb) jedoch ist die createjs-Datei mit 187kb viel zu groß, wie bekomme ich die denn kleiner?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

 

Hinweis: Es kann bis zu zwei Stunden gehen, bis dein Kommentar auf der Website erscheint. Bitte poste deinen Kommentar nur einmal 😉

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

  • Neue Beiträge als E-Mail
    jeden Dienstag die neusten Blogposts in deiner Inbox
    Unsere Partner:

    Dein Gerät ist aktuell offline.