Share
Es ist ein allzu bekannter Zwang unter digitalen Designern, sich mit ihrem Werkzeug ihrer Wahl zu identifizieren. Dies ist bedauerlich, denn in Flash ist Fireworks CS4 ein Werkzeug, das immer übersehen wird.
In diesem Lernprogramm erfahren Sie, wie Fireworks CS4 verwendet werden kann, um Ihren Workflow in Flash zu beschleunigen und gleichzeitig einem Neonschild an der Wand eines heruntergekommenen Theaters in Los Angeles zu helfen, auf einer ziemlich fleißigen Umgebung zu flackern Straße.
Öffne das MusicHall.jpg Datei in Fireworks CS4. Es ist geplant, jeden Buchstaben in den Wörtern „Music“ und „Hall“ mit den von Fireworks erzeugten Vektoren zu zeichnen.
Wählen Sie das Zoom-Werkzeug aus und vergrößern Sie die Wörter im Zeichen. Alternativ können Sie im Vergrößerungsfenster in der rechten unteren Ecke des Canvas-Bereichs 150% auswählen.
Klicken Sie im Bedienfeld Werkzeuge auf den Strich-Farbchip, um die Farbauswahl zu öffnen. Wählen FF3300 (eine Orange) und drücken Sie die Eingabetaste, um Ihre Auswahl zu bestätigen. Setzen Sie die Füllfarbe auf Keine. Dadurch wird die Farbe der Buchstaben festgelegt, während wir sie zeichnen. Obwohl der Schlauch eine graue Farbe zu sein scheint, vermute ich, dass das eigentliche Licht einmal rot war.
Klicken und halten Sie das Stiftwerkzeug. Wählen Sie das Vektorpfadwerkzeug aus der Popup-Liste aus. Wenn Sie dieses Werkzeug auswählen, können Sie den Stift als Pinsel behandeln. Obwohl dieses Werkzeug eher für diejenigen geeignet ist, die Pens und Tablets verwenden, ermöglicht dieses Projekt denjenigen von uns, die mit Mäusen zeichnen, ebenfalls Spaß.
Setzen Sie im Eigenschafteninspektor die Pinselbreite auf 4 Pixel und wählen Sie die Option Weich gerundet Pinsel aus der Kategorie Basic in der Bürstentyp Pop-Down-Menü. Stellen Sie das ein Präzision Wert zu 2. Präzision ist, wie eng die Vektoren gezeichnet werden. Je höher die Anzahl (der Maximalwert ist 10), desto mehr Vektorknoten befinden sich in der Zeile
Wählen Sie die Schriftebene aus und zeichnen Sie mit dem Werkzeug den Buchstaben „M“ nach. Wenn Sie fertig sind, gibt es einen neuen Sublayer mit dem Namen Pfad. Doppelklicken Sie auf den Layer-Namen "Path" und ändern Sie ihn in "M"..
Wenn der Pfad so aussieht, als könnte er einen „Tweak“ verwenden, wechseln Sie zu dem Unterauswahlwerkzeug, dem Hohlpfeil im Bedienfeld Werkzeuge, und klicken Sie auf die Form. Sie sehen die Vektoren. Klicken Sie auf einen Ankerpunkt, um die Ziehpunkte freizulegen und Ihre „Tweaks“ vorzunehmen. Um einen Punkt zu entfernen, wählen Sie ihn mit dem Unterauswahlwerkzeug aus und drücken Sie die Entf-Taste. Um einen Eckpunkt in einen abgerundeten Punkt zu ändern, wechseln Sie zum Stiftwerkzeug und klicken Sie auf den Punkt, um den fehlenden Griff hinzuzufügen.
Wenn Sie mit Punkten ohne Ziehpunkte fertig werden, wählen Sie das Stiftwerkzeug aus und klicken / ziehen den Punkt. Feuerwerkskörper haben die unangenehme Angewohnheit, immer den Weg für Sie schließen zu wollen. Doppelklicken Sie einfach auf den Endpunkt des Pfads, um die Linie zu entfernen. Um einen Punkt auf dem Pfad zu löschen, wählen Sie ihn mit dem Subselect-Werkzeug aus und drücken Sie die Löschtaste.
Wiederholen Sie die Schritte 4 bis 7 für die restlichen Buchstaben des Zeichens.
Wenn Sie fertig sind, wählen Sie Datei> Speichern unter. Das Dialogfeld Speichern wird geöffnet. Benennen Sie die Datei (ich habe „MusicHall“ verwendet) und wählen Sie FireworksPNG (*. Png) aus dem Pop-Down. Dadurch erhalten Sie ein mehrschichtiges Dokument mit Transparenz für jede Ebene. Klicken Sie auf die Schaltfläche Speichern und beenden Sie Fireworks.
Wie ich zu Beginn dieses Tutorials darauf hingewiesen habe, wird Fireworks CS4 von Designern tendenziell als das "Familienmitglied von Photoshop" betrachtet, das wir lieber nicht diskutieren. Wie Sie im Moment erfahren werden, ist möglicherweise etwas mehr Geschwätz über Fireworks CS4 erforderlich. Lass uns anfangen.
Starten Sie Flash CS4 und erstellen Sie ein neues Flash ActionScript 3.0-Dokument.
Wählen Sie Datei> Importieren> In Bibliothek importieren und navigieren Sie zu dem Ordner, in dem Sie das PNG-Bild gespeichert haben. Wählen Sie das Bild aus und klicken Sie auf die Schaltfläche In Bibliothek importieren. Dadurch wird das Dialogfeld Fireworks-Dokument importieren geöffnet. Warum die Bibliothek? Es wird allgemein als bewährte Methode angesehen, um alles in die Bibliothek zu importieren. Tatsächlich bleibt alles, was auf die Bühne importiert wird, in der Bibliothek hängen, also sparen Sie sich einen Schritt.
Wenn das Dialogfeld Fireworks-Dokument importieren geöffnet wird, klicken Sie auf OK. Wenn Sie dieses Dialogfeld noch nie gesehen haben, gehen wir es durch.
Öffnen Sie die Flash-Bibliothek und öffnen Sie Fireworks Objects> MusicHall.png> Seite 1. Doppelklicken Sie auf den Movieclip Page 1, um ihn im Symbol-Editor zu öffnen.
Wenn Sie sich den Movieclip ansehen, erfahren Sie, warum Fireworks CS4 Ihr Leben erleichtern kann. Jeder der Buchstaben befindet sich auf seiner eigenen Ebene im Movieclip. Das MusicHall.png Das Grafiksymbol in der Bibliothek ist ausschließlich ein Platzhalter, und wir werden es nicht verwenden. Wenn Sie mit dem Subselection-Werkzeug von Flash auf jeden Buchstaben klicken, sehen Sie, dass es sich bei jedem Buchstaben um ein vektorbasiertes Zeichnungsobjekt handelt, was bedeutet, dass Sie bei Bedarf weitere Änderungen vornehmen können. Was Sie nicht tun möchten, ist das zu löschen Bitmap 3 Bild in der Feuerwerk Objekte Mappe. Es ist der, der das Hintergrundbild enthält.
Die Buchstaben sind wichtig und müssen mit einer Reihe von Filtern versehen werden, um den Effekt zu erzeugen. Das Flimmern wird auch von ActionScript 3.0 gesteuert. Dies bedeutet, dass die Buchstaben in ihrer aktuellen Form nicht funktionieren. Sie müssen in einem Movieclip enthalten sein, da Filter nur auf Text oder Movieclips angewendet werden können. Hier ist wie:
Wählen Sie die Beschriftungsebenen und nicht den Ordner im Ordner Beschriftung auf der Timeline aus, und schneiden Sie sie aus.
Fügen Sie die Buchstaben in der Zwischenablage in einen neuen Movieclip mit dem Namen Letters ein.
Kehren Sie zum Movieclip "Seite 1" zurück, löschen Sie die Ebene "Lettering", fügen Sie eine neue Ebene hinzu und ziehen Sie den Movieclip "Lettering" auf die neue Ebene.
Klicken Sie einmal auf den Movieclip auf der Bühne und ziehen Sie ihn in die gewünschte Position. Verwenden Sie die Pfeiltasten für eine genauere Steuerung. (Bild 13)
Speichern Sie die Datei in dem Ordner, in dem Sie das importierte Bild gespeichert haben.
Eine Sache, die ich versuche, in die Köpfe meiner Schüler zu schlagen, ist, dass "die Kunst des Flashs die Kunst der Subtilität ist". Achten Sie darauf, wie die Dinge in der realen Welt funktionieren, und Sie werden dies in Aktion sehen. Um einen Neon-Effekt zu erzeugen, ist viel mehr als nur ein Glühen auf die Buchstaben zu schlagen. Es gibt ein bisschen mehr als das, wenn es darum geht, einen realistischen Effekt zu erzielen. Lass uns anfangen.
Verwenden Sie die in der Abbildung gezeigten Werte, um dem MovieClip einen Abschrägungsfilter hinzuzufügen. Dadurch wird die Basis für den Effekt geschaffen, indem den Buchstaben ein 3D-Look verliehen und entlang der Kanten ein kleines Highlight hinzugefügt wird.
Verwenden Sie die in der Abbildung gezeigten Werte, um dem MovieClip einen Verlaufsfilter hinzuzufügen. Durch Setzen von Glühen X und Glühen Y Werte auf 0, die Neonröhre wird definierter.
Verwenden Sie nun die in der Abbildung gezeigten Werte, um einen Glow-Filter zum Movieclip hinzuzufügen… In den vorherigen beiden Schritten wurde das Rohr erstellt, in diesem Schritt wird das Licht hinzugefügt. Stellen Sie sicher, dass die Farbe des Glühens ist - FFCC00 - passen Sie die Farbe der Buchstaben an, die in Fireworks hinzugefügt wurden.
Noch ein Filter; Verwenden Sie die in der Abbildung gezeigten Werte, um dem Filmclip einen Schlagschattenfilter hinzuzufügen. Die Farbe für den Schlagschatten ist nicht schwarz, sondern #CCCCCC. Dies lässt die Illusion von etwas Beleuchtung entstehen - was die 2 Pixel Unschärfewerte - hinter dem Licht erklärt.
Wenn der Movieclip auf der Bühne ausgewählt ist, geben Sie im Eigenschafteninspektor den Instanznamen "sign" an. Hiermit wird jetzt der MovieClip für ActionScript eingerichtet, mit dem das Flackern der Neonröhren gesteuert wird.
Das typische Flimmern eines Neonzeichens kann nicht auf der Timeline erstellt werden. In diesem Fall flackert das Glühen auf eine Art und Weise, die ein Neonzeichen simuliert, das sich auf den letzten Beinen befindet. Führen Sie die folgenden Schritte aus, um den Flimmereffekt hinzuzufügen.
Fügen Sie eine neue Ebene mit dem Namen hinzu Aktionen auf der Timeline des Movieclips. Sperren Sie die Ebene.
Wählen Sie das erste Bild in der Aktionsebene aus und wählen Sie Fenster> Aktionen oder drücken Sie die Tasten F9 (PC) oder Option-F9 (Mac), um den Skriptbereich zu öffnen.
Geben Sie den folgenden Code ein:
importieren Sie flash.filters. *; addEventListener (Event.ENTER_FRAME, flickerIt); function flickerIt (evt: Event): void var-Filter: Array = sign.filters; var glow: GlowFilter = Filter [2]; glow.strength = Math.random () *. 5 + .35; sign.filters = Filter; ;
Wenn Sie ActionScript noch nicht kennen, gehen wir diesen Codeblock durch.
Wir wissen, dass der Glow-Filter der Flicker ist. Dazu müssen Sie zuerst die Filterklasse laden. Das * wird als Platzhalter bezeichnet und weist Flash an, die gesamte Filterklasse zu laden. Wenn Sie nur einen Filter verwenden möchten, verwenden Sie stattdessen den Namen des Filters. In diesem Fall haben wir vier Filter im Movieclip, also ist ein Platzhalter der beste Weg.
Die nächste Zeile zeigt, wie das Flimmern geschieht. Lassen Sie uns etwas klar verstehen: ActionScript ist ziemlich dumm. Es tut nichts, wenn es nichts hört. In diesem Fall teilen wir ActionScript mit, dass es auf ein ENTER_FRAME -Ereignis warten soll, und wenn es dieses Ereignis hört, um etwas namens flickerIt auszuführen. Daraus kann man ableiten, dass der Flash-Film eine Frame-Schleife ist. Wenn der Abspielkopf das Bild erreicht, nachdem er getan hat, was getan werden muss, macht er alles noch einmal.
Die Funktion ist, wo die Magie geschieht und das Flimmern erzeugt wird.
Die erste Zeile erfasst die Namen aller Filter, die auf den Zeichen-Movieclip angewendet wurden, und fügt sie in eine Liste ein. Wenn ActionScript eine Liste erstellt, die als Array bezeichnet wird, werden die Namen der Filter nicht verwendet. Stattdessen werden sie in numerischer Reihenfolge angeordnet indizierte Reihenfolge, in der Reihenfolge, in der sie hinzugefügt wurden. Wenn Sie die Liste sehen könnten, würden die vier Filter folgendermaßen aussehen: 0,1,2,3 nicht Abschrägung, GradientGlow, Glow, DropShadow.
In der nächsten Zeile wird dem GlowFilter der Variablenname "Glow" zugewiesen, indem ActionScript aufgerufen wird, in die Liste zu gehen und das Indexelement zu verwenden 2 in dieser Liste.
Jetzt, da ActionScript weiß, welcher Filter verwendet werden soll, erstellen wir das Flimmern, indem wir mit "spielen" Stärke Eigentum des GlowFilter.
Der Wert für die Stärkeeigenschaft - Math.random () *. 5 + .35- mag Ihnen etwas mysteriös erscheinen. Es ist wirklich nicht Das zufällig() Methode der Mathematik Klasse wählt eine Zahl zwischen 0 und 1. Wenn diese Zahl ausgewählt ist, wird sie in zwei Hälften geteilt und dann um 0,35 erhöht. Dies bedeutet, dass die orange Farbe jedes Mal, wenn der Abspielkopf in das erste Bild eintritt, eine andere Stärke hat. Nehmen wir an, die zufällig gewählte Zahl ist 0,95. Die Berechnung wäre:
Das resultierende Glühen hätte einen Festigkeitswert von 83%, wenn wir den Wert direkt in den Filter eingeben würden. Jedes Mal, wenn der Abspielkopf in das Bild eintritt, wird die Helligkeit des Lichts in Abhängigkeit von dieser Zufallszahl erhöht oder verringert.
Schließen Sie den Skriptbereich und klicken Sie auf die Schaltfläche Szene 1, um zur Hauptzeitleiste zurückzukehren.
Ziehen Sie den Filmcursor der Seite 1 auf die Bühne und wählen Sie Modifizieren> Dokument. Wenn das Dialogfeld Dokumenteigenschaften geöffnet wird, klicken Sie auf die Optionsschaltfläche Inhalt. Jetzt speichern und testen Sie den Film.
Lassen Sie uns das Ganze etwas realistischer gestalten und im Hintergrund das Brummen eines Neonzeichens hinzufügen.
Kopieren Sie die Buzz.mp3-Datei aus dem Download in den gleichen Ordner wie die .fla.
Öffnen Sie den Movieclip der Seite 1, wählen Sie das erste Bild in der Aktionsebene aus und öffnen Sie das Skriptfenster.
Klicken Sie einmal nach der ersten Codezeile, drücken Sie die Eingabetaste und fügen Sie den folgenden Codeblock hinzu:
Accentsconagua
var audio: Sound = neuer Sound (); var req: URLRequest = neue URLRequest ("Buzz.mp3"); audio.load (req); audio.play (); Wenn Sie noch nicht mit ActionScript vertraut sind, gehen wir diesen Codeblock gemeinsam durch.
Innerhalb der Flash-Community ist es eine Selbstverständlichkeit, dass das Hinzufügen von Audio zur Timeline eine „böse Praxis“ ist. Dies bedeutet, dass wir die Audiodatei mithilfe von ActionScript in den Film einfügen müssen. Die erste Codezeile startet diesen Prozess, indem ein Soundobjekt mit dem Namen erstellt wird Audio-. Dieses Objekt wird später verwendet, um die Sounddatei tatsächlich abzuspielen.
Wir wissen, dass Flash dumm ist, also müssen wir wissen, welche Audiodatei verwendet wird. Dies wird durch das erreicht URLRequest Objekt benannt req. Der Parameter ist der Name der Datei, die wir verwenden werden. Stellen Sie sicher, dass die Anführungszeichen vorhanden sind und der Name genau mit dem Dateinamen übereinstimmt. Wenn Sie sich an einer anderen Stelle auf Ihrer Website befinden, um die Audiodatei abzurufen, geben Sie eine absolute Adresse für die Datei ein.
Nun, da Flash weiß, welche Datei abgespielt werden soll, wird es einfach da stehen und Sie mit einem dummen Grinsen im Gesicht betrachten, es sei denn, Sie müssen die Audiodatei mit dem Flash Player in den Flash-Player laden Belastung() Methode der Sound-Klasse. Schließlich müssen Sie Flash anweisen, den Sound tatsächlich abzuspielen.
Sie können jetzt den Film speichern und testen!
In diesem Lernprogramm haben Sie den Workflow zwischen Fireworks CS4 und Flash CS4 untersucht. Sie haben herausgefunden, wie Sie einige der Zeichenwerkzeuge in Fireworks verwenden und wie das Layering in Fireworks durchgeführt wird. Sie haben auch ein Fireworks .png-Dokument in Flash importiert und erfahren, dass Fireworks .png-Dokumente einen Movieclip zur Flash-Bibliothek hinzufügen. Sie haben den Fireworks-Movieclip geöffnet und mit ein paar Filtern und einem Schuss ActionScript ein blinkendes Neonzeichen mit einem dazugehörigen Neon-Summton erzeugt.
Vielen Dank fürs Lesen, bitte hinterlassen Sie Kommentare und Fragen. :)
