Før vi begynner å bygge scenen rammeverket, la oss først opprette noen flere kommando klasser som skal senere brukes i denne opplæringen. Du kan bare fokusere på overstyres utføre () metoder for følgende kommando klasser, som er den viktigste delen av disse klassene.

Uten tvil, GreenSock tweening Platform er en av de beste open-source tweening rammeverk der ute. Sceneoverganger som regel innebære masse tweenings, og GreenSock Tweening Platform har alltid vært mitt første valg når det gjelder å skape tweens. Vi kommer til å kapsle dette rammeverket inn kommandoen klasser å integrere det med vår kommando rammeverk. Last ned TweenMax bibliotek og installere den.

Vi skal bruke til () og fra () metoder fra TweenMax klassen. Den TweenMax klassen gir en måte å håndtere gjennomføringen av en tween ved å påberope en funksjon referert av den valgfrie "onComplete" eiendom i "vars" parameter. Vi vil tilordne kommandoen fullstendige () metode for denne eiendommen, slik at fullstendig () metoden startes når tween er gjort. Nedenfor er koden for kommandoene innkapsle disse to metodene. Opprett en ny katalog som heter "greensock" inne i "kommandoer" katalogen du har laget i den første delen av denne opplæringen, og lagre disse klassene som henholdsvis TweenMaxTo.as og TweenMaxFrom.as.
Pakke commands.greensock {import com.greensock .TweenMax; import commands.Command; //denne kommandoen innkapsler TweenMax.to () metoden public class TweenMaxTo strekker Command {public Var target: Object; offentlig Var varighet: Number; offentlig Var vars: Object; offentlig funksjon TweenMaxTo (mål: Object, varighet: Antall, vars: Object) {this.target = målet; this.duration = varighet; this.vars = vars; } Ride beskyttet funksjon utføre (): void {//fortelle TweenMax å påkalle kommandoen fullstendige () -metoden når tweening gjøres vars.onComplete = komplett; TweenMax.to (mål, varighet, vars); }}} Pakken commands.greensock {import com.greensock.TweenMax; import commands.Command; //denne kommandoen innkapsler TweenMax.from () metoden public class TweenMaxFrom strekker Command {public Var target: Object; offentlig Var varighet: Number; offentlig Var vars: Object; offentlig funksjon TweenMaxFrom (mål: Object, varighet: Antall, vars: Object) {this.target = målet; this.duration = varighet; this.vars = vars; } Ride beskyttet funksjon utføre (): void {//fortelle TweenMax å påkalle kommandoen fullstendige () -metoden når tweening gjøres vars.onComplete = komplett; TweenMax.from (mål, varighet, vars); }}}

(Pass på å re-lese min introduksjon til kommandoer hvis du trenger å friske opp hukommelsen.)

TweenMaxTo vil tween målet objektet fra sin nåværende posisjon (eller uskarphet, eller alfa, eller ...) til den nye posisjonen (osv) som du angir med vars objekt. TweenMaxFrom gjør det motsatte.

Hvis du er kjent nok med GreenSock Tweening Platform, kan du også ønsker å kapsle TweenLite og TweenNano klasser for å passe dine behov.

Som tidligere nevnt kan intro og outro av en scene svært sannsynlig innebære å legge visningsobjekter til en skjerm objekt container og fjerne objektene fra beholderen. Så her la oss kapsle addChild () og removeChild () metoder i kommandoer
pakke commands.display {import commands.Command.; import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; //Denne kommandoen innkapsler addChild () metoden public class AddChild strekker Command {public Var container: Display; offentlig Var Displayobject: Displayobject offentlig funksjon AddChild (container: Display, Displayobject: Displayobject) {this.container = beholder; this.displayObject = Displayobject; } Ride beskyttet funksjon utføre (): void {container.addChild (Displayobject); fullstendig(); }}} Pakken commands.display {import commands.Command; import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; //Denne kommandoen innkapsler removeChild () metoden public class removeChild strekker Command {public Var container: Display; offentlig Var Displayobject: Displayobject offentlig funksjon removeChild (container: Display, Displayobject: Displayobject) {this.container = beholder; this.displayObject = Displayobject; } Ride beskyttet funksjon utføre (): void {container.removeChild (Displayobject); fullstendig(); }}}

Vi vil også bruke kommandoer for å håndtere legge til og fjerne fra hendelsen lyttere, så la oss kapsle addEventListener () og removeEventListener () metoder.
pakke commands.events {import commands.Command; import flash.events.IEventDispatcher; //denne kommandoen innkapsler addEventListener () metoden public class addEventListener strekker Command {public Var sentralen: IEventDispatcher; offentlig Var Type: String; offentlig Var lytteren: Function; offentlig funksjon addEventListener (sentralen: IEventDispatcher, type: String, lytteren: Function) {this.dispatcher = sentralen; this.type = type; this.listener = lytteren; } Ride beskyttet funksjon utføre (): void {dispatcher.addEventListener (type, lytteren); fullstendig(); }}} Pakke commands.events {import commands.Command; import flash.events.IEventDispatcher; //denne kommandoen innkapsler removeEventListener () metoden public class removeEventListener strekker Command {public Var sentralen: IEventDispatcher; offentlig Var Type: String; offentlig Var lytteren: Function; offentlig funksjon removeEventListener (sentralen: IEventDispatcher, type: String, lytteren: Function) {this.dispatcher = sentralen; this.type = type; this.listener = lytteren; } Ride beskyttet funksjon utføre (): void {dispatcher.removeEventListener (type, lytteren); fullstendig(); }}}

Til slutt vil vi trenge noen verktøy kommandoer for å gjøre ting enklere. Den SetProperties kommandoen setter egenskapene til et objekt fra et annet objekt eiendomsverdier:
pakken commands.utils {import commands.Command; //denne kommandoen setter egenskapene til et objekt på en rask og enkel måte offentlig klasse SetProperties strekker Command {public Var target: Object; offentlige Var egenskaper: Object; offentlig funksjon SetProperties (target: Object, egenskaper: Object) {this.target = målet; this.properties = egenskaper; } Ride beskyttet funksjon utføre (): void {for (var nøkkelen: String i eiendommer) {target [nøkkel] = eiendommer [key]; }\t\t\tfullstendig(); }}}

Vi kan bruke det slik:
Var setProperties: SetProperties = nye SetProperties (target, {x: 100, y: 230});

... og det vil sette x og y egenskaper målobjektet til de verdiene som er angitt.

Dummy kommandoen rett og slett gjør ingenting, og fullfører kommandoen kjøres. Hensikten med denne kommandoen er å fungere som en "plassholder" og skal bli klart senere:
pakke commands.utils {import commands.Command; //denne kommandoen rett og slett ikke gjør noe, og fullfører seg selv ved gjennomføring public class Dummy strekker Command {offentlig funksjon Dummy () {} overstyring beskyttet funksjon utføre (): void {komplett (); }}}

Ventetiden kommandoen venter på en viss mengde forsinkelse og deretter fullfører kommandoen kjøres uten å gjøre noe:
pakke commands.utils {import commands.Command; public class Vent strekker Command {offentlig funksjon Vent (forsinkelse: Number = 0) {super (forsinkelse); } Ride beskyttet funksjon utføre (): void {komplett (); }}}

Du lurer kanskje på hvorfor vi trenger en kommando som bare opptar tiden hvis vi allerede har en "forsinkelse" konstruktør parameter i basen Command klasse. Noen ganger ønsker vi å designe konstruktører å bare ha parametre som egentlig ikke har noe å gjøre med kommandoens spesifikk funksjonalitet, og med "forsinkelse" tid som en parameter blant dem er slags avbryte "ensartethet" i form av parameter formål. Så i stedet for å skrive inn koden under:
ny SerialCommand (0, ny SomeFancyCommand (delay1, fancyParam11, fancyParam12, fancyParam31), ny SomeFancyCommand (delay2, fancyParam21, fancyParam22, fancyParam23));

Vi kunne skrive noe sånt som dette :
ny SerialCommand (0, ny Vent (delay1), ny SomeFancyCommand (fancyParam11, fancyParam12, fancyParam31), ny Vent (delay2), ny SomeFancyCommand (fancyParam21, fancyParam22, fancyParam23));

"forsinkelse" parametere ikke lenger unødvendig fange øynene dine i SomeFancyCommand konstruktører. De har nå blitt flyttet til Vent kommandoer for å gjøre ting renere.

Her er vår Scene klasse, som representerer et enkelt "puslespillbrikke". Hva hver metode gjør er forklart i kommentarfeltet. Denne klassen er ganske mye et "skjelett" klasse, siden hver metode enten skaper en dummy kommando eller gjør ingenting. For å få ting saftigere, disse metodene må overstyres. Opprett en ny "scener" katalog i prosjektets kilde mappe for å lagre disse nye klasser:
pakken scener {import commands.Command; import commands.utils.Dummy; //denne klassen representerer en scene for en komplett Flash søknad public class Scene {//en referanse til scenen lederen eie denne scenen intern Var _sceneManager: SceneManager; beskyttet endelige funksjon få sceneManager (): SceneManager {return _sceneManager; } //Skaper introen kommandoen over denne scenen offentlig funksjon createIntroCommand (): Command {return ny Dummy (); } //Skaper outro kommandoen over denne scenen offentlig funksjon createOutroCommand (): Command {return ny Dummy (); } //Håndtere scene-relaterte ting her når det duket offentlig funksjon onSceneSet (): void {}}}

Og her er den SceneManager klasse som håndterer overganger, detaljer også forklart i kommentarfeltet. Legg merke til at jeg har lagt til en "dummy-proof variabel" for å beskytte overganger fra å bli ødelagt av utidige påkalling til setScene () -metoden
pakke scener {import commands.Command.; import flash.events.Event; //denne klassen håndterer sceneoverganger public class SceneManager {//en referanse til den aktuelle scenen private Var _currentScene: Scene; //en referanse til målet åstedet for en overgang privat Var _targetScene: Scene; //dummy-proof variable private Var _isInTransition: Boolean = false; offentlig funksjon SceneManager () {} offentlig funksjon setScene (scene: Scene): void {//hvis en overgang ikke er ferdig, ignorere metodekallet if (_isInTransition) tilbake; _targetScene = scene; //slå på dummy-proof variabel _isInTransition = true; //sjekke om en scene allerede er tilordnet til scenen manager hvis (_currentScene) {//hvis ja, starter outro av dagens scene første Var outroCommand: Command = _currentScene.createOutroCommand (); //og lytte for hele arrangementet av outro kommandoen outroCommand.addEventListener (Event.COMPLETE, onCurrentOutroComplete); outroCommand.start (); } Else {//hvis ikke, starter introen av målet scene gotoTargetScene (); }} //Påberopes når outro kommando av den aktuelle scenen er fullstendig privat funksjon onCurrentOutroComplete (e: Hendelses): void {Kommando (e.target) .removeEventListener (Event.COMPLETE, onCurrentOutroComplete); gotoTargetScene (); } Private funksjon gotoTargetScene (): void {//duket leder referanse til målet scene til dette _targetScene._sceneManager = dette; Var introCommand: Command = _targetScene.createIntroCommand (); //lytte for hele arrangementet av introen kommandoen over målet scene introCommand.addEventListener (Event.COMPLETE, onTargetIntroComplete); introCommand.start (); } //Påberopes når introen kommando av målet scenen er fullstendig privat funksjon onTargetIntroComplete (e: Hendelses): void {Kommando (e.target) .removeEventListener (Event.COMPLETE, onTargetIntroComplete); //fjerne scenen leder referanse til forrige scene if (_currentScene) _currentScene._sceneManager = null; //angi målet scenen som dagens scene _currentScene = _targetScene; //slå av dummy-proof variabel _isInTransition = false; //og påkalle onSceneSet () -metoden _currentScene.onSceneSet (); }}}

OK. Alt er satt, og vi er klar til å gå. Det er på tide å lage en faktisk søknad med rammene vi har bygget

Åpne Flash IDE og opprette en ny Flash-dokument. Name it "SceneTransitions" og lage et dokument klassen med samme navn. Du kan også plassere en bakgrunn på scenen hvis du liker

Lag 4 symboler med tekst og navngi dem i henhold til følgende bilde. . Gjennom dette eksempelet eksport hvert symbol for Action med en klasse navn som er det samme som sitt symbol navn

Opprett symboler og navngi dem som vist i følgende bilde. Også layout sine forekomster og navngi dem som vist. Velg alle instanser, og konvertere dem, som en gruppe, til et annet symbol, som heter "Scene1Sprite." Du kan deretter slette Scene1Sprite fra scenen (men ikke fra biblioteket)

Gjør akkurat det samme som forrige trinn, men denne gangen velge alle instanser og konvertere dem til et symbol som heter

Dokumentet klassen er overraskende enkelt. Bare lage en scene manager og fortelle sjefen for å sette gjeldende scene til en intro scenen
pakke {import flash.display.Sprite.; import scenes.SceneManager; public class SceneTransitions strekker Sprite {offentlig funksjon SceneTransitions () {var sceneManager: SceneManager = new SceneManager (); sceneManager.setScene (ny IntroScene (denne)); }}}

Den første scenen vi satt for scenen leder er en intro scenen. Som navnet antyder, er denne scenen bare en intro til vår hovedscenen (snarere enn å være intro del av vår hovedscenen er "puslespill brikke"). Introen kommandoen (opprettet fra den overstyring createIntroCommand () metode) i denne intro scenen beveger forekomster av symboler til midten av scenen (ved SetProperties kommandoen), legger dem til beholderen, Tweens dem fra null skala til 100% skala, og tåkelegger dem ut til null alpha, en-etter-en. Dette oppnås ved å knytte alle de separate kommandoer sammen med et enkelt serie kommando (som du bør huske fra Part One).

Når introen kommandoen er fullført, onSceneSet () metoden er påberopt, og på dette punktet den sceneManager eiendommen er tilgjengelig, og dens setScene () metoden kan påberopes å bytte scene. I onSceneSet () -metoden, er scenen lederens setScene () -metoden påberopes for å endre til Scene1 (en klasse vi vil skape i neste trinn). Som vi ikke overstyre createOutroCommand (), er outro kommandoen over intro scenen en dummy-kommandoen, som gjør ingenting
pakke {import commands.Command.; import commands.display.AddChild; import commands.display.RemoveChild; import commands.greensock.TweenMaxFrom; import commands.greensock.TweenMaxTo; import commands.scenes.SetScene; import commands.SerialCommand; import commands.utils.SetProperties; import flash.display.DisplayObject; import flash.display.Sprite; import flash.filters.BlurFilter; import scenes.Scene; public class IntroScene strekker Scene {//konstant parametere private static konst ZOOM_IN_TIME: Number = 0,2; private static konst HOLD_TIME: Number = 0,3; private static konst BLUR_OUT_TIME: Number = 0,2; private static konst BLUR_AMOUNT: Number = 20; private Var container: Sprite; offentlig funksjon IntroScene (container: Sprite) {this.container = beholder; } Overstyre offentlig funksjon createIntroCommand (): Command {var uskarphet: BlurFilter = new BlurFilter (BLUR_AMOUNT, BLUR_AMOUNT, 2); //symbol tilfeller Var text1: Displayobject = new IntroText1 (); Var text2: Displayobject = new IntroText2 (); Var text3: Displayobject = new IntroText3 (); Var text4: Displayobject = new IntroText4 (); //dette er serie kommando som knytter ting sammen Var kommando: Command = new SerialCommand (0, //"dette" nye SetProperties (text1, {x: 320, y: 200}), ny AddChild (container, text1), ny TweenMaxFrom (text1, ZOOM_IN_TIME, {scaleX: 0, Scaley: 0}), ny TweenMaxTo (text1, BLUR_OUT_TIME, {forsinkelse: HOLD_TIME, alpha: 0, blurFilter: blur}), ny removeChild (container, text1), //"ER" nye SetProperties (text2, {x: 320, y: 200}), ny AddChild (container, text2), ny TweenMaxFrom (text2, ZOOM_IN_TIME, {scaleX: 0, Scaley: 0}), ny TweenMaxTo (text2, BLUR_OUT_TIME, {forsinkelse: HOLD_TIME, alpha: 0, blurFilter: blur}), ny removeChild (container, text2), //"AN" nye SetProperties (text3, {x: 320, y: 200}), ny AddChild (container , text3), ny TweenMaxFrom (text3, ZOOM_IN_TIME, {scaleX: 0, Scaley: 0}), ny TweenMaxTo (text3, BLUR_OUT_TIME, {forsinkelse: HOLD_TIME, alpha: 0, blurFilter: blur}), ny removeChild (container, text3 ), //"INTRO" nye SetProperties (text4, {x: 320, y: 200}), ny AddChild (container, text4), ny TweenMaxFrom (text4, ZOOM_IN_TIME, {scaleX: 0, Scaley: 0}), ny TweenMaxTo (text4, BLUR_OUT_TIME, {forsinkelse: HOLD_TIME, alpha: 0, blurFilter: blur}), ny removeChild (container, text4)); tilbake kommandoen; } Overstyre offentlig funksjon onSceneSet (): void {//når scenen er satt, gå direkte til scene 1 sceneManager.setScene (ny Scene1 (container)); }}}

Du kan justere verdien av consts å endre tweening effekter

La oss nå se på Scene1 klassen. Tekstfeltene er tweened på plass en etter en; de "intro_btn" og "scene2_btn" knappene er registrert med museklikk hendelsen lyttere etter å ha blitt tweened på plass, oppnås ved kjeding sammen kommandoene for tweening og legge lyttere med et serie kommando.

En annen ting verdt å nevne er den AddChild kommando som legger Scene1Sprite til beholderen. Det er sammenkjedet i serien etter en vente kommando som venter på en ramme. Fordi TweenMax klassen oppdaterer alle visningsobjekter i neste ramme etter
kallet til TweenMax.from () metoden, noen ganger kan du se en rask "glimt" av objekter i sine endelige steder, før de tweening starter . Formålet med Wait kommandoen her er å gi TweenMax nok tid til å flytte objekter inn i deres riktige start- steder
pakke {import commands.Command.; import commands.display.AddChild; import commands.display.RemoveChild; import commands.events.AddEventListener; import commands.events.RemoveEventListener; import commands.greensock.TweenMaxFrom; import commands.greensock.TweenMaxTo; import commands.ParallelCommand; import commands.SerialCommand; import commands.utils.SetProperties; import commands.utils.Wait; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.filters.BlurFilter; import scenes.Scene; public class Scene1 strekker Scene {//konstant parametere private static konst IN_TIME: Number = 0,4; private static konst OUT_TIME: Number = 0,2; private static konst DELAY_TIME: Number = 0,2; private static konst BLUR_AMOUNT: Number = 20; private Var container: Sprite; private Var ss: Scene1Sprite; private Var uskarphet: BlurFilter; offentlig funksjon Scene1 (container: Sprite) {this.container = beholder; ss = new Scene1Sprite (); } Overstyre offentlig funksjon createIntroCommand (): Command {var kommandoen: Command = new ParallelCommand (0, //"dette" nye TweenMaxFrom (ss.text1_mc, IN_TIME, {x: -400}), //"ER" nye TweenMaxFrom ( ss.text2_mc, IN_TIME, {y: -250, delay: DELAY_TIME}), //"SCENE" nye TweenMaxFrom (ss.text3_mc, IN_TIME, {y: 250, delay: DELAY_TIME * 2}), //"1" ny TweenMaxFrom (ss.text4_mc, IN_TIME, {x: 400, delay: DELAY_TIME * 3}), //intro knappen nye SerialCommand (0, ny TweenMaxFrom (ss.intro_btn, IN_TIME, {y: 250, delay: DELAY_TIME * 4 }), ny addEventListener (ss.intro_btn, MouseEvent.CLICK, replayIntro)), //scene 2-knappen nye SerialCommand (0, ny TweenMaxFrom (ss.scene2_btn, IN_TIME, {y: 250, delay: DELAY_TIME * 5}), ny addEventListener (ss.scene2_btn, MouseEvent.CLICK, gotoScene2)), //flytte scenen en sprite til sentrum av container nye SetProperties (ss, {x: 300, y: 200}), //tilsett scene 1 sprite til beholderen //vente på en ramme for å la ting å bli flyttet inn riktige stedene ny SerialCommand (0, ny Vent (1 /container.stage.frameRate), ny AddChild (container, ss))); tilbake kommandoen; } Overstyre offentlig funksjon createOutroCommand (): Command {var uskarphet: BlurFilter = new BlurFilter (BLUR_AMOUNT, BLUR_AMOUNT, 3); Var kommando: Command = new ParallelCommand (0, //fjerne visningsobjekter ny SerialCommand (0, //"dette" nye TweenMaxTo (ss.text1_mc, OUT_TIME, {alfa: 0, blurFilter: blur}), //"ER" ny TweenMaxTo (ss.text2_mc, OUT_TIME, {alfa: 0, blurFilter: blur}), //"SCENE" nye TweenMaxTo (ss.text3_mc, OUT_TIME, {alfa: 0, blurFilter: blur}), //"1" ny TweenMaxTo (ss.text4_mc, OUT_TIME, {alfa: 0, blurFilter: blur}), //intro knappen nye TweenMaxTo (ss.intro_btn, OUT_TIME, {alfa: 0, blurFilter: blur}), //scene 2-knappen nytt TweenMaxTo (ss.scene2_btn, OUT_TIME, {alfa: 0, blurFilter: blur}), //fjerne scene en sprite ny removeChild (container, ss)), //fjerne hendelsen lyttere ny removeEventListener (ss.intro_btn, MouseEvent.CLICK, replayIntro), ny removeEventListener (ss.scene2_btn, MouseEvent.CLICK, gotoScene2)); tilbake kommandoen; } Private funksjon replayIntro (e: Hendelses): void {sceneManager.setScene (ny IntroScene (container)); } Private funksjon gotoScene2 (e: Hendelses): void {sceneManager.setScene (ny Scene2 (container)); }}}