Klassische Tweens erzeugen – Tutorial zu Adobe Animate

Neben dem Bewegungs-Tween, also dem Standard-Tween oder ganz normalen Tween, gibt es auch noch den klassischen Tween, quasi ein Urgestein aus der Flash-Zeit. Die Herangehensweise einer Animation beim klassischen Tween ist etwas anders als beim Bewegungs-Tween. Beim Bewegungs-Tween ist die Animation objektbasiert, d.h., ich verschiebe das Objekt hier auf der Leinwand und dadurch erzeuge ich Schlüsselbilder bzw. Eigenschaften-Schlüsselbilder. Bei dem klassischen Tween ist es anders, da ist es nämlich zeitleistenbasiert, sprich, wir erzeugen auf der Zeitleiste Schlüsselbilder und dadurch, durch die Schlüsselbilder, die wir hier generieren, verändern wir hier oben die Animation. Den Unterschied möchte ich jetzt mal zeigen. Wir haben ja jetzt hier einfach nur ein Schlüsselbild im Bild Nummer 1, was die ganze Zeit hier unverändert zu sehen ist. Jetzt will ich eine Animation dafür erstellen und in dem Fall muss es natürlich wie immer bei einem Tween, sich um ein Symbol handeln, das ist der Fall. Ansonsten würde mich aber auch Animate darauf hinweisen und dazu auffordern, das Objekt in ein Symbol zu konvertieren. Das ist aber nun mal jetzt schon hier der Fall. Okay, und wir wollen jetzt ganz am Ende eine Änderung haben. Wir wollen da, dass das Flugzeug hier unten rechts ist. So, ich verschiebe es also jetzt nicht, sondern ich erzeuge hier hinten ein Schlüsselbild, indem ich in dem Fall die Taste F6 drücke. Mit F6 erzeuge ich Schlüsselbilder. Mit Shift+F6 lösche ich übrigens Schlüsselbilder wieder. Okay, ich habe jetzt hier ein Schlüsselbild und jetzt, wo hier ein Schlüsselbild ist, kann ich jetzt hier den Flieger nehmen und den, sagen wir mal, hier an diese Position unten rechts bringen, der soll hier landen. Und wenn wir uns das anschauen, sehen wir, dass bis zum vorletzten Bild der Flieger hier oben links ist und erst beim letzten Bild bei Position 65 ist er hier unten rechts. Das sind also die zwei Zustände und jetzt erzeugen wir das Tween dazwischen, also "in between", in dem einen Rechtsklick machen und jetzt hier das "Klassische Tween erstellen" auswählen. Daraufhin sehen wir hier, dass jetzt die Ebene eingefärbt wurde. Ja, also in einem Lila-Farbton und wir sehen auch hier so einen Pfeil, den haben wir beim normalen Bewegungs-Tween nicht. Dafür wurde hier die Ebene nicht umgeändert, also dieses kleine Icon, das bleibt weiterhin bei dem Ebenen-Icon und nicht bei einem Icon, was Schlüsselbilder darstellt. Ja, und das war es im Prinzip schon, wenn wir jetzt mal hier den Abspielkopf laufen lassen, dann sehen wir, wie der Flieger hier landet. Der größte Unterschied ist, dass wir keinen Bewegungspfad sehen, und das ist natürlich essenziell. Der Bewegungspfad ist natürlich super wichtig, weil damit können wir sind Flieger hier in einer Kurve abfallen lassen und nicht in einer linearen Bewegung. Die Möglichkeit haben wir an der Stelle jetzt nicht, das ist in Animate bzw. hier in dem klassischen Tween deutlich komplizierter als im Bewegungs-Tween und den Vorgang möchte ich jetzt auch noch gerade zeigen. Damit ich also jetzt einen Pfad habe, benötige ich eine neue Ebene. In dieser neuen Ebene nehme ich mir jetzt das Linienwerkzeug und damit erzeuge ich mir jetzt den Pfad. Ich zeichne also den Pfad, den das Flugzeug hier zurücklegen soll. So, also das soll jetzt mein Pfad sein, okay. Das ist jetzt in dieser Ebene, die Ebene muss sich darüber befinden. Der nächste Schritt ist, dass ich auf die darüberliegende Ebene einen Rechtsklick mache oder alternativ auch hier einen Doppelklick drauf mache und dann gehe ich hier in den Ebeneneigenschaften auf Führungsebene. Daraufhin sehen wir, dass diese Ebene hier so ein kleines Hämmerchen bekommen hat. Die darunterliegende Ebene, die fasse ich jetzt an und ziehe sie auf die darüberliegende und dann sehen wir, dass sich das Icon geändert hat, das soll jetzt aussehen wie so ein Pfad und ja jetzt haben wir auch das Ganze umgewandelt in einen Pfad und was wir sehen ist dieser Pfad hier, der allerdings noch nicht funktioniert, das werden wir gleich sehen. Wenn ich den Pfad jetzt einfach mal ein bisschen verändere, also, ich mache es jetzt mal ganz extrem, außerdem färbe ich den Pfad ein. Man kann es mit dem Grün vielleicht nicht ganz so gut sehen. Ich mache einen Doppelklick noch mal hier auf diesen Bereich, dann kann ich mir hier einen anderen Farbton auswählen. Ich nehme jetzt mal Rot das ist, denke ich mal, auffällig genug. So, wir sehen also jetzt den Pfad hier etwas deutlicher. Wenn ich den Abspielkopf bewege, sehen wir, das Flugzeug folgt dem Pfad ja gar nicht. Okay, was müssen wir machen? Ganz wichtig ist jetzt, darauf zu achten, dass das Flugzeug bzw. hier dieser Mittelpunkt, der Ankerpunkt des Flugzeugs, genau auf der Linie sitzt. D.h., entweder ich schiebe jetzt die Linie Richtung Flugzeug oder ich schiebe das Flugzeug hier auf die Linie. Hier am Anfang sieht es auch ganz gut aus, das berührt sich, am Ende höchstwahrscheinlich nicht. Wenn ich hier ans Ende gehe, dann sehen wir, aha, da haben wir keinen Kontakt, wir müssen also jetzt das Flugzeug hier auf die Linie setzen und jetzt funktioniert es immer noch nicht. Also, noch mal genau hingucken, irgendwo fehlt es wahrscheinlich nur um ein paar Pixel. So, noch ein Stückchen an diese Stelle und jetzt gucken wir uns das noch mal, aha, jetzt hat es funktioniert. Also, wir sehen, es ist schon deutlich komplizierter. Wir haben sehr viel mehr Schritte durchzuführen und das Potenzial, dass Fehler entstehen, ist halt recht hoch. Gut, jetzt müssten wir das Ganze anpassen. Ich verschiebe also diesen Pfad vielleicht mal so, jetzt sieht das schon ... Nee, jetzt passt es schon wieder nicht. Das ist wirklich ärgerlich, weil man muss wirklich bei dem Pfad jedes Mal aufpassen, wenn man irgendeine Kleinigkeit gemacht hat, dass es noch passt. Hier das Flugzeug ein Stückchen nach oben, jetzt passt wahrscheinlich wieder. Ja, jetzt geht es. Der klassische Bewegungspfad ist also deutlich komplizierter, sehr viel zeitaufwändiger und es passieren sehr schnell Fehler, wie man bei mir jetzt schon gesehen hat. So, jetzt habe ich das Flugzeug ein bisschen gedreht, okay, dass es jetzt so runter kommt. Ja, das sieht eigentlich ganz okay aus. Könnten ein bisschen was anpassen, aber jedes Anpassen sorgt wieder dafür, dass sich irgendwas verschiebt, also, wenn ich jetzt den Pfad nehme, weil ich will das Flugzeug ein bisschen weiter nach oben haben, dann verschiebe ich den, ja, und dann muss ich jetzt aber auch das Flugzeug ebenfalls verschieben, sowohl am Anfang als auch am Ende. Am Anfang passt es noch, von daher hat das jetzt funktioniert; manchmal funktioniert es, manchmal nicht. Jetzt sehen wir, es hat funktioniert. Ja, wir haben also gesehen, der klassische Tween ist deutlich komplizierter und vor allem in dem Moment, wo es um Pfade geht, sehr viel komplexer, zeitaufwändiger und fehleranfälliger.