Share
Två gånger i månaden besöker vi några av våra läsares favoritinlägg från hela Activetuts + historia. Denna handledning publicerades först i mars 2010 och är den första delen av en serie.
Enkel, underhållbar kod är vacker. Men när vi har en sekvens av åtgärder som behöver utlösa varandra kan vår kod bli rörig, vilket gör det omöjligt att ändra senare. De Kommando Mönster håller saker rena.
I denna handledning visar jag dig hur man skapar en minimalistisk AS3-kommandoram som kan utföra åtgärder i följd, parallellt eller med fördröjning. Du lutar hur du använder denna ram för att skapa en komplex effekt med enkel och ren kod.
Encapsulating instruktioner i "kommandon" är ett populärt programmeringsförfarande för att förenkla saker - kommandomönstret är faktiskt ett av de mest använda designmönstren i objektorienterad programmering. I grund och botten implementeras kommandokonceptet genom att skapa kommandoklasser, varje klass representerar en typ av kommando. I resten av handledningen, när jag hänvisar till "ett kommando", menar jag "ett kommandobjekt".
Du kan tänka på ett kommando som en knapp på fjärrkontrollen. Varje knapp gör något annorlunda, men de används alla på samma sätt: du trycker på den, då börjar magiken. Om du slår på TV: n, byter kanaler, eller justerar volymen, kan dessa funktioner göras genom att bara trycka på en knapp.
Bild med tillstånd av freedigitalphotos.net
Begreppet kommandon är detsamma. En kommandos underliggande instruktion är precis som en fjärrkontrollsknapps funktion. Du kan inkapsla olika instruktioner i kommandon, t.ex. att spåra ett enkelt meddelande, flytta ett objekt från ett ställe till ett annat, eller byta visningsobjektets synlighet. När inkapslingen är klar kan dessa utföras helt enkelt genom att man säger att programmet "trycker på fjärrkontrollknapparna", eller med andra ord, att "exekvera kommandona".
Om du vill att programmet ska fungera annorlunda kan du bara ändra koden inuti kommandoklassen: programmet utför fortfarande samma kommandon som tidigare, men den underliggande koden i kommandona är annorlunda. Din övergripande lista över åtgärder som du vill att programmet ska göra är skild från din detaljerade lista över instruktioner för hur varje åtgärd ska göras.
"Big deal", kanske du säger, "Jag kunde göra det med hjälp av funktioner. Varför stör med kommandon?" Okej, låt oss titta på två uppsättningar kod som skapar samma effekt, en som använder funktioner och den andra använder kommandorammen vi skapar i denna handledning. Fördelen med kommandon blir klar.
Låt oss säga att vi vill skapa en cirkel, lägga den till scenen, mellan den från osynlig att synlig över en halv sekund, vänta i två sekunder, mellan tillbaka till osynlig över en halv sekund och ta sedan bort den från scenen. För att göra allt så använder vi Greensocks TweenNano-klass.
Om du bara använder funktioner ser koden ut så här:
var cirkel: Cirkel = Ny cirkel (); addChild (cirkel); TweenNano.from (cirkel, 0,5, alf: 0, onComplete: func1); funktion func1 (): void TweenNano.to (cirkel, 0,5, fördröjning: 2, alfa: 0, onComplete: func2); funktion func2 (): void removeChild (circle);
Ser du hur vår lista över handlingar är sammanhängande med våra instruktioner för att utföra varje åtgärd? För att ta reda på vad som ska hända måste du följa alla onCompletes och se var de leder.
Här är samma kod, med hjälp av en kommandoram:
var cirkel: Cirkel = Ny cirkel (); varkommando: Kommando = Ny SerialCommand (0, New AddChild (denna cirkel), Ny TweenNanoFrom (Circle, 0.5, ala: 0), Ny TweenNanoTo (Circle, 0.5, delay: 2, alpha: 0) nytt RemoveChild (detta, cirkel)); command.start ();
Här, AddChild (), TweenNanoFrom, TweenNanoTo, och removeChild är alla kommandoklasser som vi definierar annorstädes i koden, och SerialCommand är en annan kommandoklass vi kan använda för att skapa sekvenser av kommandon i flygningen.
Resultat: ingen funktion "hoppar". Det är tydligt vad den här sekvensen ska göra, och i vilken ordning. Det är också enkelt att ändra ordningens handlingar eller lägga in en ny åtgärd mellan befintliga, utan att jaga efter koden för varje åtgärd och ändra dess onComplete fast egendom.
Kommandon låter oss också köra upp olika handlingar så att de händer samtidigt - men det kommer vi senare till!
Ett snabbt fungerande exempel är värt mer än tusen ord, så låt oss titta på det väsentliga inslaget i vårt kommandoram: Kommandoklassen.
paketkommandon import flash.events.Event; importera flash.events.EventDispatcher; importera flash.events.TimerEvent; importera flash.utils.Timer; Kommunal klass Command utökar EventDispatcher privat var _timer: Timer; public function Command (delay: Number = 0) _timer = ny Timer (int (1000 * fördröjning), 1); _timer.addEventListener (TimerEvent.TIMER_COMPLETE, onTimerComplete); privat funktion onTimerComplete (e: TimerEvent): void execute (); / ** * Startar kommandot. * Väntar på att timern ska slutföras och kallar execute () -metoden. * Den här metoden kan användas direkt som en händelselysare. * / Offentlig slutfunktionsstart (e: Event = null): void _timer.start (); / ** * Den abstrakta metoden för att du åsidosätter för att skapa ditt eget kommando. * / protected function execute (): void / ** * Avslutar kommandot. * Skickar en komplett händelse. * Den här metoden kan användas direkt som en händelselysare. * / skyddad slutfunktion komplett (e: Event = null): void dispatchEvent (ny händelse (Event.COMPLETE));
"Emptiest" -metoden är execute () -metoden; Denna metod är dock den viktigaste delen av kommandot. För att skapa olika kommandoobjekt måste du förlänga den här kommandoklassen och åsidosätta metoden execute (), fylla i de instruktioner du vill att programmet ska utföra.
För att göra ett kommandobjekt arbete, kallar du sin start () metod; det räknar ner fördröjningstiden med ett Timer-objekt och kallar execute () -metoden när timern avslutar nedräkningen. En nollfördröjningstid innebär helt enkelt att kommandotobjektets execute () -metod kommer att ringas direkt efter att du har ringt till startmetoden ().
(Observera att när ditt kommando är klart måste du ringa fullständigt () -metoden manuellt, så att den skickar en komplett händelse. Syftet med den här metoden kommer att bli tydlig senare i handledningen.)
Förresten är det bara min personliga vana att ställa in händelseparametern för start () och komplettera () metoder med ett nullvärde. På så sätt kan metoderna kallas som om du skulle göra med några andra nollparametermetoder, eller kan användas direkt som händelysare.
Nu när vi har vår kommandoklass, låt oss börja spela med det med en enkel spårning.
Först måste vi öppna Flash IDE och skapa ett nytt Flash-dokument. Ring det SimpleTracing.fla.
Skapa sedan en dokumentklass för detta Flash-dokument. Läs den här snabba tipsen för en introduktion till dokumentklasser.
paket import flash.display.Sprite; public class SimpleTracing utökar Sprite public function SimpleTracing ()
Spara det som SimpleTracing.as.
Skapa en ny AS-fil och kopiera kommandoklassen (från ovan) till den.
Skapa en ny mapp i din klassväg som heter "kommandon" och spara den nya AS-filen som Command.as i den mappen.
Vi vill börja med att inkapsla en spårningsfunktion i kommandon, så låt oss förlänga kommandoklassen för att skapa en TraceCommand-klass för detta ändamål. Denna klass kommer att innehålla en meddelandesträng som ska spåras när metoden execute () kallas och kommer att ringa hela () -metoden efter spårningen.
paketkommandon public class TraceCommand utökar kommando private var _message: String; allmän funktion TraceCommand (fördröjning: Nummer, meddelande: String) super (delay); _message = message; åsidosätta skyddad funktion exekvera (): void trace (_message); komplett();
Spara detta som TraceCommand.as, även i mappen "kommandon". Se hur vi har överträtt Kör() funktion för att göra detta kommando faktiskt göra någonting?
Fyll i dokumentklassen med TraceCommand-objekt. Lägg till lyssnare för COMPLETE-händelsen för dessa kommandon.
Accentsconagua
paket import commands.Command; importera kommandon.TraceCommand; importera flash.display.Sprite; importera flash.events.Event; public class SimpleTracing utökar Sprite public function SimpleTracing () var kommando: Command; command = new TraceCommand (0, "first command"); command.addEventListener (Event.COMPLETE, onCommandComplete); command.start (); command = new TraceCommand (1, "second command"); command.addEventListener (Event.COMPLETE, onCommandComplete); command.start (); command = new TraceCommand (2, "third command"); command.addEventListener (Event.COMPLETE, onCommandComplete); command.start (); privat funktion onCommandComplete (e: Event): void trace ("ett kommando är klart"); Att räkna programmet för att utföra kommandon är lika enkelt som att kalla kommandotobjektens start () -metoder. Testa filmen och du får se följande utmatning, skriv ut i linje med en tidsavbrott på en sekund. Du kan också se de interlacing-meddelanden som skrivs ut av kommandonernas fullständiga händelseloggare. Samma variabel används för att hålla referenser till olika kommandobjekt, men programmet gör samma sak för variabeln: ring startmetoden () och lyssna på en komplett händelse.
Det finns tillfällen då du vill exekvera flera kommandon med komplicerad timing. Här presenterar jag två vanliga typer av kommandon som kan åstadkomma avancerad kommandotiming: parallella och seriella kommandon. Båda dessa är kompositkommandon, vilket innebär att de innehåller flera delkommandon. Låt oss kolla in dem en efter en.
Ett parallellt kommando utför alla sina underkommandon samtidigt - eller, med andra ord, parallellt. Kommandot är fullständigt endast när alla dess underkommandon är färdiga. Följande bild ger ett visuellt koncept för ett parallellt kommando. De svarta pilhuvudena anger "flödet" av kommandoreduktion
Nu är det dags att skapa vår klass för parallella kommandon.
Nedan är den fullständiga koden för ParallelCommand-klassen. Spara det som ParallelCommand.as i mappen "kommandon".
Underkommandon skickas till konstruktören som? (vila) -parametern. Detta låter oss ge så många kommandon som vi gillar till konstruktören; de kommer automatiskt att läggas i en array som heter kommandon. Vi ser skönheten i denna speciella typ av parameter inom kort.
paketkommandon import flash.events.Event; public class ParallelCommand utökar kommandot private var _commands: Array; allmän funktion ParallelCommand (fördröjning: Nummer, kommandon) //? kommandon är parametern "? (resten)" super (fördröjning); _commands = kommandon; privat var _completeCommandCount: int; åsidosätta den slutna skyddade funktionen exekvera (): void // ställa in hela kommandotalet till noll _completeCommandCount = 0; för varje (var-kommando: Kommando i _kommandon) // lyssna på den fullständiga händelsen för en underkommando? command.addEventListener (Event.COMPLETE, onSubcommandComplete); //? och starta kommandot underkommando.start (); privat funktion onSubcommandComplete (e: Event): void // sluta lyssna på den fullständiga händelsen Command (e.target) .removeEventListener (Event.COMPLETE, onSubcommandComplete); // öka hela kommandotalet _completeCommandCount ++; // om alla kommandon är färdiga? om (_completeCommandCount == _commands.length) //? då är detta parallella kommando komplett komplett ();
Den här klassen strider mot execute () -metoden. Metoden new execute () kallar nu startmetoden för alla underkommandon och lyssnar på deras fullständiga händelser. Den fullständiga händelselyssnaren för underkommandon räknas med hur många underkommandon har slutförts. När alla delkommandon är färdiga kallas ParallelCommandens fullständiga () -metod och skickar en egen komplett händelse.
Låt oss prova ParallelCommand-klassen. Skapa ett nytt Flash-dokument, kopiera mappen "kommandon" till sin klassväg och skriv en ny dokumentklass enligt nedan:
paket import commands.Command; importera kommandon.ParallelCommand; importera kommandon.TraceCommand; importera flash.display.Sprite; importera flash.events.Event; public class ParallelTracing utökar Sprite public function ParallelTracing () var parallelCommand: Command = nya ParallelCommand (0, nya TraceCommand (0, "1st of 3"), nya TraceCommand (0, "2nd of 3"), nya TraceCommand , "3: a 3"),); parallelCommand.addEventListener (Event.COMPLETE, onCommandComplete); parallelCommand.start (); privat funktion onCommandComplete (e: Event): void trace ("alla kommandon är färdiga"); Fördelen med att använda parametern "? (Resten)" för konstruktörparametern blir nu uppenbar. Du kan formatera underkommandon med korrekt kodinmatning för att skriva visuellt självförklarande koder.
Testa filmen och du får se de tre meddelandena som spåras samtidigt, då ett sista meddelande som anger att parallellkommandot har slutförts:
Vad sägs om att fördröja förseningar inom ett parallellt kommando? Enkel. Ändra dokumentklassens konstruktörsfunktion som så:
allmän funktion ParallelTracing () var parallelCommand: Command = ny ParallelCommand (0, ny TraceCommand (0, "first wave, 1st of 2"), nya TraceCommand (0, "first wave, 2nd of 2"), nya TraceCommand , "andra vågen, 1: a av 3"), nya TraceCommand (1, "andra vågen, 2: a av 3"), nya TraceCommand (1, "second wave, 3rd of 3"), nya TraceCommand 1: a "), ny TraceCommand (2," sista vågen, 2: a av 2 ")); parallelCommand.addEventListener (Event.COMPLETE, onCommandComplete); parallelCommand.start ();
Testa filmen och du får se följande tre vågor av meddelanden som skrivs ut, med ett sekunders mellanrum mellan varje våg:
För att få en bättre bild av vad som händer, kolla in den här illustrationen:
Den andra typen av kompositkommando är seriekommandot. Ett seriekommando utför sina underkommandon ett efter det andra - eller med andra ord i serie. Exempelvis exekveras det andra kommandot efter slutförandet av den första och den tredje exekveras efter fullbordandet av den andra. Följande bild ger ett visuellt koncept för ett seriekommando:
Här är källkoden för SerialCommand Class. Metoden överdriven execute () kallar start () -metoden för den första underkommandot och lyssnar på dess fullständiga händelse. Då startar händeloggaren nästa underkommando och lyssnar på dess fullständiga händelse, och så vidare tills alla underkommandon är färdiga. Vid den tidpunkten skickas COMPLETE-händelsen för hela seriekommandot.
paketkommandon import flash.events.Event; allmän klass SerialCommand utökar kommandot private var _commands: Array; allmän funktion SerialCommand (fördröjning: Nummer, kommandon) super (fördröjning); _commands = kommandon; privat var _completeCommandCount: int; åsidosätta den slutna skyddade funktionen exekvera (): void // ställa in hela kommandotalet till noll _completeCommandCount = 0; // lyssna på den fullständiga händelsen i den första underkommandot? _commands [0] .addEventListener (Event.COMPLETE, onSubcommandComplete); //? och starta underkommandot _commands [0] .start (); privat funktion onSubcommandComplete (e: Event): void // sluta lyssna på den fullständiga händelsen Command (e.target) .removeEventListener (Event.COMPLETE, onSubcommandComplete); // öka hela kommandotalet _completeCommandCount ++; // om alla kommandon är färdiga? om (_completeCommandCount == _commands.length) //? då är detta seriekommando komplett komplett (); annat //? annars lyssnar du på den fullständiga händelsen för nästa underkommando? _commands [_completeCommandCount] .addEventListener (Event.COMPLETE, onSubcommandComplete); //? och starta underkommandot _commands [_completeCommandCount] .start ();
Låt oss använda serien SerialCommand för att göra vissa seriella spårningar. Som tidigare skapar du ett nytt Flash-dokument, kopierar "kommandon" -mappen över och skriver en ny dokumentklass:
paket import commands.Command; import commands.SerialCommand; importera kommandon.TraceCommand; importera flash.display.Sprite; importera flash.events.Event; public class SerialTracing utökar Sprite public function SerialTracing () var serialCommand: Command = nya SerialCommand (0, nya TraceCommand (0, "first command"), nya TraceCommand (1, "second command"), nya TraceCommand tredje kommandot ")); serialCommand.addEventListener (Event.COMPLETE, onCommandComplete); serialCommand.start (); privat funktion onCommandComplete (e: Event): void trace ("alla kommandon är färdiga"); Testa filmen och följande meddelanden spåras ut en efter en, med ett sekunders mellanrum, följt av "alla kommandon är färdiga".
Här är en konceptfigur i det här exemplet som hjälper dig att få en bättre förståelse av vad som händer.
Hittills har vi bara undersökt den mest grundläggande användningen av parallella och seriella kommandon, och det verkar inte vara någon anledning att använda dem istället för separata kommandon. Men det finns tillfällen då du behöver mycket mer komplexa kommandotillverkningar, och du kan kombinera flera kompositkommandon för att skapa inbyggda kommandon som passar dina behov. Nästa exempel visar hur man använder klassen ParallelCommand och SerialCommand för att skapa sådana kapslade kommandon.
Som tidigare skapar du ett nytt Flash-dokument, kopierar "kommandon" -mappen över och skriver en ny dokumentklass:
paket import commands.Command; importera kommandon.ParallelCommand; import commands.SerialCommand; importera kommandon.TraceCommand; importera flash.display.Sprite; importera flash.events.Event; public class NestedCommands utökar Sprite public function NestedCommands () var nestedCommands: Command = nya SerialCommand (0, nya ParallelCommand (0, nya TraceCommand (0, "parallelkommando # 1, del 1 av 2"), nya TraceCommand (0, "parallellkommando # 1, del 2 av 2"), nya TraceCommand (0, "------------------------------- - ")), ny ParallelCommand (1, ny TraceCommand (0," parallellkommando # 2, del 1 av 3 "), ny TraceCommand (0," parallellkommando # 2, del 2 av 3 "), ny TraceCommand , "parallellkommando # 2, del 3 av 3"), ny TraceCommand (0, "------------------------------ - ")), ny ParallelCommand (1, ny TraceCommand (0," Last Command "), ny TraceCommand (0," ---------------------- ---------- "))); nestedCommands.addEventListener (Event.COMPLETE, onCommandComplete); nestedCommands.start (); privat funktion onCommandComplete (e: Event): void trace ("alla kommandon är färdiga"); Testa filmen och programmet skriver ut följande meddelande bitar en för en, med ett sekunders mellanrum. Som i de tidigare exemplen kommer ett slutligt komplett meddelande att skrivas ut när alla underkommandon är färdiga.
Här är konceptfiguren i det här exemplet.
Låt oss äntligen titta på ett mer praktiskt exempel. Vi ska använda kommandorammen vi har byggt för att skapa en ljuskretsdemo med avancerad tidpunkt. Innan vi börjar, (du gissade det) skapa ett nytt Flash-dokument, kopiera mappen "kommandon" och skapa en ny dokumentklass.
Skapa en filmklippsymbol med en tidslinjeanimering där en cirkel ändrar sin färg från grått till gult.
I tidslinjen lägger du till följande kod vid den sista keyframe. Detta gör att filmklippet slutar animera och skicka en komplett händelse:
sluta(); dispatchEvent (ny händelse (Event.COMPLETE));
Om du vill undvika kodning på tidslinjen kan du skapa en klass för din ljusa filmklipp med en funktion:
allmän funktion uppnåddEndOfAnimation (): void stop (); dispatchEvent (ny händelse (Event.COMPLETE));
? och sedan i konstruktören för den klassen skriver du följande:
addFrameScript (4, reachedEndOfAnimation) // där 4 är en mindre än antalet ramar
Ordna ljusföremål på scenen och namnge dem som följande bild visar:
Dra en knappkomponent från komponentpanelen till scenen och namnge den "start_btn". Vi vill utföra våra kommandon när den här knappen trycks in.
Skapa ett textfält på scenen och skriv in ditt färdighetsmeddelande. Därefter konverterar du den till en filmklippssymbol och heter förekomsten "completeMessage_mc".
Nu är det dags att redigera dokumentklassen. Förklara en privat variabel "circuitCommand", som kommer att användas för att hålla en referens till ett kommandobjekt:
privat var circuitCommand: Command;
I början av programmet ska alla lampor stängas av, dvs stoppas vid den första ramen och slutföringsmeddelandet ska vara dolt. Så vi kallar återställningsmetoden () i konstruktören.
återställa();
Skapa sedan våra kapslade kommandon som spelar de ljusa filmklipps animationerna, belysa dem med rätt tidpunkt. Vi använder en PlayCommand-klass här, som bara kallar en filmklipps play () -metod. Vi skriver kursen senare.
circuitCommand = new SerialCommand (0,5, ny PlayCommand (0, light_1), ny ParallelCommand (0,5, ny PlayCommand (0, light_2_1), ny PlayCommand (0, light_2_2)), ny PlayCommand (0,5, light_3), ny ParallelCommand ny PlayCommand (0, light_4_1), ny PlayCommand (0, light_4_2)), ny PlayCommand (0.5, light_5));
Hör sedan efter COMPLETE-händelsen för kommandot och KLICKA händelsen på startknappen:
circuitCommand.addEventListener (Event.COMPLETE, onCommandComplete); start_btn.addEventListener (MouseEvent.CLICK, startCircuit);
Visa slutförandemeddelandet när kommandot är klart:
privat funktion onCommandComplete (e: Event): void completeMessage_mc.visible = true;
Återställ kretsen och starta kommandot när startknappen är klickad.
privat funktion startCircuit (e: MouseEvent): void reset (); circuitCommand.start ();
Den sista delen för dokumentklassen är återställningsmetoden (). Inget att göra med kommandon här.
privatfunktionsåterställning (): void completeMessage_mc.visible = false; light_1.gotoAndStop (1); light_2_1.gotoAndStop (1); light_2_2.gotoAndStop (1); light_3.gotoAndStop (1); light_4_1.gotoAndStop (1); light_4_2.gotoAndStop (1); light_5.gotoAndStop (1);
Den sista delen av det här exemplet är klassen PlayCommand. Som tidigare nämnts är det så enkelt att kalla en filmklipps play () -metod. Så snart namnet play () kallas i kommandot överdrivna execute () -metoden, kallas hela () -metoden också.
paketkommandon importera flash.display.MovieClip; importera flash.events.Event; public class PlayCommand utökar kommandot private var _movieClip: MovieClip; allmän funktion PlayCommand (fördröjning: Number, movieClip: MovieClip) super (delay); _movieClip = movieClip; åsidosätta skyddad funktion exekvera (): void _movieClip.addEventListener (Event.COMPLETE, komplett); _movieClip.play ();
Spara detta som PlayCommand.as i mappen "kommandon".
Okej, vi är klara! Testa nu filmen så ser du att lamporna lyser upp från vänster till höger efter att startknappen är klickad. Meddelandet om slutförandet visas när alla lampor lyser.
Här är den visuella representationen av vad som händer i detta exempel:
Jämför det med den faktiska koden och se hur lätt det är att förstå:
ny PlayCommand (0, light_2_2)), ny PlayCommand (0.5, light_3), ny ParallelCommand (0,5, ny PlayCommand (0,5, ny PlayCommand (0, light_1) (0, light_4_1), ny PlayCommand (0, light_4_2)), ny PlayCommand (0.5, light_5));
Återigen, med korrekt kodinmatning kan ett komplext kapslat kommando uttryckas som enkel och ren kod.
I denna handledning har du lärt dig begreppet kommandon. Instruktionerna kan inkapslas till kommandon som har samma gränssnitt, precis som varje knapp på fjärrkontrollen har en annan åtgärd, men metoden för att anropa varje åtgärd är densamma: tryck på knappen.
Dessutom introducerade denna handledning dig till två typer av kompositkommandon: parallell och seriell. Dessa kan användas för att skapa kapslade kommandon som möjliggör avancerad kommandotillverkningstid samtidigt som koden är ren.
Begreppet kommandon är mycket bekvämt och kraftfullt. Kodkapsling är det huvudsakliga tillvägagångssättet för att förenkla saker medan programmering, och en av de vanligaste metoderna är att använda kommandobjekt. Jag hoppas att denna handledning hjälper dig att förstå bättre hur du använder kommandon i praktiska tillämpningar.
I nästa del av denna handledning visar jag dig hur du integrerar TweenLite med kommandot ramverket som vi skapade i denna handledning, hantera sedan scenövergångar med enkel och ren kod. Tack så mycket för att du läser.
