• 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.

Noch mehr finden:

  • Thema

  • Technologie

Beitrag teilen
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on xing
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.

 

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

  • publishingblog-News
    jeden Dienstag in deiner Inbox

    Noch mehr finden:

    • Thema

    • Technologie

    Dein Gerät ist aktuell offline.