Verwenden des neuen Deco-Zeichenwerkzeugs in Flash CS5

In diesem Lernprogramm verwenden wir die neuen Funktionen des Deco-Tools von Flash CS5, um eine animierte Cartoon-Kulisse zu erstellen.


Adobe Flash in Creative Suite 5 wurde mit großartigen Updates und Verbesserungen ausgestattet. Adobe Flash CS5 enthält brandneue Funktionen für Designer und Entwickler, z. B. das neue Code-Snippet-Bedienfeld, die Integration mit Flash Builder und das neue Spring for Bones-Tool.

Eine der neuen Funktionen in Flash CS5 ist das Deco-Zeichenwerkzeug (obwohl das Deco-Tool eigentlich keine neue Funktion ist, da es erstmals in Flash CS4 hinzugefügt wurde.) Es ermöglicht das Erstellen von Zeichnungen und Animationen basierend auf dynamischen Formen und Farben . Dies ist eines der intelligenten Tools, mit denen Sie Zeit und Mühe sparen können, indem Sie Zeichnungsobjekte und Animationen mit fertigen Symbolen und Objekten erstellen oder benutzerdefinierte Symbole aus der Bibliothek laden.

In Adobe Flash CS5 wurde das Deko-Tool verbessert, um neue Formen und Funktionen aufzunehmen, wie wir in diesem Tut sehen werden. Das Beispiel, das wir behandeln werden, sollte ein tieferes Verständnis für das Deko-Werkzeug vermitteln, indem ein animierter Cartoon-Hintergrund mit den Deko-Werkzeugen erstellt wird. Fast alle Arbeiten in diesem Beispiel werden mit dem Deco-Tool und seinen Funktionen ausgeführt. In diesem Beispiel soll jedoch gezeigt werden, wie das Deko-Werkzeug verwendet wird, um seine Funktionen zu verstehen, indem Sie animierte Flash-Hintergründe oder andere Designs erstellen und Objekte verwenden, die Sie aus der Deko-Objektliste verwenden.

Dieses Tut zeigt, wie viel Zeit und Aufwand durch die Verwendung des Deko-Tools eingespart werden kann. Während das unten gezeigte Beispiel für den Cartoon-Hintergrund mit den Zeichenwerkzeugen in Flash zusammen mit einigen Zeichenkenntnissen Stunden benötigt, können Sie dieses Beispiel mit dem Deko-Werkzeug in weniger als einer Stunde erstellen und benötigen keine Zeichenkenntnisse.

Sie benötigen grundlegende Kenntnisse über Flash-Tools, da ich direkt in das Deko-Tool einsteigen und zeigen kann, wie Sie es anpassen können, um den Hintergrund und die Animation zu erstellen. Beginnen wir jedoch mit Schritt 1…


Endergebnisvorschau

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:


Schritt 1: Baue die Szenenbasis auf

Zunächst erstellen wir das Flash-Dokument und bereiten es vor dem Hinzufügen der Deco-Tool-Objekte vor.

Erstellen Sie ein neues Flash-Dokument mit den Abmessungen 600px X 450 px. Fügen Sie ein Rechteck mit denselben Abmessungen wie das Dokument hinzu, und füllen Sie das Rechteck mit einer linearen Füllung (wie in der Abbildung unten), um den Effekt eines dunklen Himmels zu erzeugen.


Schritt 2: Straße und Gebäude

Jetzt erstellen wir den Straßenhintergrund mit dem Linien-Werkzeug, erstellen die Umrissform der Straße und füllen diese mit grauen Farben, um einen echten Asphalt zu simulieren. Erstellen Sie dann mit dem Oval-Werkzeug Wolken, und das Endergebnis sollte folgendermaßen aussehen:

Jetzt beginnen wir mit dem Deko-Werkzeug, um die Gebäude zu erstellen, die am Straßensteig entlanggehen, den wir oben angelegt haben. Sie können den gewünschten Wolkenkratzertyp festlegen oder beliebige Gebäude verwenden. Sie können auch die Größe der Gebäude einstellen.


Schritt 3: Zufällige Gebäude

Wählen Sie das Deko-Werkzeug oder drücken Sie die Taste U auf der Tastatur. Wählen Sie im Eigenschaftenfenster aus der Dropdown-Liste Zeichnungseffekt die Option "Gebäudepinsel" aus. Gehen Sie dann zu den erweiterten Optionen, wählen Sie "Random Building" und setzen Sie die Größe auf 2.


Schritt 4: Aufbau

Klicken Sie auf die Straße, ziehen Sie sie nach oben und lassen Sie die Maustaste los, um das erste Gebäude zu erstellen. Wiederholen Sie den obigen Schritt, um weitere Gebäude auf der Straße zu erstellen (siehe Abbildung unten)

In den folgenden Schritten erstellen wir mit dem Baumpinsel Bäume auf dem Bürgersteig und mit dem Blumenpinsel blühende Zweige über einigen Gebäuden. Mit diesem Pinsel können Sie die Größe des Baums und seiner Zweig-, Blatt- und Blüten- / Fruchtfarben einstellen.


Schritt 5: Baumbürste

Erstellen Sie eine neue Ebene über der Gebäudeebene. Wählen Sie das Deko-Werkzeug aus. Wählen Sie im Eigenschaftenfenster aus dem Dropdown-Menü die Option "Baumpinsel" und in der Option "Erweitert" die Option "Aspen-Baum".


Schritt 6: Wachstum

Klicken Sie auf den Bürgersteig zwischen den Gebäuden, um die Bäume zu erstellen. Ziehen Sie einige Pixel, um kleine Bäume zu erzeugen. Je länger Sie ziehen, desto größer wird der Baum. Der Endeffekt nach dem Hinzufügen der Bäume sollte wie folgt aussehen:


Schritt 7: Blumen

Wählen Sie nun den Blumenpinsel aus und wählen Sie dann unter "Erweitert" die Option "Weihnachtsstern". Stellen Sie die Größe von Blume und Blatt auf 50% ein und vergewissern Sie sich, dass das Kontrollkästchen Verzweigung aktiviert ist


Schritt 8:

Ziehen Sie den Bildschirm nach oben, um Blumenzweige zu erstellen. Sie sollten groß sein, um sie als Zweig anzuzeigen. Wenn der resultierende Zweig zu groß ist, können Sie ihn auswählen und verkleinern. Dann platzieren Sie den verkleinerten Blumenzweig wie in der folgenden Abbildung gezeigt auf den Gebäuden:

In den folgenden Schritten wird erläutert, wie animierte Feuerfässer erstellt werden. Wir werden auch den Feueranimationspinsel verwenden, mit dem Sie ein animiertes Vektorfeuer erstellen können. Sie können die Größe des Feuers, die Geschwindigkeit und die Bilddauer einstellen. Zusätzlich können Sie die Flammenfarbe und den Funken einstellen.


Schritt 9: Große Fässer aus Feuer

Erstellen Sie ein neues Symbol, indem Sie Einfügen> Neues Symbol wählen, oder verwenden Sie die Tastenkombination Strg + F8 (Befehlstaste + F8 bei Mac) und legen Sie es als Movieclip fest.

Erstellen Sie in der aktiven Ebene einen Kreis, der die Oberseite des Fasses darstellt, und einen weiteren, um den Boden des Fasses zu bilden. Ziehen Sie zwei Linien zwischen sich und füllen Sie die Fassfüllung mit Zwischenzeilen, um das folgende Beispiel zu sehen:


Schritt 10: Feueranimation

Erstellen Sie eine neue Ebene für die Feueranimation. Wählen Sie das Deko-Werkzeug aus oder drücken Sie die U-Taste in der Tastatur. Wählen Sie in der Dropdown-Liste im Eigenschaftenfenster die Option Feueranimation aus, und legen Sie die Feueranimation auf 50 Frames fest.


Schritt 11: Feuer anwenden

  • Klicken und halten Sie auf dem Bildschirm, um die Animation des Feuers zu starten.
  • Derzeit beginnt die erstellte Feueranimation klein und wird bis zum Ende der Animation größer. Dadurch wird ein unerwünschter Schnitt in der Schleifenanimation erstellt. Um dies zu lösen, entfernen wir die Startrahmen für das Feuer. Wählen Sie in der Zeitleiste alle Bilder aus, in denen das Feuer noch wächst. In diesem Beispiel haben wir die ersten 15 Bilder ausgewählt. Klicken Sie mit der rechten Maustaste auf die Timeline und wählen Sie "Frames entfernen" (oder drücken Sie Umschalt + F5)..
  • Stellen Sie sicher, dass der Lauf die gleiche Anzahl von Frames wie die Feueranimation hat.

Schritt 12: Neu positionieren

Jetzt ändern wir die Größe und Position des Feuers, damit es aussieht, als ob Flammen aus dem Lauf steigen würden:

  • Um die Größe des Feuers an die Tonne anzupassen, wählen Sie alle Bilder aus und klicken Sie unter der Timeline auf das Symbol Mehrere Bilder bearbeiten.
  • Klicken Sie unten auf das Symbol Zwiebelschale und wählen Sie Zwiebel alle aus der Liste aus.
  • Wählen Sie das Werkzeug "Freie Transformation" und stellen Sie sicher, dass alle Bilder ausgewählt sind.
  • Verändern Sie die Größe des Feuerballs so, dass er in den Lauf passt.

Schritt 13:

Gehen Sie zurück zur Hauptbühne, und fügen Sie den Feuerball-Filmclip auf der Bühne neben den Gebäuden hinzu (siehe Abbildung unten). Sie können den Film testen, indem Sie Strg + Eingabetaste drücken (Befehlstaste + Eingabetaste bei Mac).


Schritt 14: Schnee erstellen

Das Deko-Tool bietet nicht alle möglichen Pinsel oder Formen. Sie können es jedoch mithilfe der Symbole oder der Farben, die Sie anzeigen möchten, an Ihre Bedürfnisse anpassen. Jetzt verwenden wir das Partikelsystem, mit dem Sie fließende Animationen erstellen können, z. B. Schneefall, Feuerwerk und andere Effekte, die von kleinen Partikeln abhängen, die aus einer Quelle explodieren.

Dieser Pinsel basiert auf zwei Partikeln, die Standardsymbole sein können, oder Sie können Symbole aus der Bibliothek verwenden. Sie können auch andere Optionen festlegen, z. B. die Länge der Animation, die Bildrate pro Bild und andere Optionen.

Erstellen Sie ein neues Symbol mit Einfügen> Neues Symbol oder verwenden Sie die Tastenkombination Strg + F8 (Befehlstaste + F8 bei Mac) und legen Sie es als Movieclip fest. Gehen Sie zurück zur Bühne und ziehen Sie das neu erstellte leere Symbol aus der Bibliothek auf die Bühne. Doppelklicken Sie dann auf das Symbol, um den Bearbeitungsmodus aufzurufen


Schritt 15: Partikelsystem

Wählen Sie das Deko-Werkzeug aus oder klicken Sie auf die U-Taste der Tastatur und wählen Sie Particle System aus der Dropdown-Liste Zeichnungseffekt im Eigenschaftenfenster. Wählen Sie sowohl Particle 1 als auch Particle 2 aus, setzen Sie die Farbe auf Weiß, um den Schneefall zu simulieren, und verwenden Sie die Standardform. Stellen Sie die anderen Werte wie folgt ein:

  • Stellen Sie die Gesamtlänge und Partikelerzeugung auf 100 Bilder ein
  • Preis pro Bild: 1
  • Lebensdauer: 100 Bilder
  • Anfangsgeschwindigkeit: 10px
  • Anfangsgröße: 10%
  • Schwerkraft: 5px

Schritt 16: Generierung

Klicken Sie nun auf die Oberseite der Bühne, damit das Partikelsystem von der Oberseite der Bühne nach unten fällt. Sie werden feststellen, dass die Partikelanimation generiert wird und die Frames erstellt werden.


Schritt 17:

Die Schnee-Animation beginnt klein und wird bis zum Ende der Animation größer. Dies führt (wie beim Feuer) zu einem unerwünschten Schnitt in der Loop-Animation. Um dieses Problem zu lösen, können wir die Startrahmen für die Startschneepartikel erneut entfernen. Wählen Sie den Rahmen bis zu dem Punkt, an dem der Schneefall die gesamte Bühne bedeckt. In diesem Beispiel wählen wir die ersten 40 Frames aus. Klicken Sie mit der rechten Maustaste, und wählen Sie Rahmen entfernen aus, oder drücken Sie Umschalt + F5.

Wenn Sie feststellen, dass sich die Animation schnell bewegt, können Sie nach jedem Keyframe einen zusätzlichen Frame hinzufügen, indem Sie den Keyframe auswählen und F5 drücken.


Schritt 18: Blitz hinzufügen

Fügen Sie mit dem Lightning Brush einige Blitzeffekte hinzu. Dieser Blitz sollte zufällig animiert und erscheinen. Mit diesem Pinsel können Sie eine Vielzahl von Optionen einstellen, z. B. Farbe der Beleuchtung, Skalierung, Strahlbreite und Komplexität. Sie können auch auswählen, ob es animiert werden soll oder nicht.

Erstellen Sie ein neues Movieclip-Symbol und fügen Sie es der Bühne hinter der Gebäudeebene hinzu. Drücken Sie im Movieclip-Symbol die Taste F7, um ein leeres Bild am Anfang des Movieclips zu erstellen und fahren Sie mit Bild 20 fort.


Schritt 19: Beleuchtungsbürste

Wählen Sie das Deko-Werkzeug aus und wählen Sie im Bereich Eigenschaften die Option Beleuchtungspinsel. Behalten Sie die Einstellungen bei, ändern Sie einfach die Farbe in Weiß und aktivieren Sie das Kontrollkästchen Animation.


Schritt 20: Komplexität

Bewegen Sie den Mauszeiger auf die linke obere Ecke der Bühne, klicken Sie und halten Sie die Maustaste gedrückt, bis der Blitz die gewünschte Komplexität erreicht hat. Lassen Sie dann die Maus los. Drücken Sie nach der Animation die Taste F7, um danach ein leeres Bild hinzuzufügen.


Schritt 21: Mehr Blitz

Gehen Sie zu Bild 70, wiederholen Sie die obigen Schritte, um auf der rechten Seite der Bühne mit unterschiedlicher Komplexität mehr Blitz zu erzeugen, und drücken Sie nach der Animation die Taste F7, um den Blitz von der Bühne zu entfernen.


Schritt 22: Test

Sie können den Film testen, indem Sie auf Strg + Eingabetaste (Befehlstaste + Eingabetaste bei Mac) klicken oder Datei> Veröffentlichen auswählen, um den Film als SWF- und HTML-Dateien zu exportieren.


Schritt 23: Optimierung

Im Allgemeinen generieren Dateien, die das Deko-Werkzeug verwenden, große SWF-Dateien, da das Deko-Werkzeug die Pinsel und die Animation als nicht gruppierte Formen und Frame-für-Frame-Animationen generiert. Diese beiden Methoden erhöhen die Gesamtgröße der Datei. Es wird jedoch empfohlen, die Datei nach Erreichen der erforderlichen Ergebnisse zu optimieren. Es gibt einige Tipps zum Verringern der Dateigröße wie folgt:

  • Wandelte häufig verwendete Objekte, wie ähnliche Bäume und Feuerfässer, in Symbole um; In diesem Fall zählt Flash sie als ein Symbol, unabhängig davon, wie oft das Symbol verwendet wird.
  • Brechen Sie die überlappenden Gruppen auseinander, um die zum Laden erforderliche Hardwareverarbeitung sowie die SWF-Größe zu minimieren.
  • Verwenden Sie, wenn möglich, Bewegungs-Tweening, da die Frame-für-Frame-Animation die SWF-Größe erhöht.

Fazit

Im obigen Beispiel haben wir gelernt, wie man mit dem Deko-Werkzeug einen animierten Cartoon-Hintergrund erstellt. Dies spart Zeit und erfordert keine besonderen Karikatur- oder Zeichnungsfähigkeiten. Sie können den Rest der Pinsel entdecken, die in den Deco-Zeichenwerkzeugen verfügbar sind, sowie deren Verwendung und die verschiedenen damit verbundenen Optionen.

Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!