Animieren Sie eine Karikatur mit Motion Tweens

In diesem Tutorial werden wir sehen, wie wir eine Karikatur erstellen können, sie in verschiedene Ebenen aufteilen und dann die Teile richtig als Grafiksymbole anordnen. Zum Schluss schauen wir uns an, wie einfach wir die Karikatur mit Bewegungs-Tweens problemlos animieren können. Dies ist ein langwieriges Tutorial, also fangen wir an!


Endergebnis

Werfen wir einen kurzen Blick auf den Effekt, den wir mit diesem Tut erreichen wollen:

Schritt 1:

Beginnen Sie mit dem Karikaturentwurf. Ich habe eine sehr einfache Karikatur entworfen, obwohl ich sie immer noch stilisiert habe. Der beste Weg zum Brainstorming ist das Kritzeln. Ich habe eine grobe Skizze angefertigt und das Bild gescannt.

Schritt 2:

Öffnen Sie jetzt Flash und beginnen Sie eine neue Flash-Datei. Machen Sie die Bühnengröße: 720px X 576px, Bildrate: 25 fps und Hintergrundfarbe: Weiß. Diese Einstellungen sind so, weil wir die Animation auf Broadcast-Ebene erstellen.

Schritt 3:

Importieren Sie das gescannte Bild in die Standardebene, indem Sie auf Datei> Importieren> In Bühne importieren klicken.

Schritt 4:

Skalieren Sie nun das Bild an die Bühne. Benennen Sie die Ebene, die das Bild enthält, "Ref-Bild" und sperren Sie es.

Schritt 5:

Erstelle eine neue Ebene. Zeichnen Sie die Form der Karikatur Stück für Stück und folgen Sie dem Ref-Bild darunter. Wenn Sie möchten, können Sie Ihre Zeichnung weiter verschönern und stilisieren, mehr als die grobe Skizze.

Schritt 6:

Zeichne jeden Teil der Karikatur auf eine andere Ebene und benenne sie weiter. Wenn Sie Körperteile in separaten Ebenen zeichnen, können Sie durch Animieren einzelner Teile detailliertere Animationen erstellen. Wenn Sie sie richtig benennen, können Sie die gewünschte Ebene leichter finden. Es ist auch sehr wichtig für Projekte, bei denen viele Leute mit derselben Datei arbeiten.

Schritt 7:

Nachdem man Gesicht und Oberkörper gezeichnet hat, scheint es, als würde dieser ganze Teil als ein einziger Körperteil wirken (natürlich! Wie sollte sich ein dicker Mann sonst bewegen?). Wählen Sie nun in der Timeline den Frame der oberen Ebene aus, halten Sie die Taste "Shift" gedrückt und wählen Sie den Frame in der unteren Ebene aus. Dabei wählen Sie alle Bilder aller Ebenen aus. Klicken Sie nun mit der rechten Maustaste auf den ausgewählten Bereich der Zeitleiste. Viele Optionen werden angezeigt. Wählen Sie "Frames kopieren"..

Schritt 8:

Drücken Sie nun "Strg + F8" oder gehen Sie zu Einfügen> Neues Symbol erstellen. Dadurch wird ein Dialogfeld geöffnet. Geben Sie als Name "body n face" ein und wählen Sie den Symboltyp als Grafik aus. Klicken Sie jetzt auf OK.

Schritt 9:

Ein Symbol wird in der Bibliothek angezeigt und sofort verschiebt sich die Timeline-Ansicht in das leere Grafiksymbol anstelle der gesamten Szene. Klicken Sie erneut mit der rechten Maustaste auf das erste Bild der leeren Ebene und wählen Sie "Rahmen einfügen" aus den Optionen. Alle kopierten Rahmen werden innerhalb des Symbols angezeigt und behalten ihre Layer-Reihenfolge und ihre Layernamen bei.

Schritt 10:

Kehren Sie nun zur Szenenansicht zurück, indem Sie in der Bearbeitungsleiste auf "Szene 1" klicken.

Schritt 11:

Erstellen Sie eine neue Ebene über allen vorhandenen Ebenen, und ziehen Sie das Symbol dann auf diese Ebene. Sehen Sie sich jetzt die Ebene im Gliederungsmodus an. Richten Sie das Symbol an der gleichen Position aus, wie es durch die anderen Ebenen angezeigt wird.

Schritt 12:

Benennen Sie die Ebene in Übereinstimmung mit dem Symbolnamen um und löschen Sie die anderen Ebenen, die bereits in das Symbol kopiert wurden. Auf diese Weise häufen sich die Ebenen in der Zeitleiste nicht und es wird eine richtige Hierarchie erstellt.

Schritt 13:

Zeichnen Sie die Hand anhand des Bildes. Machen Sie es zunächst in zwei Schichten. Machen Sie in einem die Hand bis zum Handgelenk. Machen Sie in der zweiten Schicht den Rest der Hand (geeignetes Teil). Stellen Sie nur sicher, dass sich diese beiden Ebenen überlappen. Dies hilft beim Animieren dieser.

Schritt 14:

Denken Sie jetzt daran, wie sich unser Arm bewegt, während wir gehen. es beugt sich am Ellenbogen. Also müssen wir auch den Handteil vom Ellbogen brechen. Erstellen Sie eine neue Ebene. Klicken Sie mit der rechten Maustaste auf den Rahmen, den Sie gezeichnet haben. Kopieren Sie diesen Rahmen. Erstellen Sie eine neue Ebene und fügen Sie den Rahmen auf dieser neuen Ebene ein.

Schritt 15:

Jetzt sperren Sie alle Ebenen bis auf die obersten. Bewegen Sie den Mauszeiger von der unteren Seite des Bildschirms und wählen Sie den unteren Teil der Form aus (stellen Sie sicher, dass die Auswahl etwas weniger als der gedachte Ellbogenbereich abdeckt). Dieser zusätzliche Bereich dient zum Überlappen. Drücken Sie nun "Löschen" und löschen Sie die Auswahl. Der verbleibende Teil bildet die Oberhand.

Schritt 16:

Wählen Sie die Form aus und wählen Sie dann Modifizieren> In Symbol konvertieren oder drücken Sie "F8". Geben Sie im Dialogfeld "up hand" als Name ein und wählen Sie den Symboltyp als Grafik. Klicken Sie jetzt auf OK. Dies schafft die Oberhand. Das Umwandeln von Formen in Symbole ist äußerst wichtig, um sie in Motion-Tween verwenden zu können. Benennen Sie die Ebene genauso wie das Symbol um, doppelklicken Sie dann auf das Symbol, gehen Sie hinein und Sie finden die Ebene darin. Es hat den Standardnamen "Layer 1", benennen Sie ihn also um.

Schritt 17:

Sperren Sie die Ebene "Nach oben" und wechseln Sie in den Umrissmodus. Entsperre die darunter liegende Ebene. Ziehen Sie Ihren Mauszeiger von der oberen Seite des Bildschirms, und wählen Sie den oberen Teil der Form aus. Achten Sie darauf, dass die Auswahl einen kleinen Bereich der oberen Ebene abdeckt, der als Umriss sichtbar ist. Löschen Sie die Auswahl erneut.

Schritt 18:

Wandeln Sie die Form in ein Grafiksymbol um und nennen Sie sie "low hand". Npw führt alle Umbenennungsprozesse wie zuvor durch. Machen Sie es sich zur Gewohnheit, Symbole und Ebenen entsprechend umzubenennen. Wenn Sie fertig sind, kehren Sie in die normale Ansicht zurück.

Schritt 19:

Sperren Sie andere Ebenen und machen Sie dann das Handgelenkstück zu einem Symbol. Nennen Sie es "Handgelenk".

Schritt 20:

Erstellen Sie eine neue Ebene und zeichnen Sie den Beinbereich (nicht den Schuh) mit den Körper- und Schuhbereichen.

Schritt 21:

Ziehen Sie den Schuh in einer anderen neuen Ebene.

Schritt 22:

Teilen Sie die Beinschicht in zwei Teile, wobei Sie den Kniebereich überlappen, wie Sie es für die Hand getan haben. Wandeln Sie alle Teile in Symbole um und nennen Sie sie "Low Leg" und "Up Leg". Benennen Sie auch die Ebenen um.

Schritt 23:

Teilen Sie den Schuh, indem Sie ihn vertikal in zwei Teile teilen, einen in Richtung Ferse, einen in Richtung Zehe. Machen Sie auch Symbole. Nennen Sie sie "Schuhferse" und "Schuhspitze".

Schritt 24:

Ordnen Sie nun die Schichten an, indem Sie die Bein- und Schuhschichten unter die "body n face" -Schicht ziehen. Aktivieren Sie die Sichtbarkeit für alle Ebenen. Sehen? Ihre Karikatur ist fertig, obwohl er etwas unverhältnismäßig aussieht.

Schritt 25:

Dies ist der letzte Punkt, an dem Sie Ihr Design noch ändern können. Drücken Sie es etwas horizontal und skalieren Sie den Schuh und die Beine, wie Sie möchten. Wenn Sie fertig sind, klicken Sie mit der rechten Maustaste auf die Ebene "ref image" und wählen Sie "guide" aus. "Bildreferenz" wird nicht mehr gerendert, wenn Sie den Film in der Vorschau anzeigen oder exportieren. Sie können die Sichtbarkeit sogar ausschalten, wenn Sie möchten.

Schritt 26:

Jetzt ist es Zeit, die Drehpunkte zu positionieren. Wir wissen, dass sich Hände, Beine und Körper um einige feste Gelenke in unserem Skelett bewegen. Diese Punkte werden von unseren Schultern, Knien, Ellbogen, Hüften und Nacken gefunden. Daher müssen Sie auch in dieser Karikatur diese Gelenkpositionen neu erstellen, um der Karikatur eine natürliche Bewegung zu verleihen.

Schritt 27:

Wählen Sie das Transformationswerkzeug aus, und wählen Sie nacheinander jedes Symbol in der Szenenansicht aus. Die voreingestellte Schwenkposition ist in der Mitte. Bewegen Sie den Schwenkpunkt (den Kreis) in den richtigen Schwenkbereich der Karikatur. Anleitungen finden Sie in der Abbildung unten.

Schritt 28:

Bevor Sie mit der Animation beginnen, müssen Sie noch etwas verschachteln. Es scheint, dass es zu viele Ebenen gibt, die animiert werden können, und es wird schwierig sein, sie auf einmal zu handhaben. Wählen Sie "Handgelenk", "Niedrige Hand" und "Hoch" aus (Strg + Klick), klicken Sie dann mit der rechten Maustaste auf den Rahmen und dann auf "Rahmen kopieren". Erstellen Sie ein neues Symbol, nennen Sie es "rechte Hand" und legen Sie die Ebenen in dieses Symbol. Erstellen Sie eine neue Ebene, platzieren Sie dieses neue Symbol richtig und benennen Sie die Ebene entsprechend um. Löschen Sie die alten Ebenen.

Schritt 29:

Wiederholen Sie den Vorgang, indem Sie dieses Mal ein Symbol "rechtes Bein" machen und "aufrechtes Bein" und "niedriges Bein" kombinieren. Die Schichten "Schuhferse" und "Schuhspitze" sollten ebenfalls in dieses Symbol eingefügt werden, überspringen Sie es jedoch vorerst. Sie werden feststellen, dass ein Fehler aufgetreten ist…

Schritt 30:

Jetzt hast du den Fehler gefunden! Kein Problem. Wählen Sie die Ebenen aus und wählen Sie "Rahmen kopieren". Doppelklicken Sie in der Bibliothek auf das Symbol "rechtes Bein", um die Symbolansicht anzuzeigen. Erstellen Sie oben eine neue Ebene, klicken Sie mit der rechten Maustaste auf den Rahmen und klicken Sie dann auf "Rahmen einfügen". Das ist es! Der Fehler wurde behoben, was beweist, dass diese Anordnung jederzeit leicht geändert werden kann. Löschen Sie schließlich die zusätzlichen Schuhebenen aus der Szenenansicht.

Schritt 31:

Sie haben ein rechtes Bein, brauchen aber auch ein linkes Bein. Wählen Sie das Symbol "rechtes Bein", klicken Sie mit der rechten Maustaste, und wählen Sie dann "Duplizieren" aus. Wenn das Dialogfeld angezeigt wird, benennen Sie das Duplikat "linkes Bein"..

Schritt 32:

Erstellen Sie eine Ebene unter "rechtes Bein", ziehen Sie das neue Symbol per Drag & Drop und platzieren Sie es richtig.

Schritt 33:

Erstellen Sie auf ähnliche Weise die linke Hand der Karikatur und platzieren Sie die Ebene unten. Visuell wird die linke Hand hinter allem stehen. Um das Symbol genau zu platzieren, wechseln Sie die Sichtbarkeit der Ebene in den Gliederungsmodus.

Schritt 34:

Bevor Sie mit der Animation beginnen, müssen Sie die großen Posen des Gehens berücksichtigen. Siehe die Abbildung unten. Das sind die Schlüsselpositionen, auch "Extreme" genannt. Zuerst müssen Sie mit diesen Posen Keyframes erstellen, dann wird durch Verfeinern der Zwischenframes das Ergebnis erzielt.

Schritt 35:

Sie benötigen eine Bezugsebene, um zu sehen, ob der Fuß den Boden richtig berührt. Nehmen Sie also eine neue Ebene unter allen Ebenen. Zeichnen Sie eine horizontale Linie und platzieren Sie diese direkt unter dem Fuß. Sperren Sie die Ebene.

Schritt 36:

Doppelklicken Sie auf das rechte Bein der Karikatur, um in das Symbol "rechtes Bein" zu gelangen. Positionieren Sie nun das Bein, indem Sie die Beinteile drehen und bewegen (nicht skalieren). Machen Sie es wie das Bild unten aussehen. Noch ein Tipp: Wenn sich unser rechtes Bein nach vorne bewegt, kommt unsere rechte Hand nach hinten.

Schritt 37:

Kehren Sie nun zur Szene zurück und geben Sie das Symbol "linkes Bein" ein. Positionieren Sie das Bein wie gewünscht.

Schritt 38:

Ebenso die rechte Hand darstellen.

Schritt 39:

Pose die linke Hand. Da dies alles im Hintergrund ist, müssen Sie in den Gliederungsmodus wechseln.

Schritt 40:

Die erste Schlüsselposition ist fertig. Sie müssen drei weitere Schlüsselstellungen machen, um den Laufzyklus abzuschließen. Lassen Sie uns entscheiden, dass der Abstand (Zeitabstand) zwischen jeweils zwei Tastenpositionen 8 Frames beträgt. Die nächste Schlüsselposition sollte daher bei Bild 9 erscheinen. Ziehen Sie alle Ebenen bei Bild 9 mit Drag-Select. Drücken Sie anschließend "F6", um ein Schlüsselbild für "rechtes Bein" zu erstellen..

Schritt 41:

Positionieren Sie nun das "rechte Bein" für die zweite Schlüsselpose. Stellen Sie dann alle anderen Teile nacheinander auf, genau wie bei der ersten Schlüsselpose. Wenn Sie fertig sind, sind Sie mit der zweiten Schlüsselpose fertig!

Schritt 42:

Sie können die neue Schlüsselposition nicht in der Szenenansicht sehen, da die (übergeordneten) Hauptebenen nur einen Frame haben. Lassen Sie es uns bis Frame 32 erweitern. Die Logik dahinter ist klar; acht Frames für jede Pose (4 x 8 = 32). Dann sehen Sie auf Bild 9 die Pose. Ziehen Sie alle Keyframes in Bild 32 und wählen Sie "F5". Dadurch wird ein Frame (kein Keyframe) erstellt und die Animation auf Frame 32 erweitert.

Schritt 43:

Positionieren Sie die Karikatur auf Bild 17 und Bild 25. Erstellen Sie Schlüsselbilder bei Bild 33, kopieren Sie dann die Bilder aus Bild 1 und fügen Sie sie dort ein. Wir möchten, dass die Animation geloopt wird, und nach Bild 32 sollte Bild 1 wieder angezeigt werden. Das ist es. Ihre Tastaturanimation ist fertig. Überzeugen Sie sich selbst, indem Sie "Strg + Eingabetaste" drücken..

Schritt 44:

Die Animation ist überhaupt nicht glatt. Wir brauchen eine reibungslose Animation. Geben Sie also erneut jedes Hauptsymbol ein, an dem Sie Keyframes platziert und animiert haben. Ziehen Sie alle Bilder durch Ziehen an. Öffnen Sie die Registerkarte "Eigenschaften" und ändern Sie den Tween-Typ von "keine" in "Bewegung". Alle Bilder werden hellviolett und die Pfeile zeigen von Keyframe zu Keyframe. Tun Sie dies für alle Teile.

Schritt 45:

Drücken Sie "Strg + Eingabetaste" und überprüfen Sie die Vorschau. Jetzt können Sie sehen, dass die Karikatur reibungslos läuft, aber es gibt viele Fehler. Die Fugen folgen nicht aufeinander, so dass jedes bewegliche Teil nahezu unabhängig voneinander gleitet. Wohlgemerkt, sie sind nicht weit von ihren richtigen Positionen entfernt. Jetzt müssen wir diese Dinge Schritt für Schritt beheben.

Schritt 46:

Lass uns das dann klären. Dieser Vorgang wird als "Dazwischen" bezeichnet. Setzen Sie ein Keyframe zwischen zwei Keyframes, insbesondere wenn die Teile zu weit voneinander entfernt sind. Manchmal müssen Sie nie zwischendurch verwenden, da sich die Teile genau so bewegen, wie Sie es möchten. In einigen Fällen müssen Sie möglicherweise fast jeden Frame anpassen.

Schauen wir uns das Tween des "rechten Beins" an. Bei Frame 5 sind die Teile wirklich weit voneinander entfernt. Drücken Sie "F6", um alle Bilder auszuwählen. Jetzt weiter zwicken, bis die Pose so ist, wie sie sein sollte. Stellen Sie sicher, dass sich die Fugen gut überlappen, sodass blanke Kanten nicht sichtbar sind.

Schritt 47:

Scrubben Sie durch die Animation. Es gibt immer noch viele Rahmen, bei denen die Kanten nicht miteinander verbunden sind. Erstellen Sie Keyframes, optimieren Sie diese und korrigieren Sie sie. Tun Sie dies für jeden Teil. Dies kann einige Zeit in Anspruch nehmen und Geduld ist erforderlich. Wenn Sie fertig sind, zeigen Sie die Animation in der Vorschau an.

Schritt 48:

Jetzt sind die Hand- und Beinbewegungen korrekt, aber der Körper wirkt steif. Sie müssen dem Körper auch etwas Bewegung geben und dasselbe gilt für die Hände. Andernfalls ist die Schulter nicht vorhanden. Wählen Sie die Ebenen "body n face" und "right hand" aus, kopieren Sie die Rahmen, erstellen Sie ein neues Symbol "body movement" und fügen Sie diese ein. Setzen Sie nun das Ergebnis anstelle der beiden Ebenen ein, wie Sie es schon oft getan haben. Wir schließen "linke Hand" aus, da diese Ebene selten sichtbar ist.

Schritt 49:

Erstellen Sie Keyframes in denselben Frames wie die Tastenfelder. Platzieren Sie den Drehpunkt dieses neuen Symbols an derselben Stelle wie beim Torso. Bevor Sie mit der Animation beginnen, denken Sie daran, dass sich der Oberkörper auch nach vorne neigt, wenn wir unsere Beine nach vorne strecken. Wenn wir ein Bein vom Boden abheben, neigt sich unser Körper nach hinten. So balancieren wir beim Gehen.

Schritt 50:

Positionieren Sie den Rumpf durch Drehen des Symbols und fügen Sie den Bildern dann Bewegungs-Tween hinzu. Noch ein Tipp: Sie können die Transformationsregisterkarte verwenden, um den Rotationswert anzuzeigen, einzustellen und zu ändern.

Schritt 51:

Überprüfen Sie ggf. die Vorschau- und Optimierungswerte.

Schritt 52:

Zur weiteren Feinabstimmung der Animation strecken Sie den Torso etwas nach unten und bewegen Sie ihn in anderen Posen (Beinhaltung) etwas nach oben. Dadurch wird der Lauf dynamischer. Überprüfen Sie die Vorschau. Ihre Endlos-Animation ist fertig.

Schritt 53:

Wählen Sie nun alle Karikaturebenen aus, machen Sie sie zu einem einzelnen Symbol und daher auch zu einer Ebene. Nennen Sie sie "Mr. Smart".

Schritt 54:

Blenden Sie die Ebene "Roadline" aus und machen Sie sie zu einem Leitfaden. Entwerfen Sie einen Hintergrund, um die Szene attraktiver zu gestalten. Ich habe in meiner Animationsdatei einen einfachen Hintergrund erstellt.

Schritt 55:

Derzeit läuft Mr. Smart, bewegt sich aber nicht von einem Ort zum anderen. Auch das geht problemlos. Bewegen und positionieren Sie die Karikatur im ersten Frame nach links außerhalb der Bühne. Erweitern Sie die Animationsdauer auf Bild 96. Drücken Sie bei Bild 96 "F6" und machen Sie es zu einem Keyframe. Bewegen Sie die Karikatur in diesem Rahmen horizontal nach rechts und wieder von der Bühne. Fügen Sie der Ebene ein Bewegungs-Tween hinzu.

Schritt 56:

Überprüfen Sie die Vorschau der endgültigen Animation!

Vielen Dank, dass Sie diesem Tutorial gefolgt sind. Ich hoffe, Sie haben etwas Wertvolles gelernt!