In diesem Lernprogramm verwenden wir eine Timeline-Animation, um eine benutzerdefinierte Klasse zu erstellen. Wir werden die Klasse dann für zwei unterschiedliche MovieClips verwenden, um die Animation effektiv auf diese Symbole zu kopieren.
Kurzübersicht
Zu den neuen Funktionen von Flash CS3 gehörte neben ActionScript 3 auch die Möglichkeit, Timeline-Animationen als AS3-Code zu kopieren. In diesem Lernprogramm erstellen wir eine benutzerdefinierte Klasse, die für jeden ausgewählten Movieclip verwendet werden kann. Die sich daraus ergebende Klasse ist größtenteils XML-basiert und sollte nicht von Hand geschrieben werden. Nun, es sei denn, Sie sind bereit für harte Arbeit und Frustration!
In der oben genannten Beispiel-SWF-Datei werden die MovieClips nur vergrößert und ausgeblendet, aber Sie könnten eine sehr komplexe Animation haben, die ebenfalls zu ActionScript kopiert werden könnte. Das Beste beim Kopieren von Timeline-Animationen in eine Klasse ist die Wiederverwendbarkeit. Sie können sehen, dass die beiden Symbole genau demselben Animationsmuster folgen.
Schritt 1: Einrichten des Dokuments
Öffnen Sie ein neues Flash-Dokument und legen Sie die folgenden Eigenschaften fest
Dokumentengröße: 400x200px
Hintergrundfarbe: #FFFFFF
Schritt 2: MovieClip einrichten
Wählen Sie im Werkzeugfenster das Oval-Werkzeug aus und zeichnen Sie einen grünen Kreis auf der Bühne. Sie können die Umschalttaste gedrückt halten, während Sie den Kreis aus der Form ziehen, die einem Kreis und nicht einer erweiterten Ellipse entspricht.
Geben Sie im Eigenschaftenfenster dem Kreis die folgenden Abmessungen an
W: 27,00
H: 27,00
Klicken Sie mit der rechten Maustaste auf den Kreis, den Sie gerade erstellt haben, und wählen Sie "In Symbol konvertieren". Eingeben Kreis als Name und stellen Sie sicher, dass der Typ auf gesetzt ist Filmausschnitt.
Schritt 3: Hinzufügen der Animation zum MovieClip
Klicken Sie in der Timeline mit der rechten Maustaste auf Bild 60 und wählen Sie "Keyframe einfügen"..
Vergewissern Sie sich, dass Sie sich noch in Frame 60 befinden, und ziehen Sie den Kreis mit dem Werkzeug "Frei transformieren" auf ungefähr das Doppelte seiner ursprünglichen Größe.
Vergewissern Sie sich, dass Sie sich noch auf Frame 60 im MovieClip-Kreis befinden. Wählen Sie im Eigenschaftenfenster "Farbeffekt". Wählen Sie im Style-Pulldown "Alpha" und setzen Sie es auf 0%..
Klicken Sie auf die Ebene, in der sich der Kreis befindet, um sicherzustellen, dass alle Bilder hervorgehoben sind. Alternativ können Sie auf das erste Bild klicken und dann mit gedrückter Umschalttaste auf das letzte Bild klicken, um sicherzustellen, dass alle Bilder markiert sind. Klicken Sie dann mit der rechten Maustaste irgendwo zwischen die hervorgehobenen Rahmen und wählen Sie "Klassisches Tween erstellen"..
Sie können jetzt Ihre Animation testen, indem Sie zu gehen Menü> Steuerung> Wiedergabe. Sie sollten einen wachsenden und verblassenden MovieClip haben.
Schritt 4: Kopieren der Animation
Jetzt können wir unsere Timeline-Animation kopieren und unsere Klasse codieren.
Stellen Sie sicher, dass alle Bilder mit der obigen Technik hervorgehoben sind. Klicken Sie dann mit der rechten Maustaste auf das Tween in der Timeline und wählen Sie "Motion Motion As ActionScript 3.0 kopieren". Geben Sie in der Eingabeaufforderung den Instanznamen "GrowFade" an.
Kopieren Sie den Code, der in Ihrer Zwischenablage angezeigt wird.
Schritt 5: Kodierung der Klasse
Erstellen Sie eine neue ActionScript-Datei, indem Sie zu gehen Menü> Datei> Neu und dann wählen ActionScript-Datei.
Fügen Sie der neuen AS-Datei den folgenden Code hinzu:
package import flash.display.MovieClip; import fl.motion.Animator; public class GrowFade erweitert MovieClip var GrowFade_animator: Animator; public function GrowFade () // constructor code öffentliche Funktion growAndFade (): void
Hier öffnen wir unser Paket und führen Importe durch. Die Animator-Klasse dient zur Animation in unserer Klasse. Die Funktion growAndFade () Hier wird der kopierte ActionScript-Code aus dem obigen Schritt eingefügt. Wir machen das als nächstes.
In der growAndFade () Funktion fügen Sie das ActionScript ein. Wenn Sie es erneut kopieren müssen, befolgen Sie einfach die oben genannten Schritte und geben Sie den Instanznamen "GrowFade" an..
Das growAndFade Funktion sollte jetzt so aussehen
package public function growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; var GrowFade_animator: Animator = neuer Animator (GrowFade_xml, GrowFade); GrowFade_animator.play ();
Wir müssen hier einige Bereinigungsarbeiten durchführen.
Zuerst müssen wir die import-Anweisung entfernen, da wir dies bereits zu Beginn der Klasse getan haben.
Als nächstes wollen wir das erklären GrowFade_animator als lokale Variable für die Klasse, so verschieben wir diese nach oben und instanziieren sie innerhalb der growAndFade funktionieren so: GrowFade_animator = neuer Animator (GrowFade_xml, this)
Möglicherweise haben Sie bemerkt, dass wir auch den zweiten Parameter in geändert haben diese. Der Grund dafür ist, dass wir diese Klasse für jeden MovieClip verwenden können. wenn wir es nicht geändert hätten diese dann können nur Klassen mit dem Instanznamen "GrowFade" diese Klasse verwenden.
Hier ist die komplette Klasse mit den neuen Änderungen und einer kleinen Ergänzung. Wir werden diesen Zusatz als nächstes besprechen.
package import flash.display.MovieClip; import fl.motion.Animator; public class GrowFade erweitert MovieClip var GrowFade_animator: Animator public function GrowFade () // constructor code öffentliche Funktion growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; GrowFade_animator = neuer Animator (GrowFade_xml, this); GrowFade_animator.play (); // Wie oft soll die Animation wiederholt werden? 0 = forever GrowFade_animator.repeatCount = 0;
Sie werden feststellen, dass wir das hinzugefügt haben repeatCount Eigentum. Mit dieser Einstellung legen Sie fest, wie oft die Animation wiederholt werden soll. Wenn Sie den Wert auf Null setzen, wird er für immer wiederholt.
Schritt 6: MovieClips einrichten
Löschen Sie wieder in der FLA den Kreis von der Bühne und entfernen Sie alle Frames von der Timeline.
Klicken Sie in der Bibliothek mit der rechten Maustaste auf die Kreis Movieclip und wählen Sie "Eigenschaften".
Geben Sie dem Kreis den Klassennamen "Circle" und setzen Sie die Basisklasse auf "GrowFade". Da die GrowFade-Klasse MovieClip erweitert, können Sie sie als Basisklasse des Kreises verwenden. Wir haben keine Circle-Klasse erstellt, aber da wir GrowFade als Basisklasse eingegeben haben, erstellt Flash automatisch eine Klasse für diesen erweitert GrowFade, wenn die SWF erstellt wird. Auf diese Weise können wir beliebig viele Movieclips verwenden, die alle die GrowFade-Klasse gemeinsam nutzen.
Zeichnen Sie als Nächstes ein blaues Rechteck auf der Bühne.
Geben Sie im Eigenschaftenfenster diesem Rechteck die folgenden Eigenschaften an:
W: 83,00
H: 30:00
Klicken Sie mit der rechten Maustaste auf das Rechteck und wählen Sie "In Symbol konvertieren". Gib ihm den Namen Quadrat.
Löschen Sie das Rechteck von der Bühne. Klicken Sie in der Bibliothek mit der rechten Maustaste auf den quadratischen MovieClip. Wählen Sie "Eigenschaften" und geben Sie den Klassennamen "Quadrat" an. Setzen Sie die Basisklasse auf "GrowFade", wie wir es mit dem Kreis oben getan haben.
Schritt 6: Anwenden der Klasse auf die Movieclips
Erstellen Sie eine neue ActionScript-Datei und fügen Sie den folgenden Code hinzu:
package import flash.display.MovieClip; öffentliche Klasse Main erweitert MovieClip var circle: Circle; var Quadrat: Quadrat; öffentliche Funktion Main () Kreis = neuer Kreis (); Kreis.x = 50 Kreis.y = 50; addChild (Kreis); circle.growAndFade (); Quadrat = neues Quadrat; Quadrat x = 200; Quadrat.y = 50; addChild (Quadrat); square.growAndFade ();
Da wir die Basisklasse des Kreises und des Quadrats auf GrowFade setzen, können wir das nennen growAndFade () Methode auf sie.
Setzen Sie die Dokumentenklasse des Films auf "Main" und testen Sie den Film. Sie sollten über zwei separate Movieclips verfügen, die dieselbe GrowAndFade-Animation verwenden.
Fazit
Das Kopieren von Timeline-Animationen ist eine großartige Ergänzung zu Flash. Egal wie komplex eine Animation ist, die Sie erstellen, Flash kann sie für Sie erledigen, und wenn Sie dieselbe Animation für viele verschiedene Filmclips freigeben können, sparen Sie enorm viel Zeit.
Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!
Share
Accentsconagua
