Denken in Befehlen Teil 2 von 2

In diesem Tutorial erweitern wir das Befehls-Framework vom ersten Teil an weiter. Wir erstellen ein Szenemanagement-Framework mit leicht verständlichem und zu wartendem Code.


Endergebnisvorschau

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


Szenenmanagement

Eine sinnvolle Möglichkeit, eine vollständige Flash-Anwendung in kleinere Teile zu zerlegen, ist die Verwaltung als separate Szenen. Mit der Flash-IDE können Sie das Szenenmanagement ausführen, ohne Code schreiben zu müssen. Wir werden jedoch die Dinge ganz anders angehen. Wir werden unser eigenes Szenenmanagement-Framework erstellen.

In unserem Szenenmanagement-Framework betrachten wir Szenen als kleinste Bausteine ​​für eine vollständige Flash-Anwendung. Jede Szene besteht aus einem Intro Befehl und ein Outro Befehl. Ein Intro-Befehl initialisiert alles, was Sie für eine Szene benötigen, z. B. das Hinzufügen eines Logos zur Anzeigeliste Ihres Container-Sprites. Ein Outro-Befehl führt genau das Gegenteil aus, beispielsweise das Logo aus dem Container-Sprite entfernen. Sie können den Übergang von einer Szene zur anderen als den Outro-Befehl der ersten Szene und den Intro-Befehl der zweiten Szene betrachten. Auf diese Weise können wir Szenen zusammenstellen und deren Übergänge sehr einfach verwalten.

Schau dir diese Figur an. Eine Szene ist wie ein Puzzleteil; Das linke Ende steht für den Intro-Befehl und das rechte Ende für den Outro-Befehl.

Ein Übergang von Szene A zu Szene B ist wie die Verbindung der beiden Teile. Der Outro-Befehl der Szene A wird zuerst ausgeführt, der Intro-Befehl der Szene B wird als nächstes ausgeführt, dann ist der Szenenübergang abgeschlossen.

Es ist im Grunde dasselbe Konzept, um einen Übergang von Szene A zu Szene C durchzuführen. Wir müssen nur die Puzzleteile A und C zusammenfügen, anstatt A und B.


Weitere Befehle erstellen

Bevor wir mit dem Erstellen des Szenenmanagement-Frameworks beginnen, erstellen wir zunächst einige weitere Befehlsklassen, die später in diesem Lernprogramm verwendet werden. Sie können sich nur auf die überschriebenen Execute () -Methoden der folgenden Befehlsklassen konzentrieren, die der wichtigste Teil dieser Klassen sind.


GreenSock-Tweening-Befehle

Ohne Zweifel ist die GreenSock Tweening-Plattform eines der besten Open-Source-Tweening-Frameworks. Szenenübergänge beinhalten normalerweise viele Tweenings, und die GreenSock Tweening Platform war schon immer meine erste Wahl, wenn es um das Erstellen von Tweens geht. Wir werden dieses Framework in Befehlsklassen einkapseln, um es in unser Befehls-Framework zu integrieren. Laden Sie die TweenMax-Bibliothek herunter und installieren Sie sie.

Wir verwenden die Methoden to () und from () der TweenMax-Klasse. Die TweenMax-Klasse bietet eine Möglichkeit, den Abschluss eines Tween-Objekts durch Aufrufen einer Funktion zu behandeln, auf die von der optionalen Eigenschaft "onComplete" im Parameter "vars" verwiesen wird. Wir weisen dieser Eigenschaft die Methode complete () des Befehls zu, sodass die Methode complete () aufgerufen wird, wenn das Tween abgeschlossen ist. Nachfolgend finden Sie den Code für die Befehle, die diese beiden Methoden einkapseln. Erstellen Sie ein neues Verzeichnis mit dem Namen "greensock" im Verzeichnis "command", das Sie im ersten Teil dieses Lernprogramms erstellt haben, und speichern Sie diese Klassen als TweenMaxTo.as bzw. TweenMaxFrom.as.

 Paket befehle.greensock import com.greensock.TweenMax; Befehle importieren.Befehl; // Dieser Befehl kapselt die TweenMax.to () - Methode. public class TweenMaxTo erweitert Command public var target: Object; public var duration: Anzahl; public var vars: Objekt; public function TweenMaxTo (target: Object, Dauer: Number, vars: Object) this.target = target; this.Duration = Dauer; this.vars = vars;  Überschreiben der geschützten Funktion execute (): void // weist TweenMax an, die complete () - Methode des Befehls aufzurufen, wenn das Tweening abgeschlossen ist. vars.onComplete = complete; TweenMax.to (Ziel, Dauer, Vars); 
 Paket befehle.greensock import com.greensock.TweenMax; Befehle importieren.Befehl; // Dieser Befehl kapselt die TweenMax.from () - Methode. public class TweenMaxFrom erweitert Command public var target: Object; public var duration: Anzahl; public var vars: Objekt; public function TweenMaxFrom (target: Object, Dauer: Number, vars: Object) this.target = target; this.Duration = Dauer; this.vars = vars;  Überschreiben der geschützten Funktion execute (): void // weist TweenMax an, die complete () - Methode des Befehls aufzurufen, wenn das Tweening abgeschlossen ist. vars.onComplete = complete; TweenMax.from (Ziel, Dauer, Vars); 

(Lesen Sie unbedingt meine Einführung in die Befehle, wenn Sie Ihr Gedächtnis auffrischen möchten.)

TweenMaxTo wechselt das Zielobjekt von seiner aktuellen Position (oder Unschärfe oder Alpha oder…) an die neue Position (usw.), die Sie mit dem Vars-Objekt angeben. TweenMaxFrom macht das Gegenteil.

Wenn Sie mit der GreenSock Tweening-Plattform vertraut sind, können Sie auch die TweenLite- und TweenNano-Klassen entsprechend Ihren Anforderungen kapseln.


Objektcontainerbefehle anzeigen

Wie zuvor erwähnt, kann das Intro und Outro einer Szene sehr wahrscheinlich das Hinzufügen von Anzeigeobjekten zu einem Anzeigeobjektcontainer und das Entfernen der Objekte aus dem Container umfassen. Lassen Sie uns hier die addChild () - und removeChild () -Methoden in Befehle einkapseln.

 Paketbefehle.display Importbefehle.Befehl; import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; // Dieser Befehl kapselt die addChild () - Methode. Public class AddChild erweitert Command public var container: DisplayObjectContainer; public var displayObject: DisplayObject öffentliche Funktion AddChild (container: DisplayObjectContainer, displayObject: DisplayObject) this.container = container; this.displayObject = displayObject;  Überschreibe die geschützte Funktion execute (): void container.addChild (displayObject); Komplett(); 
 Paketbefehle.display Importbefehle.Befehl; import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; // Dieser Befehl kapselt die removeChild () - Methode. Public class RemoveChild erweitert Command public var container: DisplayObjectContainer; public var displayObject: DisplayObject öffentliche Funktion RemoveChild (Container: DisplayObjectContainer, DisplayObject: DisplayObject) this.container = container; this.displayObject = displayObject;  Überschreibe die geschützte Funktion execute (): void container.removeChild (displayObject); Komplett(); 

Ereignis-Listener-Befehle

Wir werden auch Befehle verwenden, um das Hinzufügen und Entfernen von Ereignis-Listenern zu erledigen. Lassen Sie uns die Methoden addEventListener () und removeEventListener () kapseln.

 Paket Befehle.Events Importbefehle.Befehl; import flash.events.IEventDispatcher; // Dieser Befehl kapselt die addEventListener () - Methode. public class AddEventListener erweitert Command public var dispatcher: IEventDispatcher; public var type: String; public var listenener: Funktion; öffentliche Funktion AddEventListener (Dispatcher: IEventDispatcher, Typ: String, Listener: Function) this.dispatcher = Dispatcher; this.type = type; this.listener = Listener;  Überschreiben der geschützten Funktion execute (): void dispatcher.addEventListener (type, listenener); Komplett(); 
 Paket Befehle.Events Importbefehle.Befehl; import flash.events.IEventDispatcher; // Dieser Befehl kapselt die removeEventListener () - Methode. public class RemoveEventListener erweitert Command public var dispatcher: IEventDispatcher; public var type: String; public var listenener: Funktion; Öffentliche Funktion RemoveEventListener (Dispatcher: IEventDispatcher, Typ: String, Listener: Function) this.dispatcher = Dispatcher; this.type = type; this.listener = Listener;  Überschreibe die geschützte Funktion execute (): void dispatcher.removeEventListener (type, listenener); Komplett(); 

Utility-Befehle

Schließlich benötigen wir einige Hilfsprogramme, um die Dinge zu vereinfachen. Der Befehl SetProperties legt die Eigenschaften eines Objekts anhand der Eigenschaftswerte eines anderen Objekts fest:

 Paket Befehle.utils Importbefehle.Befehl; // Mit diesem Befehl können Sie die Eigenschaften eines Objekts schnell und bequem festlegen. public class SetProperties erweitert Command public var target: Object; public var properties: Objekt; public function SetProperties (target: Object, Eigenschaften: Object) this.target = target; this.properties = Eigenschaften;  Überschreiben der geschützten Funktion execute (): void for (var key: String in properties) target [key] = properties [key];  Komplett(); 

Wir können es so verwenden:

var setProperties: SetProperties = new SetProperties (Ziel, x: 100, y: 230);

… Und die x- und y-Eigenschaften des Zielobjekts werden auf die angegebenen Werte gesetzt.

Der Dummy-Befehl macht einfach nichts und beendet die Befehlsausführung. Der Zweck dieses Befehls besteht darin, als "Platzhalter" zu dienen und wird später klar:

 Paket Befehle.utils Importbefehle.Befehl; // Dieser Befehl tut einfach nichts und beendet sich bei Ausführung. public class Dummy erweitert Command public function Dummy ()  überschreibt die protected function execute (): void complete (); 

Der Wait-Befehl wartet auf eine bestimmte Verzögerungszeit und schließt die Befehlsausführung ab, ohne etwas zu tun:

 Paket Befehle.utils Importbefehle.Befehl; public class Wait erweitert Befehl public function Wait (delay: Number = 0) super (delay);  Überschreibe die geschützte Funktion execute (): void complete (); 

Sie fragen sich vielleicht, warum wir einen Befehl benötigen, der einfach Zeit in Anspruch nimmt, wenn wir bereits einen Konstruktorparameter "delay" in der Basisklasse Command haben. Manchmal möchten wir Konstruktoren so entwerfen, dass sie nur Parameter enthalten, die wirklich etwas mit der spezifischen Funktionalität des Befehls zu tun haben. Wenn Sie die "Verzögerungszeit" als einen Parameter verwenden, wird die "Gleichförmigkeit" in Bezug auf Parameterzwecke unterbrochen. Also, anstatt den Code unten zu schreiben:

 neuer SerialCommand (0, neuer SomeFancyCommand (delay1, fancyParam11, fancyParam12, fancyParam31), neuer SomeFancyCommand (delay2, fancyParam21, fancyParam22, fancyParam23));

Wir könnten so etwas schreiben:

 neuer SerialCommand (0, neuer Wait (delay1), neuer SomeFancyCommand (fancyParam11, fancyParam12, fancyParam31), neuer Wait (delay2), neuer SomeFancyCommand (fancyParam21, fancyParam23));

Die "delay" -Parameter fallen in den SomeFancyCommand-Konstruktoren nicht mehr unnötig auf. Sie wurden jetzt zu den Wait-Befehlen verschoben, um die Dinge sauberer zu machen.


Das Scene Management Framework

Hier ist unsere Scene-Klasse, die ein einzelnes "Puzzleteil" darstellt. Die einzelnen Methoden werden in den Kommentaren erläutert. Diese Klasse ist praktisch eine "Skelett" -Klasse, da jede Methode entweder einen Dummy-Befehl erstellt oder nichts tut. Um die Dinge saftiger zu machen, müssen diese Methoden überschrieben werden. Erstellen Sie ein neues "Szenen" -Verzeichnis im Quellordner Ihres Projekts, um diese neuen Klassen zu speichern:

 Paketszenen Importbefehle.Befehl; import command.utils.Dummy; // Diese Klasse stellt eine Szene für eine vollständige öffentliche Flash-Anwendungsklasse dar. Scene // Eine Referenz auf den Szenenmanager, der diese Szene besitzt. intern var _sceneManager: SceneManager; Geschützte Endfunktion get sceneManager (): SceneManager return _sceneManager;  // erstellt den Intro-Befehl dieser Szene. public function createIntroCommand (): Command return new Dummy ();  // erstellt den Outro-Befehl dieser Szene. public function createOutroCommand (): Command return new Dummy ();  // Hier werden szenenbezogene Dinge behandelt, wenn die Szene auf public function onSceneSet (): void  gesetzt ist.

Und hier ist die SceneManager-Klasse, die Szenenübergänge behandelt, Details dazu auch in den Kommentaren. Beachten Sie, dass ich eine "Dummy-Proof-Variable" hinzugefügt habe, um zu verhindern, dass Übergänge durch unzeitiges Aufrufen der setScene () - Methode unterbrochen werden.

 Paketszenen Importbefehle.Befehl; import flash.events.Event; // Diese Klasse behandelt Szenenübergänge. Öffentliche Klasse SceneManager // eine Referenz auf die aktuelle Szene. private var _currentScene: Scene; // ein Verweis auf die Zielszene eines Übergangs private var _targetScene: Scene; // Dummy-sichere Variable private var _isInTransition: Boolean = false; public function SceneManager ()  public function setScene (scene: Scene): void // Wenn ein Übergang nicht abgeschlossen ist, ignorieren Sie den Methodenaufruf. if (_isInTransition) return; _targetScene = Szene; // die Dummy-Proof-Variable einschalten _isInTransition = true; // Prüfen Sie, ob dem Szenenmanager bereits eine Szene zugewiesen ist if (_currentScene) // Wenn ja, starten Sie den Outro der aktuellen Szene zuerst. var outroCommand: Command = _currentScene.createOutroCommand (); // und lausche auf das vollständige Ereignis des outro-Befehls outroCommand.addEventListener (Event.COMPLETE, onCurrentOutroComplete); outroCommand.start ();  else // Wenn nicht, starten Sie das Intro der Zielszene. gotoTargetScene ();  // wird aufgerufen, wenn der Outro-Befehl der aktuellen Szene abgeschlossen ist private Funktion onCurrentOutroComplete (e: Event): void Command (e.target) .removeEventListener (Event.COMPLETE, onCurrentOutroComplete); gotoTargetScene ();  private Funktion gotoTargetScene (): void // Setzt die Szenenmanagerreferenz der Zielszene auf _targetScene._sceneManager = this; var introCommand: Command = _targetScene.createIntroCommand (); // auf das vollständige Ereignis des Intro-Befehls der Zielszene warten introCommand.addEventListener (Event.COMPLETE, onTargetIntroComplete); introCommand.start ();  // wird aufgerufen, wenn der Intro-Befehl der Zielszene abgeschlossen ist private Funktion onTargetIntroComplete (e: Event): void Command (e.target) .removeEventListener (Event.COMPLETE, onTargetIntroComplete); // Entferne die Szenenmanagerreferenz der vorherigen Szene, wenn (_currentScene) _currentScene._sceneManager = null; // Setze die Zielszene als aktuelle Szene _currentScene = _targetScene; // die Dummy-Proof-Variable ausschalten _isInTransition = false; // und rufen die onSceneSet () -Methode auf _currentScene.onSceneSet (); 

Okay. Alles ist fertig und wir können loslegen. Es ist Zeit, eine tatsächliche Anwendung mit dem von uns erstellten Framework zu erstellen.


Schritt 1: Erstellen Sie ein Flash-Dokument

Öffnen Sie die Flash-IDE und erstellen Sie ein neues Flash-Dokument. Nennen Sie es "SceneTransitions" und erstellen Sie eine Dokumentenklasse mit demselben Namen. Sie können auch einen Hintergrund auf die Bühne setzen, wenn Sie möchten.


Schritt 2: Erstellen Sie einen Intro-Text

Erstellen Sie 4 Symbole mit Text und benennen Sie sie gemäß der folgenden Abbildung. Exportieren Sie in diesem Beispiel jedes Symbol für ActionScript mit einem Klassennamen, der mit dem Symbolnamen identisch ist.


Schritt 3: Erstellen Sie Szene 1

Erstellen Sie Symbole und benennen Sie sie wie in der folgenden Abbildung dargestellt. Gestalten Sie auch ihre Instanzen und benennen Sie sie wie gezeigt. Wählen Sie alle Instanzen aus und konvertieren Sie sie als Gruppe in ein anderes Symbol mit dem Namen "Scene1Sprite". Sie können dann Scene1Sprite von der Bühne löschen (aber nicht aus der Bibliothek)..


Schritt 4: Erstellen Sie Szene 2

Gehen Sie genauso vor wie im vorherigen Schritt, aber wählen Sie dieses Mal alle Instanzen aus und konvertieren Sie sie in ein Symbol mit dem Namen "Scene2Sprite".


Schritt 5: Die Dokumentenklasse

Die Dokumentenklasse ist überraschend einfach. Erstellen Sie einfach einen Szenenmanager und teilen Sie dem Manager mit, die aktuelle Szene in eine Intro-Szene zu setzen.

 package import flash.display.Sprite; Szenen importieren. Szenenmanager; public class SceneTransitions erweitert Sprite öffentliche Funktion SceneTransitions () var sceneManager: SceneManager = new SceneManager (); sceneManager.setScene (new IntroScene (this)); 

Schritt 6: Erstellen Sie die Intro-Szene

Die erste Szene, die wir für den Szenenmanager festlegen, ist eine Intro-Szene. Wie der Name vermuten lässt, ist diese Szene einfach ein Intro unserer Hauptszene (und nicht der Intro-Teil des "Puzzleteils" unserer Hauptszene). Der Intro-Befehl (erstellt aus der override-Methode createIntroCommand ()) dieser Intro-Szene verschiebt Instanzen von Symbolen (mit dem Befehl SetProperties) in die Mitte der Bühne, fügt sie dem Container hinzu und wertet sie von null auf 100% auf. und verwischt sie nacheinander auf null alpha. Dies wird durch die Verknüpfung aller einzelnen Befehle mit einem einzigen seriellen Befehl erreicht (wie Sie sich von Teil 1 merken sollten)..

Wenn der Intro-Befehl abgeschlossen ist, wird die onSceneSet () -Methode aufgerufen. Zu diesem Zeitpunkt ist die sceneManager -Eigenschaft verfügbar, und die setScene () -Methode kann aufgerufen werden, um die Szene zu wechseln. In der onSceneSet () - Methode wird die setScene () - Methode des Szenenmanagers aufgerufen, um zu Scene1 zu wechseln (eine Klasse, die wir im nächsten Schritt erstellen werden). Da wir createOutroCommand () nicht überschrieben haben, ist der Outro-Befehl der Intro-Szene ein Dummy-Befehl, der nichts bewirkt.

 Paket Importbefehle.Befehl; import command.display.AddChild; import command.display.RemoveChild; Befehle importieren.greensock.TweenMaxFrom; import command.greensock.TweenMaxTo; Befehle importieren.Szenen.SetScene; Befehle importieren.SerialCommand; import command.utils.SetProperties; import flash.display.DisplayObject; import flash.display.Sprite; import flash.filters.BlurFilter; Szenen importieren. Szene; public class IntroScene erweitert Scene // Konstante Parameter private static const ZOOM_IN_TIME: Number = 0.2; private statische const HOLD_TIME: Number = 0.3; private statische const BLUR_OUT_TIME: Number = 0.2; private statische const BLUR_AMOUNT: Number = 20; Privater Var-Container: Sprite; öffentliche Funktion IntroScene (container: Sprite) this.container = container;  Überschreiben Sie die öffentliche Funktion createIntroCommand (): Command var blur: BlurFilter = new BlurFilter (BLUR_AMOUNT, BLUR_AMOUNT, 2); // Symbolinstanzen var text1: DisplayObject = new IntroText1 (); var text2: DisplayObject = new IntroText2 (); var text3: DisplayObject = new IntroText3 (); var text4: DisplayObject = new IntroText4 (); // Dies ist der serielle Befehl, der die Dinge miteinander verbindet. var Befehl: Befehl = Neuer SerialCommand (0, // "THIS", neue SetProperties (Text1, X: 320, Y: 200), neues AddChild (Container, Text1), new TweenMaxFrom (text1, ZOOM_IN_TIME, scaleX: 0, scaleY: 0), neues TweenMaxTo (text1, BLUR_OUT_TIME, delay: HOLD_TIME, alpha: 0, blurFilter: blur), // "IS" neue SetProperties (Text2, x: 320, y: 200), neue AddChild (Container, Text2), neue TweenMaxFrom (Text2, ZOOM_IN_TIME, scaleX: 0, scaleY: 0), neue TweenMaxTo (text2, BLUR_OUT_TIME, delay: HOLD_TIME, alpha: 0, blurFilter: blur), neue RemoveChild (Container, Text2), // "AN" neue SetProperties (Text3, x: 320, y: 200), neue AddChild (Container) , text3), neuer TweenMaxFrom (text3, ZOOM_IN_TIME, scaleX: 0, scaleY: 0), neuer TweenMaxTo (text3, BLUR_OUT_TIME, delay: HOLD_TIME, alpha: 0, blurFilter: blur), neuer RemoveChild (container, text3) ), // "INTRO" neue SetProperties (text4, x: 320, y: 200), neues AddChild (Container, Text4), neues TweenMaxFrom (Text4, ZOOM_IN_TIM) E, scaleX: 0, scaleY: 0), neues TweenMaxTo (text4, BLUR_OUT_TIME, delay: HOLD_TIME, alpha: 0, blurFilter: blur), neues RemoveChild (container, text4),); Rückkehrbefehl;  public function onSceneSet () überschreiben: void // Wenn die Szene gesetzt ist, gehen Sie direkt zur Szene 1 sceneManager.setScene (new Scene1 (container)); 

Sie können den Wert der Konstanten anpassen, um die Tweening-Effekte zu ändern.


Schritt 7: Erstellen Sie Szene1

Schauen wir uns jetzt die Scene1-Klasse an. Die Textfelder werden nacheinander in die Position getweent; Die Schaltflächen "intro_btn" und "scene2_btn" werden bei Mausklick-Ereignis-Listenern registriert, nachdem sie in Position getweet wurden. Dies wird durch Verketten der Befehle für das Tweening und Hinzufügen von Listenern mit einem seriellen Befehl erreicht.

Erwähnenswert ist auch der Befehl AddChild, mit dem Scene1Sprite zum Container hinzugefügt wird. Nach einem Wait-Befehl, der auf einen Frame wartet, wird er in Reihe verkettet. Weil die TweenMax-Klasse alle Anzeigeobjekte im nächsten Frame aktualisiert nach dem Beim Aufruf der TweenMax.from () -Methode kann es vorkommen, dass Objekte an ihren endgültigen Stellen kurz vor dem Beginn des Tweenings einen kurzen "Einblick" erhalten. Der Befehl Wait hat hier den Zweck, TweenMax genügend Zeit zu geben, um Objekte an ihre richtigen Startpositionen zu verschieben.

 Paket Importbefehle.Befehl; import command.display.AddChild; import command.display.RemoveChild; import command.events.AddEventListener; import command.events.RemoveEventListener; Befehle importieren.greensock.TweenMaxFrom; import command.greensock.TweenMaxTo; Befehle importieren.ParallelCommand; Befehle importieren.SerialCommand; import command.utils.SetProperties; import command.utils.Wait; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.filters.BlurFilter; Szenen importieren. Szene; public class Scene1 erweitert Scene // Konstante Parameter private static const IN_TIME: Number = 0.4; private statische const OUT_TIME: Number = 0.2; private statische const DELAY_TIME: Number = 0.2; private statische const BLUR_AMOUNT: Number = 20; Privater Var-Container: Sprite; private var ss: Scene1Sprite; private var blur: BlurFilter; öffentliche Funktion Szene1 (Container: Sprite) this.container = Container; ss = new Scene1Sprite ();  Überschreiben Sie die öffentliche Funktion createIntroCommand (): Command var command: Command = new ParallelCommand (0, // "THIS" new TweenMaxFrom (ss.text1_mc, IN_TIME, x: -400), // "IS" new TweenMaxFrom ( ss.text2_mc, IN_TIME, y: -250, delay: DELAY_TIME), // "SCENE" neuer TweenMaxFrom (ss.text3_mc, IN_TIME, y: 250, delay: DELAY_TIME * 2), // "1" new TweenMaxFrom (ss.text4_mc, IN_TIME, x: 400, delay: DELAY_TIME * 3), // Intro-Schaltfläche neuer SerialCommand (0, neuer TweenMaxFrom (ss.intro_btn, IN_TIME, y: 250, delay: DELAY_TIME * 4) ), neuer AddEventListener (ss.intro_btn, MouseEvent.CLICK, replayIntro)), // Szene 2-Schaltfläche neuer SerialCommand (0, neuer TweenMaxFrom (ss.scene2_btn, IN_TIME, y: 250, delay: DELAY_TIME * 5), new AddEventListener (ss.scene2_btn, MouseEvent.CLICK, gotoScene2)), // verschieben Sie das Sprite für Szene 1 in die Mitte des Containers. Neue SetProperties (ss, x: 300, y: 200), // fügen Sie die Szene 1 hinzu sprite in den Container // Warten auf einen Frame, damit Dinge an den richtigen Stellen verschoben werden können. Neuer SerialCommand (0, neuer Wait (1 / containe.) r.stage.frameRate), neues AddChild (Container, SS)))); Rückkehrbefehl;  Überschreiben Sie die öffentliche Funktion createOutroCommand (): Command var blur: BlurFilter = new BlurFilter (BLUR_AMOUNT, BLUR_AMOUNT, 3); Befehl var: Befehl = neuer ParallelCommand (0, // entferne Anzeigeobjekte neuen SerialCommand (0, // "THIS", neues TweenMaxTo (ss.text1_mc, OUT_TIME, alpha: 0, blurFilter: blur), // "IS" neues TweenMaxTo (ss.text2_mc, OUT_TIME, alpha: 0, blurFilter: blur), // "SCENE" neues TweenMaxTo (ss.text3_mc, OUT_TIME, alpha: 0, blurFilter: blur), // "1" neues TweenMaxTo (ss.text4_mc, OUT_TIME, alpha: 0, blurFilter: blur), // Intro-Schaltfläche neues TweenMaxTo (ss.intro_btn, OUT_TIME, alpha: 0, blurFilter: blur), // Szene 2 neu TweenMaxTo (ss.scene2_btn, OUT_TIME, alpha: 0, blurFilter: blur), // Szene 1 entfernen Sprite new RemoveChild (container, ss)), // Event-Listener entfernen new RemoveEventListener (ss.intro_btn, MouseEvent.CLICK, replayIntro), neuer RemoveEventListener (ss.scene2_btn, MouseEvent.CLICK, gotoScene2)); Rückkehrbefehl;  private Funktion replayIntro (e: Event): void sceneManager.setScene (new IntroScene (container));  private Funktion gotoScene2 (e: Event): void sceneManager.setScene (new Scene2 (Container)); 

Schritt 8: Erstellen Sie Szene2

Die Scene2-Klasse sieht ziemlich aus wie Scene1; obwohl etwas Text geändert wurde:

 Paket Importbefehle.Befehl; import command.display.AddChild; import command.display.RemoveChild; import command.events.AddEventListener; import command.events.RemoveEventListener; Befehle importieren.greensock.TweenMaxFrom; import command.greensock.TweenMaxTo; Befehle importieren.ParallelCommand; Befehle importieren.SerialCommand; import command.utils.SetProperties; import command.utils.Wait; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.filters.BlurFilter; Szenen importieren. Szene; public class Scene2 erweitert Scene // Konstante Parameter private static const IN_TIME: Number = 0.4; private statische const OUT_TIME: Number = 0.2; private statische const DELAY_TIME: Number = 0.2; private statische const BLUR_AMOUNT: Number = 20; Privater Var-Container: Sprite; private var ss: Scene2Sprite; private var blur: BlurFilter; öffentliche Funktion Scene2 (Container: Sprite) this.container = container; ss = new Scene2Sprite ();  Überschreiben Sie die öffentliche Funktion createIntroCommand (): Command var command: Command = new ParallelCommand (0, // "... AND" new TweenMaxFrom (ss.text1_mc, IN_TIME, x: -400), // "THIS IS" new TweenMaxFrom (ss.text2_mc, IN_TIME, y: -250, delay: DELAY_TIME), // "SCENE" neuer TweenMaxFrom (ss.text3_mc, IN_TIME, y: 250, delay: DELAY_TIME * 2), // " 2 "new TweenMaxFrom (ss.text4_mc, IN_TIME, x: 400, delay: DELAY_TIME * 3), // Intro-Schaltfläche neuer SerialCommand (0, neuer TweenMaxFrom (ss.intro_btn, IN_TIME, y: 250, delay: DELAY_TIME) * 4), neuer AddEventListener (ss.intro_btn, MouseEvent.CLICK, replayIntro)), // Szene 1-Taster neuer SerialCommand (0, neuer TweenMaxFrom (ss.scene1_btn, IN_TIME, y: 250, delay: DELAY_TIME * 5 ), neuer AddEventListener (ss.scene1_btn, MouseEvent.CLICK, gotoScene1)), // Verschieben des Sprites der Szene 2 in die Mitte des Containers, neue SetProperties (ss, x: 300, y: 200), // fügen Sie hinzu Szene 2 Sprite in den Container // Warten auf einen Frame, damit Objekte an die richtigen Stellen verschoben werden können. Neuer SerialCommand (0, neuer Wait (1 / container.stage.frameRate), new AddChild (container, ss))); Rückkehrbefehl;  Überschreiben Sie die öffentliche Funktion createOutroCommand (): Command var blur: BlurFilter = new BlurFilter (BLUR_AMOUNT, BLUR_AMOUNT, 3); Befehl var: Befehl = neuer ParallelCommand (0, // entferne Anzeigeobjekte neuen SerialCommand (0, // "THIS", neues TweenMaxTo (ss.text1_mc, OUT_TIME, alpha: 0, blurFilter: blur), // "IS" neues TweenMaxTo (ss.text2_mc, OUT_TIME, alpha: 0, blurFilter: blur), // "SCENE" neues TweenMaxTo (ss.text3_mc, OUT_TIME, alpha: 0, blurFilter: blur), // "2" neues TweenMaxTo (ss.text4_mc, OUT_TIME, alpha: 0, blurFilter: blur), // Intro-Schaltfläche neues TweenMaxTo (ss.intro_btn, OUT_TIME, alpha: 0, blurFilter: blur), // Szene 1 neu TweenMaxTo (ss.scene1_btn, OUT_TIME, alpha: 0, blurFilter: blur), // Szene 1 entfernen Sprite new RemoveChild (container, ss)), // Event-Listener entfernen new RemoveEventListener (ss.intro_btn, MouseEvent.CLICK, replayIntro), neuer RemoveEventListener (ss.scene1_btn, MouseEvent.CLICK, gotoScene1)); Rückkehrbefehl;  private Funktion replayIntro (e: Event): void sceneManager.setScene (new IntroScene (container));  private Funktion gotoScene1 (e: Event): void sceneManager.setScene (neue Szene1 (Container)); 

Testen Sie den Film

Das stimmt, wir sind endlich fertig! Drücken Sie in der Flash-IDE STRG + EINGABETASTE, um den Film zu testen und die glatten und nahtlosen Übergänge zwischen den Szenen anzuzeigen.


Fazit

In diesem Lernprogramm haben wir unsere eigenen Frameworks für das Befehls- und Szenenmanagement entwickelt. Wir haben eine Menge Code durchlaufen, aber es lohnt sich absolut. Nun, da wir diese Frameworks zur Hand haben, wird das Szenenmanagement mit leicht verständlichem und wartungsfähigem Code durchgeführt. Jede Flash-Anwendung kann in Szenen unterteilt werden, und jede Szene besteht aus Intro- und Outro-Befehlen. Anweisungen werden in Befehle gekapselt, was zu einem einheitlichen "Code-Erscheinungsbild" führt, das es uns ermöglicht, Szenen-Intro und Outro auf sehr hohem Niveau zu verwalten.

Ich hoffe es hat euch gefallen, danke fürs Lesen!