Penser aux commandes partie 1 de 2

Deux fois par mois, nous revoyons certains des articles préférés de nos lecteurs dans l’histoire d’Activetuts +. Ce tutoriel a été publié pour la première fois en mars 2010 et constitue la première partie d'une série.

Le code simple et maintenable est beau. Cependant, lorsque nous avons une série d'actions qui doivent se déclencher, notre code peut devenir compliqué, rendant impossible toute modification ultérieure. le Modèle de commande garde les choses propres.

Dans ce tutoriel, je vais vous montrer comment créer un framework de commande AS3 minimaliste, capable d'exécuter des actions de manière séquentielle, parallèle ou différée. Vous apprendrez comment utiliser ce framework pour créer un effet complexe avec un code simple et épuré.


Encapsulation de commande

L'encapsulation d'instructions dans des "commandes" est une approche de programmation répandue pour simplifier les choses. Le modèle de commande est en fait l'un des modèles de conception les plus utilisés dans la programmation orientée objet. Fondamentalement, le concept de commande est mis en œuvre en créant des classes de commandes, chaque classe représentant un type de commande. Dans la suite du tutoriel, quand je parle de "une commande", je veux dire "un objet de commande".

Vous pouvez considérer une commande comme un bouton sur une télécommande. Chaque bouton fait quelque chose de différent, mais ils sont tous utilisés de la même manière: vous appuyez dessus, la magie opère. Qu'il s'agisse d'allumer le téléviseur, de changer de chaîne ou de régler le volume, ces fonctions peuvent être remplies en appuyant simplement sur une touche.

Image reproduite avec l'aimable autorisation de freedigitalphotos.net

Le concept de commandes est le même. L'instruction sous-jacente d'une commande est semblable à la fonction d'un bouton de télécommande. Vous pouvez encapsuler différentes instructions dans des commandes, telles que le traçage d'un message simple, le déplacement d'un objet d'un endroit à un autre ou le basculement de la visibilité d'un objet d'affichage. Une fois l'encapsulation terminée, vous pouvez simplement effectuer cette opération en indiquant au programme "d'appuyer sur les boutons de la télécommande" ou, en d'autres termes, "d'exécuter les commandes"..

Si vous souhaitez que le programme fonctionne différemment, vous pouvez simplement modifier le code dans la classe Command: le programme exécute toujours les mêmes commandes que précédemment, mais le code sous-jacent à l'intérieur des commandes est différent. Votre liste globale des actions que vous souhaitez que le programme exécute est séparée de votre liste détaillée d'instructions sur la manière dont chaque action doit être effectuée..


Pourquoi s'embêter avec des commandes?

"On peut dire", je pourrais le faire en utilisant des fonctions. Pourquoi s'embêter à utiliser des commandes? " D'accord, examinons deux ensembles de code qui créent le même effet, l'un utilisant des fonctions et l'autre utilisant le framework de commandes que nous allons créer dans ce tutoriel. L'avantage des commandes deviendra clair.

Supposons que nous voulions créer un cercle, l'ajouter à la scène, l'interpoler de invisible à visible pendant une demi-seconde, attendre deux secondes, revenir en arrière pendant une demi-seconde, puis le supprimer de la scène. Pour faire tout cela, nous utiliserons la classe TweenNano de Greensock.

Si vous n'utilisez que des fonctions, le code ressemblera à ceci:

 cercle var: cercle = nouveau cercle (); addChild (cercle); TweenNano.from (cercle, 0.5, alpha: 0, onComplete: func1); fonction func1 (): void TweenNano.to (cercle, 0.5, retard: 2, alpha: 0, onComplete: func2);  function func2 (): void removeChild (circle); 

Voyez-vous comment notre liste d'actions est enchevêtrée dans nos instructions pour effectuer chaque action? Pour savoir ce qui va se passer, vous devez suivre toutes les onCompletes et voir où ils mènent.

Voici le même code, en utilisant un framework de commande:

 cercle var: cercle = nouveau cercle (); var command: Command = new SerialCommand (0, new AddChild (this, circle), new TweenNanoFrom (circle, 0.5, alpha: 0), new TweenNanoTo (circle, 0.5, delay: 2, alpha: 0), nouveau RemoveChild (this, circle)); command.start ();

Ici, AddChild (), TweenNanoFrom, TweenNanoTo, et RemoveChild sont toutes les classes de commande que nous définissons ailleurs dans le code, et SerialCommand est une autre classe de commande que nous pouvons utiliser pour créer des séquences de commandes à la volée.

Résultat: plus de fonction "saute". Il est clair que cette séquence va se dérouler et dans quel ordre. Il est également facile de changer l'ordre des actions ou d'insérer une nouvelle action entre celles existantes, sans avoir à rechercher le code pour chaque action et à en modifier le code. onComplete propriété.

Les commandes nous permettent également de mettre en file d'attente différentes actions afin qu'elles se produisent en même temps - mais nous y reviendrons plus tard.!


La classe de commande

Un exemple de travail rapide vaut plus que mille mots, regardons donc l’essentiel de notre cadre de commandes: la classe Command.

 commandes de package import flash.events.Event; import flash.events.EventDispatcher; import flash.events.TimerEvent; import flash.utils.Timer; public class Command étend EventDispatcher private var _timer: Timer; fonction publique Commande (delay: Number = 0) _timer = new Timer (int (1000 * delay), 1); _timer.addEventListener (TimerEvent.TIMER_COMPLETE, onTimerComplete);  fonction privée onTimerComplete (e: TimerEvent): void execute ();  / ** * Démarre la commande. * Attend la fin du chronomètre et appelle la méthode execute (). * Cette méthode peut être utilisée directement comme écouteur d'événement. * / public final function start (e: Event = null): void _timer.start ();  / ** * La méthode abstraite que vous pouvez utiliser pour créer votre propre commande. * / protected function execute (): void  / ** * Termine la commande. * Envoie un événement complet. * Cette méthode peut être utilisée directement comme écouteur d'événement. * / fonction finale protégée terminée (e: Event = null): void dispatchEvent (new Event (Event.COMPLETE)); 

La méthode "la plus vide" est la méthode execute (); Cependant, cette méthode est la partie la plus importante de la commande. Afin de créer différents objets de commande, vous devez étendre cette classe Command et remplacer la méthode execute () en complétant les instructions à exécuter par votre programme..

Pour faire fonctionner un objet Command, appelez sa méthode start (); il décompte le temps de retard à l'aide d'un objet Timer et appelle la méthode execute () à la fin du compte à rebours. Un délai nul signifie simplement que la méthode execute () de votre objet Command sera appelée juste après l'appel de sa méthode start ()..

(Notez que lorsque votre commande est terminée, vous devez appeler la méthode complete () manuellement, ce qui lui permet d'envoyer un événement COMPLETE. Le but de cette méthode apparaîtra plus tard dans le didacticiel.)

À propos, configurer le paramètre event pour les méthodes start () et complete () avec une valeur par défaut nulle est simplement mon habitude personnelle. De cette façon, les méthodes peuvent être appelées comme vous le feriez avec n'importe quelle autre méthode à paramètre zéro ou directement utilisées comme écouteurs d'événement..


Exemple: traçage simple

Maintenant que nous avons notre classe Command, commençons à jouer avec quelques traces simples.


Étape 1: Créer un document Flash

Tout d'abord, nous devons ouvrir l'IDE Flash et créer un nouveau document Flash. Appelez ça SimpleTracing.fla.


Étape 2: créer la classe de document

Ensuite, créez une classe de document pour ce document Flash. Lisez ce petit conseil pour une introduction aux classes de documents..

 package import flash.display.Sprite; Classe publique SimpleTracing étend Sprite fonction publique SimpleTracing () 

Enregistrez-le sous SimpleTracing.as.


Étape 3: Créer la classe de commande de base

Créez un nouveau fichier AS et copiez-y la classe Command.

Créez un nouveau dossier dans votre chemin de classe appelé "commandes" et enregistrez ce nouveau fichier AS sous le nom Command.as à l'intérieur de ce dossier..


Étape 4: La commande de trace

Nous aimerions commencer par encapsuler une fonction de traçage dans des commandes. Développons donc la classe Command pour créer une classe TraceCommand à cette fin. Cette classe contiendra une chaîne de message à tracer lors de l'appel de la méthode execute () et appellera la méthode complete () après le traçage..

 commandes de paquetages classe publique TraceCommand extend Commande private var _message: String; fonction publique TraceCommand (delay: Number, message: String) super (delay); _message = message;  écraser la fonction protégée execute (): void trace (_message); Achevée(); 

Enregistrez-le sous le nom TraceCommand.as, également dans le dossier "Commandes". Voyez comment nous avons remplacé le exécuter() fonctionner pour que cette commande fasse réellement quelque chose?


Étape 5: trace

Terminez la classe de document avec des objets TraceCommand. Ajouter des écouteurs pour l'événement COMPLETE de ces commandes.

 package import commands.Command; importer des commandes.TraceCommand; import flash.display.Sprite; import flash.events.Event; Classe publique SimpleTracing étend Sprite fonction publique SimpleTracing () var commande: Command; command = new TraceCommand (0, "première commande"); command.addEventListener (Event.COMPLETE, onCommandComplete); command.start (); command = new TraceCommand (1, "seconde commande"); command.addEventListener (Event.COMPLETE, onCommandComplete); command.start (); command = new TraceCommand (2, "troisième commande"); command.addEventListener (Event.COMPLETE, onCommandComplete); command.start ();  fonction privée onCommandComplete (e: Event): void trace ("une commande est complète"); 

Dire au programme d'exécuter les commandes est aussi simple que d'appeler les méthodes start () des objets Command. Testez le film et vous verrez la sortie suivante, imprimée ligne par ligne avec un intervalle de temps d'une seconde. En outre, vous pouvez voir les messages d'entrelacement imprimés par l'écouteur complet des commandes. La même variable est utilisée pour contenir des références à différents objets Command, mais le programme fait la même chose pour la variable: appelez la méthode start () et écoutez un événement COMPLETE..


Commandes composites

Il arrive que vous souhaitiez exécuter plusieurs commandes avec un minutage complexe. Ici, je vais vous présenter deux types courants de commandes pouvant accomplir un chronométrage avancé: les commandes parallèles et les commandes série. Ces deux commandes sont composites, ce qui signifie qu'elles contiennent plusieurs sous-commandes. Vérifions-les un par un.


Commande parallèle

Une commande parallèle exécute toutes ses sous-commandes en même temps, ou, en d'autres termes, en parallèle. La commande est complète uniquement lorsque toutes ses sous-commandes sont terminées. La figure suivante donne un concept visuel d'une commande parallèle. Les flèches noires indiquent le "flux" de l'exécution de la commande


La classe ParallelCommand

Maintenant il est temps de créer notre classe pour les commandes parallèles.

Vous trouverez ci-dessous le code complet de la classe ParallelCommand. Enregistrez-le sous ParallelCommand.as dans votre dossier "commandes".

Les sous-commandes sont transmises au constructeur en tant que? (repos) paramètre. Cela nous permet de transmettre autant de commandes que nous voulons au constructeur; ils seront automatiquement mis dans un tableau appelé commandes. Nous verrons très bientôt la beauté de ce type de paramètre spécial.

 commandes de package import flash.events.Event; Classe publique ParallelCommand extend Command private var _commands: Array; fonction publique ParallelCommand (delay: Number ,? Commandes) //? commandes est le paramètre "? (reste)" super (délai); _commandes = commandes;  private var _completeCommandCount: int; redéfinit la fonction protégée finale execute (): void // définit le nombre total de commandes à zéro _completeCommandCount = 0; for each (commande var: commande dans _commands) // écoute l'événement complet d'une sous-commande? command.addEventListener (Event.COMPLETE, onSubcommandComplete); //? et lancez la sous-commande command.start ();  fonction privée onSubcommandComplete (e: Event): void // cesse d'écouter l'événement complet Command (e.target) .removeEventListener (Event.COMPLETE, onSubcommandComplete); // incrémente le nombre total de commandes _completeCommandCount ++; // si toutes les commandes sont complètes? if (_completeCommandCount == _commands.length) //? alors cette commande parallèle est complète complete (); 

Cette classe remplace la méthode execute (); la nouvelle méthode execute () appelle maintenant la méthode start () de toutes les sous-commandes et écoute leurs événements COMPLETE. L'écouteur d'événement COMPLETE pour les sous-commandes compte le nombre de sous-commandes terminées. une fois que toutes les sous-commandes sont terminées, la méthode complete () de ParallelCommand est appelée et distribue son propre événement COMPLETE..


Exemple: traçage parallèle

Essayons la classe ParallelCommand. Créez un nouveau document Flash, copiez le dossier "commandes" dans son chemin de classe et écrivez une nouvelle classe de document comme ci-dessous:

 package import commands.Command; import commands.ParallelCommand; importer des commandes.TraceCommand; import flash.display.Sprite; import flash.events.Event; classe publique ParallelTracing étend Sprite fonction publique ParallelTracing () var parallelCommand: Command = new ParallelCommand (0, nouvelle TraceCommand (0, "1er sur 3"), nouvelle TraceCommand (0, "2e sur 3"), nouvelle TraceCommand (0 , "3ème sur 3"),); parallelCommand.addEventListener (Event.COMPLETE, onCommandComplete); parallelCommand.start ();  fonction privée onCommandComplete (e: Event): void trace ("toutes les commandes sont complètes"); 

L'avantage d'utiliser le paramètre "? (Reste)" pour le paramètre constructeur devient maintenant évident. Vous pouvez formater les sous-commandes avec l'indentation de code appropriée pour écrire des codes visuellement explicites.

Testez le film et vous verrez les trois messages tracés en même temps, puis un dernier message indiquant l'achèvement de la commande parallèle:

  • 1er de 3
  • 2e sur 3
  • 3ème sur 3
  • toutes les commandes sont complètes

Qu'en est-il de la configuration des délais dans une commande parallèle? Simple. Modifiez la fonction constructeur de votre classe de document comme suit:

 fonction publique ParallelTracing () var parallelCommand: Command = new ParallelCommand (0, nouvelle TraceCommand (0, "première vague, 1er sur 2"), nouvelle TraceCommand (0, "première vague, 2e sur 2"), nouvelle TraceCommand (1 , "deuxième vague, 1er sur 3"), nouveau TraceCommand (1, "deuxième vague, 2e sur 3"), nouveau TraceCommand (1, "deuxième vague, 3ème sur 3"), nouveau TraceCommand (2, "dernière vague, 1er sur 2 "), nouveau TraceCommand (2," dernière vague, 2e sur 2 ")); parallelCommand.addEventListener (Event.COMPLETE, onCommandComplete); parallelCommand.start (); 

Testez le film et vous verrez les trois vagues de messages suivantes imprimées, avec un intervalle d'une seconde entre chaque vague:

  • première vague, 1ère sur 2
  • première vague, 2e sur 2


  • deuxième vague, 1ère sur 3
  • deuxième vague, 2e sur 3
  • deuxième vague, 3ème sur 3


  • dernière vague, 1ère sur 2
  • dernière vague, 2e sur 2

Pour avoir une meilleure idée de ce qui se passe, regardez cette illustration:


Commande en série

Le deuxième type de commande composite est la commande série. Une commande série exécute ses sous-commandes les unes après les autres - ou, en d'autres termes, en série. Par exemple, la deuxième commande est exécutée après la fin de la première et la troisième après la fin de la deuxième. La figure suivante donne un concept visuel d'une commande série:


La classe SerialCommand

Voici le code source de la classe SerialCommand. La méthode execute () surchargée appelle la méthode start () de la première sous-commande et écoute son événement COMPLETE. Ensuite, l'écouteur d'événements démarre la sous-commande suivante et écoute son événement COMPLETE, et ainsi de suite, jusqu'à ce que toutes les sous-commandes soient terminées. À ce stade, l'événement COMPLETE pour l'ensemble de la SerialCommand est envoyé..

 commandes de package import flash.events.Event; Classe publique SerialCommand extend Command private var _commands: Array; fonction publique SerialCommand (delay: Number ,? commandes) super (delay); _commandes = commandes;  private var _completeCommandCount: int; redéfinit la fonction protégée finale execute (): void // définit le nombre total de commandes à zéro _completeCommandCount = 0; // écoute l'événement complet de la première sous-commande? _commandes [0] .addEventListener (Event.COMPLETE, onSubcommandComplete); //? et lancez la sous-commande _commands [0] .start ();  fonction privée onSubcommandComplete (e: Event): void // cesse d'écouter l'événement complet Command (e.target) .removeEventListener (Event.COMPLETE, onSubcommandComplete); // incrémente le nombre total de commandes _completeCommandCount ++; // si toutes les commandes sont complètes? if (_completeCommandCount == _commands.length) //? alors cette commande série est complete complete ();  autre  //? sinon, écoutez l'événement complet de la prochaine sous-commande? _commandes [_completeCommandCount] .addEventListener (Event.COMPLETE, onSubcommandComplete); //? et lancez la sous-commande _commands [_completeCommandCount] .start (); 

Exemple: traçage en série

Utilisons la classe SerialCommand pour effectuer un traçage en série. Comme auparavant, créez un nouveau document Flash, copiez le dossier "commandes" et écrivez une nouvelle classe de document:

 package import commands.Command; import commands.SerialCommand; importer des commandes.TraceCommand; import flash.display.Sprite; import flash.events.Event; Classe publique SerialTracing étend Sprite fonction publique SerialTracing () var serialCommand: Commande = new SerialCommand (0, nouvelle TraceCommand (0, "première commande"), nouvelle TraceCommand (1, "deuxième commande"), nouvelle TraceCommand (1, " troisième commande ")); serialCommand.addEventListener (Event.COMPLETE, onCommandComplete); serialCommand.start ();  fonction privée onCommandComplete (e: Event): void trace ("toutes les commandes sont complètes"); 

Testez le film et les messages suivants sont tracés un par un, avec un intervalle de temps d'une seconde, suivi de "toutes les commandes sont terminées".

  • première commande


  • deuxième commande


  • troisième commande

Voici une figure conceptuelle de cet exemple qui vous aide à mieux comprendre ce qui se passe..


Commandes composites imbriquées

Jusqu'ici, nous avons seulement exploré l'utilisation la plus élémentaire des commandes parallèles et série, et il ne semble pas y avoir de raison de les utiliser à la place de commandes séparées. Cependant, vous avez parfois besoin d'exécutions de commandes beaucoup plus complexes et vous pouvez combiner plusieurs commandes composites pour créer des commandes imbriquées qui répondent à vos besoins. L'exemple suivant montre comment utiliser la classe ParallelCommand et la classe SerialCommand pour créer de telles commandes imbriquées..


Exemple: commandes imbriquées

Comme auparavant, créez un nouveau document Flash, copiez le dossier "commandes" et écrivez une nouvelle classe de document:

 package import commands.Command; import commands.ParallelCommand; import commands.SerialCommand; importer des commandes.TraceCommand; import flash.display.Sprite; import flash.events.Event; Classe publique NestedCommands. Sprite fonction publique NestedCommands () var nestedCommands: Command = new SerialCommand (0, new ParallelCommand (0, new TraceCommand (0, "parallèle command # 1, part 1 of 2"), New TraceCommand (0, "commande parallèle n ° 1, partie 2 de 2"), nouvelle TraceCommand (0, "------------------------------- - ")), nouvelle ParallelCommand (1, nouvelle TraceCommand (0," commande parallèle n ° 2, partie 1 de 3 "), nouvelle TraceCommand (0," commande parallèle n ° 2, partie 2 de 3 "), nouvelle TraceCommand (0 , "commande parallèle n ° 2, partie 3 de 3"), nouvelle TraceCommand (0, "------------------------------ - ")), nouvelle ParallelCommand (1, nouvelle TraceCommand (0," dernière commande "), nouvelle TraceCommand (0,", ---------------------- ---------- "))); nestedCommands.addEventListener (Event.COMPLETE, onCommandComplete); nestedCommands.start ();  fonction privée onCommandComplete (e: Event): void trace ("toutes les commandes sont complètes"); 

Testez le film et le programme imprimera les fragments de message suivants un par un, avec un intervalle de temps d'une seconde. Comme dans les exemples précédents, un message final complet sera imprimé lorsque toutes les sous-commandes seront terminées..

  • commande parallèle n ° 1, partie 1 de 2
  • commande parallèle n ° 1, partie 2 de 2
  • --------------------------------


  • commande parallèle n ° 2, partie 1 de 3
  • commande parallèle n ° 2, partie 2 de 3
  • commande parallèle n ° 2, partie 3 de 3
  • --------------------------------


  • dernière commande
  • --------------------------------

Voici le chiffre conceptuel de cet exemple.


Exemple: circuit d'éclairage

Enfin, examinons un exemple plus pratique. Nous allons utiliser le cadre de commande que nous avons créé pour créer une démonstration du circuit d'éclairage, avec un minutage avancé. Avant de commencer, vous avez deviné: créez un nouveau document Flash, copiez le dossier "commandes" et créez une nouvelle classe de documents..


Étape 1: Le symbole de la lumière

Créer un symbole de clip, avec une animation de scénario, dans laquelle un cercle change de couleur du gris au jaune.

Dans le scénario, à la dernière image clé, ajoutez le code suivant. Cela provoque l'arrêt du clip d'animation et l'envoi d'un événement COMPLETE:

 Arrêtez(); dispatchEvent (nouvel événement (Event.COMPLETE));

Si vous souhaitez éviter de coder sur la timeline, vous pouvez créer une classe pour votre MovieClip léger, avec une fonction:

 fonction publique atteinteEndOfAnimation (): void stop (); dispatchEvent (nouvel événement (Event.COMPLETE)); 

? puis dans le constructeur de cette classe, écrivez ce qui suit:

 addFrameScript (4, reachEndOfAnimation) // où 4 est égal à un de moins que le nombre d'images

Étape 2: le circuit

Organisez des instances de lumière sur la scène et nommez-les comme l'illustre la figure suivante:


Étape 3: interaction

Faites glisser un composant Button du panneau Composants sur la scène et appelez-le "start_btn". Nous voulons exécuter nos commandes lorsque ce bouton est enfoncé.


Étape 4: Indicateur d'achèvement

Créez un champ de texte sur la scène et tapez votre message d'achèvement. Ensuite, convertissez-le en symbole de clip et nommez l'occurrence "completeMessage_mc"..


Étape 5: La classe de document

Il est maintenant temps d'éditer la classe de document. Déclarez une variable privée "circuitCommand", qui servira à contenir une référence à un objet Command:

 private var circuitCommand: Commande;

Au début du programme, toutes les lumières doivent être éteintes, c'est-à-dire arrêtées à la première image, et le message d'achèvement doit être masqué. Nous appelons donc la méthode reset () dans le constructeur.

 réinitialiser();

Ensuite, créez nos commandes imbriquées qui lisent les animations des clips vidéo légers, en les éclairant avec le bon timing. Nous utilisons ici une classe PlayCommand, qui appelle simplement la méthode play () d'un clip. Nous écrirons la classe plus tard.

 circuitCommand = new SerialCommand (0.5, new PlayCommand (0, light_1), new ParallelCommand (0.5, new PlayCommand (0, light_2_1), new PlayCommand (0, light_2_2)), nouveau PlayCommand (0.5, light_3), nouveau ParallelCommand (0.5, nouvelle PlayCommand (0, light_4_1), nouvelle PlayCommand (0, light_4_2)), nouvelle PlayCommand (0.5, light_5));

Ensuite, écoutez l'événement COMPLETE de la commande et l'événement CLICK du bouton de démarrage:

 circuitCommand.addEventListener (Event.COMPLETE, onCommandComplete); start_btn.addEventListener (MouseEvent.CLICK, startCircuit);

Étape 6: Ajouter des gestionnaires d'événements

Affiche le message d'achèvement lorsque la commande est terminée:

 fonction privée onCommandComplete (e: Event): void completeMessage_mc.visible = true; 

Réinitialiser le circuit et lancer la commande lorsque le bouton de démarrage est cliqué.

 fonction privée startCircuit (e: MouseEvent): void reset (); circuitCommand.start (); 

Étape 7: La méthode de réinitialisation

La dernière partie de la classe de document est la méthode reset (). Rien à voir avec les commandes ici.

 fonction privée reset (): 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); 

Étape 8: La classe PlayCommand

La dernière partie de cet exemple est la classe PlayCommand. Comme mentionné précédemment, sa tâche est aussi simple que d'appeler la méthode play () d'un clip. Dès que la méthode play () est appelée dans la méthode execute () surchargée de la commande, la méthode complete () est également appelée.

 commandes de package import flash.display.MovieClip; import flash.events.Event; Classe publique PlayCommand extend Command private var _movieClip: MovieClip; fonction publique PlayCommand (delay: Number, movieClip: MovieClip) super (delay); _movieClip = movieClip;  écraser la fonction protégée execute (): void _movieClip.addEventListener (Event.COMPLETE, complete); _movieClip.play (); 

Enregistrez-le sous le nom PlayCommand.as dans votre dossier "commandes"..


Étape 9: Testez le film

D'accord, nous avons fini! Maintenant, testez le film et vous verrez les lumières s'allumer de gauche à droite après avoir cliqué sur le bouton de démarrage. Le message d'achèvement s'affiche lorsque toutes les lumières sont allumées.

Voici la représentation visuelle de ce qui se passe dans cet exemple:

Comparez-le au code actuel et voyez comme il est facile à comprendre:

 nouveau SerialCommand (0.5, nouveau PlayCommand (0, light_1), nouveau ParallelCommand (0.5, nouveau PlayCommand (0, light_2_1), nouveau PlayCommand (0, light_2_2)), nouveau PlayCommand (0.5, light_3), nouveau ParallelCommand (0.5, nouveau PlayCommand (0, light_4_1), nouvelle PlayCommand (0, light_4_2)), nouvelle PlayCommand (0.5, light_5));

De nouveau, avec l'indentation de code appropriée, une commande imbriquée complexe peut être exprimée sous forme de code simple et propre..


Résumé

Dans ce tutoriel, vous avez appris le concept de commandes. Les instructions peuvent être encapsulées dans des commandes ayant des interfaces identiques, tout comme chaque bouton d’une télécommande a une action différente, mais la méthode pour invoquer chaque action est la même: appuyez sur le bouton..

De plus, ce tutoriel vous a présenté deux types de commandes composites: parallèle et série. Ceux-ci peuvent être utilisés pour créer des commandes imbriquées permettant un minutage d'exécution avancé des commandes tout en gardant le code propre.


Conclusion

Le concept de commandes est très pratique et puissant. L’encapsulation de code est l’approche principale pour simplifier les choses lors de la programmation, et l’une des méthodes les plus couramment utilisées est l’utilisation d’objets de commande. J'espère que ce tutoriel vous aidera à mieux comprendre comment utiliser les commandes dans des applications pratiques.

Dans la suite de ce didacticiel, je vais vous montrer comment intégrer TweenLite au cadre de commandes que nous avons créé dans ce didacticiel, puis gérer les transitions de scènes avec un code simple et propre. Merci beaucoup d'avoir lu.