Share
In diesem Lernprogramm werden die in Teil 1 der Illustrate and Animate a Bouncing Ball-Serie beschriebenen Techniken erweitert. Wir werden die 3D-Werkzeuge von Illustrator verwenden, um Flashs drehende Bewegung des springenden Balls zu verbessern und einen Blick auf die Arbeit zwischen den beiden Anwendungen zu werfen. Die einzelnen Schritte können auch unabhängig von Teil 1 durchgeführt werden.
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.
… Und lasst uns einfach an die subtil einfachere Animation erinnern, die wir in Teil 1 dieses Tutorials erstellt haben…
Hände hoch, wer folgte dem ersten Teil dieses Tutorials? Illustrate and Animate A Bouncing Ball: Teil 1 - Adobe Flash? Diejenigen von Ihnen, die dies getan haben, werden eine Flash-Datei haben, die hinzugefügt werden kann. Dieser zweite Teil kann auch als Einzelunterricht verfolgt werden, was ein zufriedenstellendes Endergebnis ergibt.
Zu Beginn erstellen wir einen 3D-Ball in Illustrator. Zweitens werden wir es in Illustrator animieren, und zum Schluss werden wir es für Flash fertig stellen. Beginnen wir mit dem Öffnen eines neuen Dokuments in Illustrator. Der Ball, den wir für den ersten Teil dieses Tuts verwendet haben, hat 90px x 90px gemessen. Definieren Sie daher Ihr Artboard mit den gleichen Abmessungen.
Bevor wir unser 3D-Objekt erstellen, fügen wir der Symbolpalette ein Muster hinzu, mit dem wir den fertigen Ball abbilden. Wenn Sie sich an den ersten Teil des Tut erinnern, hatte unser Ball sechs abwechselnd farbige Streifen - eine Verzierung unserer 3D-Version auf dieselbe Weise ist unkompliziert.
Erstellen Sie sechs vertikale, gleich große und voneinander beabstandete Rechtecke. Färbe sie abwechselnd mit rotem # DF3F22 und gelbem # E3CB0E. Gruppieren Sie sie, wenn Sie möchten, und ziehen Sie das gesamte Los in die Symbolpalette (Fenster> Symbole). Weisen Sie diesem neuen Symbol einen Namen wie "ball_pattern" zu, nicht dass wir andere Symbole erstellen, von denen Sie es unterscheiden müssen ...
Wir werden das 3D-Revolve-Tool verwenden, um einen Ball zu erstellen. Beginnen Sie mit dem Ellipse-Werkzeug und erstellen Sie einen Kreis mit der gleichen Größe wie die Zeichenfläche (und mit dieser ausgerichtet). Verwenden Sie das Direktauswahl-Werkzeug, um den linken Ankerpunkt zu entfernen. Stellen Sie sicher, dass es eine Füllung hat (obwohl die Farbe irrelevant ist, da wir das "ball_pattern" darauf abbilden), aber keinen Strich.
Wenn dieses Objekt ausgewählt ist, gehen Sie zu Effekte> 3D> Drehen… Vorschau prüfen. Die Standardoptionen sollten das folgende Ergebnis liefern.
Geben Sie dem Ball nun ein Muster, indem Sie im 3D-Dialogfeld "Optionen" auf "Map-Art" klicken. Eine Kugel hat nur eine Fläche, die zugeordnet werden kann. schön und einfach. Wählen Sie Ihr "ball_pattern" aus der Dropdown-Liste "Symbol" aus und aktivieren Sie "An Größe anpassen".
Die Option Schattengrafik ist hier besonders wichtig. Wenn Sie es überprüfen, erhalten Sie einen großartigen Effekt auf der Balloberfläche (siehe Abbildung unten). Die resultierenden Vektoren werden jedoch so komplex, dass es für Flash sehr schwierig ist, sie in Animationen zu rendern. Dies bedeutet nicht, dass das Schattieren Ihres Balls keine Option ist. Wenn Sie sich dafür entscheiden, können Sie die Bilder in Flash verwenden, indem Sie sie zuerst rastern. Flash hat keine Probleme damit, mit den erzeugten Bitmaps umzugehen, aber Sie verlieren natürlich die Flexibilität, mit Pfaden zu arbeiten.
Ich werde das später demonstrieren, aber für jetzt nehmen Sie einfach mein Wort und lassen Sie Shade Artwork deaktiviert! Klicken Sie auf OK, um zum Dialogfeld 3D-Optionen zurückzukehren, und stellen Sie sicher, dass die Option Oberfläche hier ebenfalls auf Keine Schattierung eingestellt ist.
Um den 3D-Vorgang (vorerst) abzuschließen, positionieren Sie Ihren Ball in einem geeigneten Winkel und klicken Sie auf OK. Denken Sie daran, dass wir es animieren, es um seine zentrale Achse zu drehen, wie unten gezeigt.
Kopiere und füge deinen 3D-Ball ein (Befehl + C, Befehl + F). Die beiden Objekte werden als separate Pfade angezeigt, wenn Sie die Ebene erweitern.
Wenn der Duplikatball ausgewählt ist, beziehen Sie sich auf die Aussehen-Palette (Fenster> Erscheinungsbild). Doppelklicken Sie auf den 3D-Effekt, um ihn zu bearbeiten.
Wenn Sie sich wieder im 3D-Dialogfeld "Optionen" befinden, müssen Sie nur eine Aufgabe ausführen und dann auf "OK" klicken. Wir müssen den Ball um 120 ° drehen. Dadurch wird der Ball an den ersten Punkt gedreht, an dem er genauso aussieht wie der Startpunkt. Es macht wenig Sinn, es um volle 360 ° zu drehen, wenn es während einer Umdrehung dreimal identisch aussieht…
Dies erfordert ein wenig Augenarbeit. Klicken und ziehen Sie eine der grünen Kanten des Positionswürfels, um den Ball um die Mittelachse zu drehen. Behalten Sie die Vorschau Ihres Balls im Auge und hören Sie mit dem Ziehen auf, wenn Sie sehen, dass sich der Ball genügend gedreht hat. Das Drahtgitter des Balles passt genau zu unserem Muster; Jedes farbige Segment unserer Kugel besteht aus zwei Längssegmenten des Drahtgitters. Dies sollte es leicht genug machen, genau zu beurteilen, wo das Ziehen beendet werden soll.
Nachdem Sie Ihre beiden 3D-Objekte fertiggestellt haben, gehen Sie zu Objekt> Überblenden> Überblendoptionen. Hier legen Sie die Animationsschritte zwischen den beiden Zuständen des Balls fest. Wählen Sie "Angegebene Schritte" und geben Sie 18 ein (dies ist willkürlich, je mehr Schritte Sie wählen, desto langsamer wird die Animation)..
Wählen Sie Ihre zwei Objekte aus und gehen Sie zu Object> Blend> Make. Das Ergebnis wird völlig unbemerkt bleiben: Alle Ihre gemischten Schritte sind übereinander angeordnet…
Um sie in Flash zu animieren, müssen wir die Schritte teilen und auf separaten Ebenen platzieren. Erweitern Sie die Ebene, in der sich die Überblendung befindet, und stellen Sie sicher, dass Sie die Überblendung ausgewählt haben (siehe unten). Öffnen Sie nun das Palettenmenü in der Ebenen-Palette und wählen Sie "Auf Ebenen freigeben" (Sequenz)..
Wählen Sie anschließend alle resultierenden Ebenen aus und ziehen Sie sie aus der ersten Ebene, in der sie sich befinden. Wir brauchen, dass sie völlig unabhängig sind. Löschen Sie anschließend die ursprüngliche "Ebene 1". es ist jetzt doch leer. Sie erhalten eine Reihe von Ebenen, von denen jede eine 3D-Kugel mit allmählichem Rotationsgrad enthält. Die letzte und die erste sind natürlich genau gleich (es waren die beiden ursprünglichen Zustände, die gemischt wurden), sodass Sie auch eine dieser beiden Ebenen entfernen können.
Nun, das ist das. Ich habe gerade erklärt, was im Titel dieses Schrittes zu tun ist. Speichern und schließen Sie Ihr Dokument. Es ist fertig!
Seitdem Adobe das Imperium von Macromedia übernommen hat, ist das Arbeiten zwischen seinen Anwendungen immer einfacher geworden. Das Importieren und Exportieren zwischen Illustrator und Flash ist seit einiger Zeit möglich, obwohl die Ergebnisse manchmal etwas unvorhersehbar sein können. Das Exportieren von Illustrator-Ebenen als SWF-Filmsequenzen oder als einzelne SWF-Dateien ergab eine ziemlich gute Kompatibilität zwischen Programmen. Dann kam CS3. Seit diesem Zeitpunkt können wir AI-Dateien direkt importieren und den gesamten Prozess vollständig in Flash selbst abwickeln.
Schauen wir uns die Optionen an, die wir haben, und wenden Sie sie auf dieses Tut an. Wenn Sie eine Flash-Datei aus Teil 1 dieses Programms haben oder mit den Quelldateien arbeiten, öffnen Sie "source_1.fla;". unser ursprünglicher animierter Ball. Ansonsten öffnen Sie einfach ein neues Dokument in Flash.
Gehen Sie zu Flash> Preferences… und wählen Sie AI File Importer. Alle Optionen sind einigermaßen selbsterklärend. Wir müssen sicherstellen, dass der Inhalt unserer AI-Datei als Pfade importiert wird (nicht als Bitmaps, obwohl dies, wie bereits erwähnt, eine Option ist, wenn die Pfade zu komplex sind). Wenn Sie die importierten Pfade wie folgt einrichten, können Sie die importierten Pfade bearbeiten, den Inhalt jeder Ebene in einzelne Movieclips konvertieren und alles, was sich außerhalb des Artboards befindet, wird ignoriert ).
OK, lass uns unsere AI-Quelldatei importieren. Sollten Sie an einer neuen Flash-Datei arbeiten, ignorieren Sie einfach meine Verweise auf Teil 1 dieses Tut.
Öffnen Sie in "source_1.fla" (oder Ihrer eigenen ausgefüllten FLA-Datei aus Teil 1) die Bibliothek (Befehlstaste + L) und doppelklicken Sie auf "mc_ball_base". Dies war unser Ball in seinem grundlegendsten Zustand; Dieser Film war das, was wir überspannen und dann abprallten. Alles, was wir zu diesem Film tun, wird daher auch gedreht und abprallen. Sperren Sie "Ebene 1" und erstellen Sie eine neue mit dem Namen "importierter Ball".
Wenn der erste Keyframe der Ebene "importierte Kugel" ausgewählt ist, gehen Sie zu "Datei"> "Importieren"> "In Bühne importieren".
Wählen Sie die AI-Datei in Ihrem System aus und klicken Sie auf OK. Sie werden mit der präsentiert Importieren Sie * file * in die Bibliothek In diesem Dialogfeld können Sie die Importoptionen für Ihre AI-Datei abschließen. Dies kann auf einer Ebene für Schicht auf Objektebene erfolgen.
Zunächst werden Sie feststellen, dass sich in jeder der Illustrator-Ebenen ein Pfadobjekt befindet. Jeder Pfad hat ein Warnsymbol, das auf ein Problem hinweist. Wenn Sie auf Inkompatibilitätsbericht klicken, wird bestätigt, dass diese Objekte aufgrund des 3D-Rotationseffekts nicht mit Flash kompatibel sind.
Dies sind unsere gerenderten 3D-Bälle, und Flash kann diese nicht in ihrem aktuellen Zustand bearbeiten. Wir hätten die 3D-Effekte erweitern müssen, damit sie bearbeitet werden können. Dies ist in unserem Fall kein Problem. Wir wollen sie nicht bearbeiten, aber vielleicht wollen wir sie skalieren. Ignorieren Sie die Option, sie als Bitmaps zu importieren. Sie werden als skalierbare Pfade problemlos importiert.
Alle anderen Standardeinstellungen sind für unsere Anforderungen in Ordnung. Stellen Sie nur sicher, dass Ebenen in Keyframes konvertiert werden. OK klicken.
Nachdem Sie Ihre AI-Datei importiert haben, sehen Sie eine Sequenz von Keyframes in Ihrer "importierten Kugel" -Ebene. Wenn Sie den Schieberegler in der Zeitleiste auf und ab bewegen, wird angezeigt, wie Sie mit diesen Bildern Ihren Drehball erhalten. Perfekt!
Vervollständigen Sie den Effekt, indem Sie "Layer 1" über "importierter Ball" platzieren und alles außer diesem Strich aus dieser Ebene löschen. Klicken Sie dann auf das Bild über dem letzten Keyframe in Ihrer Sequenz (in meinem Fall Bild 19) und klicken Sie auf F5, um die Bilder über die gesamte Länge der Animation zu verteilen. Dadurch wird der ursprüngliche Schlag über dem Ball platziert.
Befehl + Eingabe zeigt eine Vorschau Ihrer Animation. In meinem Fall habe ich mich auch dafür entschieden, den ursprünglichen Spinning-Effekt durch Verlängern des Bewegungs-Tween im "mc_ball" -Film zu verlangsamen. Der Ball wird um 360 ° im Uhrzeigersinn und um 360 ° um die Mittelachse gedreht. Ein Effekt ist nicht möglich (ohne massive Konzentration und einige Monate Zeichnen), wenn nur Flash verwendet wird.
Sind Sie neugierig zu wissen, wie es aussah, wenn wir uns für den schattigen Ball entschieden hätten? Wiederholen Sie die vorherigen Schritte, nachdem Sie sich entschieden haben, Ihren 3D-Ball in Illustrator zu schattieren:
Sie werden feststellen, dass ich mich entschieden habe, die Keyframes nicht in die Drehbewegung zu importieren. Der Ball dreht sich nicht mehr im Uhrzeigersinn. Wenn ich das getan hätte, würde sich auch die Beleuchtung drehen (und das würde den Effekt ruinieren). Es ist ein ziemlich gutes Ergebnis, findest du nicht? Das Problem bei Bitmaps ist jedoch wiederum, dass sie in Flash nicht gut skaliert oder gedreht werden können. Wie Sie vielleicht gesehen haben, wird der Punkt, an dem der Ball beim Auftreffen auf den Boden abflacht, etwas pixelig dargestellt - ein Problemvektor erfährt dies nicht.
Hier endet der zweite Teil dieses 2-teiligen Tut! Diese letzten Schritte geben Ihnen hoffentlich einen Einblick in: Trennen von Illustrator-Blends in Ebenen, Importieren von AI-Dateien in Flash sowie Fähigkeiten und Grenzen von Vektoren und Bitmaps. Wie immer hoffe ich, dass es Ihnen gefallen hat!
Abonnieren Sie den VECTORTUTS RSS-Feed, um mit den neuesten Vektor-Tutorials und -Artikeln auf dem Laufenden zu bleiben.
Accentsconagua