Share
In Teil 1 dieses Tutorials werden Flash-Neulinge durch die grundlegenden Prinzipien des Zeichnens und Animierens von Vektoren in Flash geführt. Wir zeichnen und animieren einen springenden Wasserball. Vorkenntnisse zu Flash sind natürlich hilfreich, aber die folgenden Techniken sollten für jeden und für die meisten Softwareversionen zugänglich sein. Teil 2 kommt bald…
Unten ist die letzte Animation, auf die wir hinarbeiten werden. Möchten Sie auf die vollständigen Vector Source-Dateien und herunterladbaren Kopien jedes Tutorials zugreifen, einschließlich dieses Tutorials? Nehmen Sie an VECTORTUTS PLUS für nur 9 / Monat teil.
Beginnen wir mit dem Öffnen eines neuen Dokuments (Datei> Neu…). Nur ein Flash-Datei-Dokument (ActionScript 2.0) ist in Ordnung. Die Actionscript-Version ist nicht relevant, da wir keine verwenden.
Verwenden Sie den Eigenschafteninspektor am unteren Bildschirmrand, um die Dokumenteigenschaften einzugeben. Klicken Sie auf die Bemaßungsschaltfläche. Geben Sie Ihrem Dokument zunächst einen Titel, und geben Sie dann der Bühne (dem Bereich Ihres Dokuments, der bei Veröffentlichung sichtbar wird) eine Größe von 600 x 400 Pixel. Die Hintergrundfarbe bleibt weiß, aber ändern Sie die Framerate auf 21 fps (Frames Per Second). 21 fps sorgen für eine schnelle, gleichmäßige Animationsrate.
Organisation ist der Schlüssel, wenn Sie mit Flash arbeiten. Bevor wir also mit dem Zeichnen des Balles beginnen, nennen wir die Ebene, auf der sie sitzen soll. Doppelklicken Sie auf Layer 1 und nennen Sie es "Ball".
Wählen Sie das ovale Werkzeug aus, definieren Sie einen Strich und eine Füllfarbe, wie z. B. die angezeigten. Zeichnen Sie anschließend einen gleichförmigen Kreis (indem Sie die Umschalttaste gedrückt halten und die Maus ziehen). Verwenden Sie außerdem den Eigenschafteninspektor, um dem Strich ein Gewicht von 3px zu verleihen.
Durch das Erstellen von Symbolen in Flash können Sie mehrere Instanzen derselben Objekte in einer Datei verwenden. Auf alle Symbole kann über die Bibliothekspalette zugegriffen werden (Fenster> Bibliothek). Durch das Ändern eines Symbols werden alle Instanzen dieses Symbols in der Datei geändert.
Wir werden aus unserem Kreis ein Symbol machen, das zu unserem Ball wird. Wählen Sie den gesamten Kreis aus und drücken Sie F8. Nennen Sie es "mc_ball" und wählen Sie aus, dass es in ein Movieclip-Symbol umgewandelt wird. Klicken Sie anschließend auf OK.
Fügen Sie eine zweite Ebene unter der Ebene "Ball" hinzu und nennen Sie sie "Shadow". Zeichne innerhalb des ersten Frames dieser Ebene eine Ellipse, um einen Schatten unter dem Ball zu bilden. Entferne den Strich und färbe ihn mit # E2E0E5 ein. Verwandle es in ein Symbol wie zuvor mit dem Ball, und nenne es "mc_shadow".
Positionieren Sie die beiden Symbole in ungefähr der richtigen Höhe, um den Ball auf dem Boden zu zeigen. Aktivieren Sie in der Palette Ausrichten (Fenster> Ausrichten) die Option In Bühne und zentrieren Sie die beiden Symbole horizontal.
Wir haben unsere Symbole in ihrer grundlegendsten Form erstellt, jetzt wollen wir sie animieren. Halten Sie die Umschalttaste gedrückt und klicken Sie in der Timeline auf Bild 20 beider Ebenen. Gehen Sie zu Modifizieren> Timeline> In Keyframes konvertieren oder drücken Sie F6, um diese Frames in Keyframes umzuwandeln. Keyframes repräsentieren Punkte entlang der Zeitleiste, an denen etwas passiert. Dieser Punkt auf der Timeline ist das Ende der Animation. Mit anderen Worten, der Ball ist vom Boden aufgesprungen, hat seinen Scheitelpunkt erreicht und ist in diese Ausgangsposition zurückgekehrt. Dasselbe gilt für unseren Schatten: Er wird verblasst sein, wenn der Ball bei Frame 20 in diesen Ausgangszustand zurückkehrt.
Fügen wir nun den Punkt hinzu, an dem der Ball am höchsten ist. Wählen Sie Bild 10 auf beiden Ebenen aus und drücken Sie F6, um sie in Keyframes umzuwandeln.
Bewegen Sie den Slider immer noch in Frame 10, und bewegen Sie das Ballsymbol vertikal nach oben bis zu einem Punkt auf der Bühne. Wählen Sie das Free Transform Tool aus, und erweitern Sie die Instanz des Symbols "shadow_main".
Wenn der Schatten ausgewählt ist, wechseln Sie im Eigenschafteninspektor zu Farbe und ändern ihn in einen Alpha-Wert von 30%..
Beim Tweening werden alle Stufen automatisch von Flash generiert zwischen ein Objekt oder formt zwei Zustände.
Wir werden die Bilder zwischen dem ersten Bild und der Hälfte der Animation in Bild 10 wechseln. Wählen Sie auf beiden Ebenen ein Bild zwischen 1 und 10 aus, und verweisen Sie noch einmal auf den Eigenschafteninspektor. Wählen Sie "Bewegung" aus der Tween-Auswahl aus, und die resultierenden Frames werden violett.
Bewegen Sie den Slider mit der Maus entlang der Timeline, und Sie sehen, wie der Ball und der Schatten schön animiert werden. Die Geschwindigkeit dieser Bewegung ist jedoch völlig gleichförmig. Der Ball muss verlangsamt werden, wenn er seinen Scheitelpunkt erreicht, und wir können dies mit tun Leichtigkeit (ha ha).
Wenn Sie ein Bild jeder Ebene ausgewählt haben (innerhalb des getweenten Bereichs), lesen Sie erneut den Eigenschafteninspektor. Ändern Sie das Tweening in Ease out mit einem Wert von 100. Dies wird unseren Kletterball verlangsamen.
Wiederholen Sie nach erfolgreicher Animation des Aufstiegs des Balls die Tweening-Schritte für die Bilder 11 - 20. Diesmal erleichtern Sie das Bewegungs-Tween im -100, wodurch der Ball beschleunigt, wenn er sich dem Boden nähert.
Drücken Sie die Befehlstaste + Eingabetaste, um Ihren animierten Ball so weit anzuzeigen. Es sollte wie die unten gezeigte Animation aussehen.
Angenommen, unser Ball ist etwas flexibler als ein Diamant, ändert sich die Form beim Auftreffen auf den Boden leicht. Fügen wir noch ein letztes Keyframe hinzu, bei dem der Ball für einen Moment flach wird.
Wählen Sie Bild 21 auf beiden Ebenen aus und drücken Sie F6, um sie in Keyframes umzuwandeln. Dann benutze das Free Transform Tool um quetschen das "Ball" -Symbol vom oberen Rand (halten Sie Alt gedrückt, um den unteren Rand dort zu behalten, wo er ist).
Unsere Sprungbewegung ist abgeschlossen. Jetzt müssen wir unserem Ball weitere Details und Bewegung hinzufügen. Doppelklicken Sie auf das "Ball" -Symbol in einem der Keyframes, um die Zeitleiste dieses Symbols aufzurufen. Sie sehen Ihren aktuellen Standort unterhalb der Timeline - Sie sollten sich in "Szene 1, mc_ball" befinden.
Klicken Sie auf das Symbol zum Einfügen einer Ebene, um eine zweite Ebene über der aktuellen Ebene zu erstellen. Kopieren Sie den Kreis und fügen Sie ihn an Ort und Stelle von Ebene 1 in Ebene 2 (Befehl + C, Befehl + Umschalt + V) ein. Nennen Sie nun die unterste Ebene "Ball Spinning" und die oberste "Shade". Zum Schluss sperren Sie die Ebene "Ball Spinning".
Zeichnen Sie irgendwo auf der Bühne einen großen Kreis, um sicherzustellen, dass er eine andere Farbe hat als der vorhandene Kreis.
Positionieren Sie den größeren Kreis so, dass das, was noch vom gelben Kreis gesehen werden kann, die richtige Form für die Schattierung des Balls ist. Geben Sie alle Objekte frei.
Wählen Sie nun erneut den größeren Kreis und drücken Sie die Entf-Taste. Indem Sie nicht gruppierte oder nicht symbolisierte Formulare übereinander legen, kombinieren Sie sie auf dieselbe Weise, wie Sie es in Bildanwendungen mit Pixeln tun. Wenn Sie jetzt den größeren Kreis entfernen, bleibt nur noch die kleine Mondsichel übrig, die zur Schattierung der Kugel wird. Wähle und entferne den verbleibenden Strich und färbe den Halbmond # E2E0E5 ein.
Da dieser Halbmond auf unserem Ball als Schattierung wirkt, wäre es schön, ihm eine Multiply-Opazität zu verleihen. Dazu müssen wir es in ein Movieclip-Symbol konvertieren (Sie sollten sich jetzt an diese Aktion gewöhnt haben). Drücken Sie F8 und nennen Sie es "mc_ball_shading" (diese Namen werden zwielichtig). Weitere Informationen finden Sie im Eigenschafteninspektor und ändern Sie die Mischung in Multiplizieren. Perfekt!
Drücken Sie erneut die Befehlstaste + Eingabetaste, um Ihren animierten Ball so weit anzuzeigen. Es sollte wie die Animation unten aussehen.
Nachdem Sie sich mit der Schattierung befasst haben, können Sie jetzt die Ebene "Shade" sperren (möglicherweise sogar unsichtbar machen, um das Arbeiten zu erleichtern) und "Ball Spinning" freischalten. Wir werden ein Muster hinzufügen, um unserem Kreis den Strandball-Look zu verleihen. Verwenden Sie das Oval-Werkzeug, um ein großes Oval auf der Bühne zu zeichnen. Es benötigt einen Strich von 1px und #FFFFFF, jedoch keine Füllfarbe.
Platzieren Sie den Strich wie in der Abbildung unten und lassen Sie ihn los. Wählen Sie nun den Teil des Strichs aus, der sich außerhalb des Balls befindet, indem Sie einfach darauf klicken. Bei der früheren Halbierung der Schattierung wurden alle Vektoren auf dieser Ebene miteinander verbunden und bilden separate Bereiche. Löschen Sie den äußeren Teil des Strichs.
Zeichne ein paar andere Ovale und platziere sie oben auf dem Kreis, so dass sie oben miteinander verbunden sind. Entfernen Sie dann den Überschuss von außerhalb des Kreises. Die Ovale müssen nicht alle gleich groß oder gleich groß sein. Versuchen Sie einfach, etwas wie das Bild unten nachzubilden. Was Sie erstellt haben, ist eine Reihe von Segmenten, die jetzt einzeln gefärbt werden können.
Alternate Segmente mit # EA512D ausmalen und alle weißen Striche vom Ball löschen. Drücken Sie die Befehlstaste + Eingabetaste, um anzuzeigen, was Sie bisher gemacht haben. Es sollte wie die Animation unten aussehen.
Fügen wir der Animation eine letzte Bewegungsdimension hinzu. Der Ball wird langsam gedreht, wenn er springt. Dazu benötigen wir zunächst den Ball auf der Ebene "Ball Spinning", um in ein Symbol umgewandelt zu werden. Klicken Sie auf den ersten Keyframe der Ebene, um sicherzustellen, dass alles darauf ausgewählt ist. Drücken Sie nun F8 und nennen Sie dieses Movieclip-Symbol "mc_ball_base". Sie werden sehen, dass es unter den anderen Symbolen in der Bibliothekspalette hinzugefügt wurde (Fenster> Bibliothek)..
Wählen Sie Bild 32 der Timeline auf der Ebene "Spinning Ball" aus und drücken Sie F6, um einen neuen Keyframe zu erstellen. Wählen Sie Bild 32 der Timeline in der darüberliegenden Ebene aus und drücken Sie F5. Dadurch wird ein neuer Frame erstellt. Da sich jedoch das Symbol "Shade" nicht ändert, müssen wir dies nicht zu einem Keyframe machen. Wir müssen nur sicherstellen, dass das Symbol "Shade" vorhanden ist, wenn der Slider diesen Punkt entlang der Timeline erreicht.
Warum haben wir Rahmen 32 gewählt? Nun, wir werden unseren Ball einmal alle 32 Frames drehen lassen. Unser Ball prallt alle 20 Frames ab. Dies bedeutet, dass sich der Ball während des Abpralls in ständig unterschiedlichen Spinphasen befindet. Wenn dies noch nicht klar ist, wird es bald…
Wählen Sie irgendwo entlang der Zeitleiste auf der Ebene "Ball Spinning" einen Frame aus und lesen Sie den Eigenschaften-Inspektor. Wählen Sie das Bewegungs-Tween wie bei der Sprungbewegung aus. Diesmal wollen wir keinen Leichtigkeitswert, wir brauchen den Ball, um mit der gleichen Geschwindigkeit konstant zu drehen. Wählen Sie CW (Uhrzeigersinn) aus der Dropdown-Liste "Drehen" aus und verlassen Sie das Kontrollkästchen 1 wie oft sich der Ball während des Tweens dreht. Natürlich ist die "Shade" -Schicht nicht betroffen und die Schattierung bleibt daher auf der Balloberfläche in derselben Position.
So haben Sie es! Drücken Sie erneut Befehlstaste + Eingabetaste und prüfen Sie, ob die Bewegung wie gewünscht ist. Falls Änderungen erforderlich sind, können Sie die Anzahl der Frames in den Tweens erhöhen, die Höhe des Balls ändern, die Anzahl der Drehungen ändern usw. Dieses Tutorial gibt Ihnen einen Einblick in die Flash-Timeline und -Schichten sowie das Verhalten von Flash Vektor-Zeichenwerkzeuge, Hierarchie der Flash-Symbole und -Objekte und Bewegungs-Tweening.
Ich hoffe, dass es Ihnen gefallen hat! Teil 2 soll nächsten Monat veröffentlicht werden und wird diese Techniken erweitern und den Prozess mit einem Hauch von Illustrator verbessern.
Abonnieren Sie den VECTORTUTS RSS-Feed, um mit den neuesten Vektor-Tutorials und -Artikeln auf dem Laufenden zu bleiben.
Accentsconagua