neue Front Animation für Kurzohr.de

Hier zeige ich wie man da am besten vorgeht. Zu aller erst habe ich eine Spritesheet für Kurzohr erstellt. Eine Laufanimation. Dafür benutze ich gerne Affinity Designer oder Adobe Illustrator.



Danach habe ich die Animation in Adobe Animate erstellt. Es handelt sich um eine einfache Keyframe Animation ohne Tweens. Das mag zwar sehr aufwendig erscheinen, lohnt sich aber. Weil die Animation dann einfach nicht so steif wirkt.

Hier gehts zur Animation

Kurzohr soll ins Bild laufen zur Mitte, sich drehen, blinzeln und die Zunge rausstrecken. Weitere Animations Stats mussten dafür in Affinity Designer erstellt werden. Zu beachten gilt das im HTML5 Modus von Adobe Animate kein Parent Layering und auch keine Bones zur Verfügung stehen d.h alle Animations Stats müssen von Hand erstellt werden.

Danach habe ich dann die Drehung in Adobe Animate als Keyframe angelegt. Genauso das blinzeln und Zunge raus strecken.

Hier gehts zur Animation

So nun wirds kniffelig. Kurzohr soll sich drehen, sodas man seinen Rücken sieht und mit einem Stift Kurzohr.de an den Background malen. Ich verwende dafür wieder Adobe Animate und zeige eine aufwendige Technik zur Erstellung dieses Vorhabens. Man könnte dies natürlich sehr einfach mit Trim Paths in After Effekts lösen, aber es soll ja eine Canvas Animation werden und da steht diese Funktion leider nicht zur Verfügung. Für die Animation mussten neue Animations Stats in Affinity Designer erstellt werden.

Kurzohr schreibt nun kurzohr.de an den Background der Webseite. Der Trick dabei ist quadratische schwarze Felder über die Komplette Schrift zu legen. Den Arm von Kurzohr mit Keyframes zu animieren, sodas es aussieht als würde er schreiben. Siehe Beispiel (Hier ist das schwarze Feld grau gefärbt, damit man es sieht). Das Feld liegt über der Schrift und vor Kurzohr. Es ist nicht ganz sauber, aber es handelt sich auch nur um Veranschaulichungs Material.

Hier gehts zur Animation

Dafür wird jetzt natürlich etwas Zeit benötigt dieses Verfahren mit dem kompletten Schriftzug zu machen, aber es lohnt sich.


Hier gehts zur finalen Animation