Adobe Animations - Weiterbildung auf meetup

Geschrieben von Mirko Schröder veröffentlich am in der Kategorie Design
Weiterbildung wird groß geschrieben bei netzkern, und damit der gute Vorsatz nicht unter die (Alltagsgeschäft-) Räder kommt, sind 6 Weiterbildungstage vorgeschrieben.
 
Im Rahmen dieser „Pflicht“ habe ich die Veranstaltung Adobe Animations der beliebten meetup-Reihe besucht. In solchen meetups treffen sich Interessierte zu beliebigen Themen und tauschen sich aus. Das ist Know-How Transfer, Networking und beinhaltet manchmal auch freie Speisen und Getränke je nach Location-Sponsor. 

Dieses Mal waren wir bei SAE in Köln Mülheim. Es gab Feierabendbierchen und Daniel Connerth von Trendspurt GmbH führte in lockerer und kompetenter Art durch die sehr informative Präsentation. Da ich gerade selber HTML5 Werbemittel mit Adobe Animate erstelle, konnte ich an diesem Abend konkrete Infos mitnehmen, die ich gleich am nächsten Morgen in meinem Projekt einsetzen konnte.

 

Flash ist tot, lang lebe Flash

Werbemittel habe ich ‘damals’ mit Flash erstellt, daher fühle ich mich in Animate zuhause. Vorher hatte ich Google Web Designer (GWD) ausprobiert. Hier kommt man zwar schnell zum Ergebnis, aber die gestalterischen Möglichkeiten sind limitiert.

Interessant fand ich die Einsicht, dass es zwischendurch bei Adobe ein neues Programm gab (wird nicht weiterentwickelt): Edge Animate. Gezeigt wurde an diesem Abend ein Workflow in Adobe Animate, welches im Prinzip eine Neuauflage von Flash mit HTML5 Export ist.

Hier hat Daniel sehr viel Input gegeben und auf Anfrage auch konkrete Lösungen gezeigt.

 

SWF vs. HTML5: Fonts

Sehr hilfreich war der Hinweis, dass Performance Probleme auftauchen können, wenn man Fonts als Vektoren einbindet (was nötig sein kann, wenn die Kundenschrift nicht als Webfont vorliegt). Ansonsten gibt es mit Google Webfonts und Adobe Typekit eine große Auswahl an Webfonts, die man ins Projekt einbinden kann. Da HTML5 kein geschlossenes Format ist, müssen gekaufte Fonts ggf. nochmal als Webfonts lizensiert werden.

Beim Thema Responsiveness patzt Adobe allerdings. Eine Option, die vorher als Witz für Photoshop kursierte, hat jetzt Einzug in Animate gefunden: Make responsive (Deutsch: Interaktiv machen).

 

Adobe Animations - Make Responsive

 

 

Diese Option führt lediglich dazu, dass die Animation proportional skaliert wird. Wirklich responsives Verhalten erhält man gerade bei der Produktion von Bannern (extremes Hoch- zu Querformat) mit unterschiedlichem Aufbau, Safe-Areas und ggf. auch Reduktion der Elemente.

 

Goodbye Keyframes

Und da kommt Hype von Tumult ins Spiel: mit einer intuitiven Bedienung ohne lästige Keyframes und der Möglichkeit, mit Breakpoints in Szenen wirklich responsive Banner zu erstellen, wird dieses Tool zu einer sehr interessanten Alternative.

Unter den Teilnehmern waren auch Mitarbeiter einer großen Agentur aus Düsseldorf, die alle Werbemittel mit diesem Tool erstellen und damit gute Erfahrungen gesammelt haben.

Interessanter Tip am Rande

Unbemerkt in der Version CC eingeführt: Photoshop Generate. Damit exportiert man alle Ebenen, die entsprechend benannt sind, als genau solch eine Datei. (z.B.: back.jpg, glaskugel.png, starticon.svg)

 

Adobe Animations Photoshop Generate 

 

 

Zum Abschluß noch ein paar spannende Links:

HTML5 Animationen http://animista.net/play/basic

Beispiele zu Animate: http://tourdeanimate.com/ 

Beispiele zu Hype: http://tourdehype.com/sample/animated-web-banner