Share
Au cours de ce tutoriel, je vais vous montrer comment créer un minuteur personnalisé qui prend en charge le comptage croissant ou réduit.
Dans la démo ci-dessous, vous verrez le compte à rebours à partir de 1h00, une barre de progression qui suit l'avancement du chronomètre et un bouton d'annulation..
Une fois que le compte à rebours de 1h00 est terminé ou que vous appuyez sur le bouton d’annulation, un clip vidéo est inséré à partir de la droite. Ce clip vous permet de saisir la durée souhaitée et de déterminer si vous la comptez ou non. Une barre de progression sera alors attachée et suivra la progression du temps. Une fois que l'heure est terminée ou que vous appuyez sur le bouton d'annulation, vous pourrez entrer une nouvelle heure..
Ici, nous allons écrire la classe de minuterie personnalisée qui dirigera notre film principal.
Allez dans Fichier> Nouveau et choisissez Actionscript 3.0 Class. Enregistrez ce fichier sous "CountTimer.as".
Ici nous ouvrons le paquet et importons les classes dont nous aurons besoin pour écrire cette classe.
Ajouter ce qui suit au "CountTimer.as"
package // Nécessaire pour le minuteur import flash.utils.Timer; import flash.events.TimerEvent; // Nous mettrons à jour ce TextField avec le temps import flash.text.TextField;
Ici, nous allons déclarer les variables dont la classe aura besoin et coder la fonction constructeur.
Ajouter ce qui suit au "CountTimer.as".
Classe publique CountTimer extend Timer // Champ de texte où l'heure mise à jour est privée var var targetText: TextField; // La direction de la minuterie, c'est-à-dire "up" ou "down" private var direction: String; // Combien de minutes la minuterie a-t-elle de privées var minutes: int; // Combien de secondes la minuterie a-t-elle var privé: int; // Utilisé dans notre calcul pour mettre à jour le timer private var totalSeconds: int; // La durée totale = (minutes + secondes) private var timeTotal; // Combien de temps a passé private var timeLoaded = 0; // Défini sur true pour tester le temporisateur private var test: Boolean = false; fonction publique CountTimer (min: int, sec: int, dir: String, targetTextField: TextField = null) minutes = int (min * 60); secondes = int (sec); timeTotal = minutes + secondes; super (1000, total temporel); if (dir == "down") totalSeconds = minutes + secondes; else totalSeconds = 0; if (targetTextField! = null) targetText = targetTextField; direction = dir;
Ici nous avons déclaré quelques variables dont nous avons besoin pour notre classe.
La fonction constructeur prend quatre paramètres; ils sont comme suit:
Accentsconagua
min: Valeur entière représentant le nombre de minutes que vous souhaitez attribuer à la minuterie.seconde: Valeur entière représentant le nombre de secondes que vous souhaitez attribuer à la minuterie.dir: Une chaîne représentant la direction du compteur peut être l'une des suivantes: "up" ou "down".targetTextField: Un champ de texte qui sera utilisé pour afficher l'heure mise à jour (optionnel).Dans la fonction constructeur, nous définissons la minutes variable égale à la valeur spécifiée de min * 60 (puisque 1 minute est égal à 60 secondes).
Nous avons ensuite mis le secondes variable égale à la seconde.
Ensuite, nous définissons le timeTotal variable égale à minutes + secondes.
Puis on appelle super() -- qui exécutent le code de la fonction constructeur du Minuteur classe - passe en 1000 millisecondes, et le timeTotal variable. En utilisant 1000 millisecondes, nous demandons au minuteur de cocher une fois par seconde, et en passant timeTotal nous disons à la minuterie combien de fois tirer.
Nous vérifions ensuite si le dir paramètre est égal à "up" ou "down" et définissez le paramètre totalSeconds variable en conséquence. Le nombre total de secondes sera utilisé dans notre timeHandler () une fonction. Nous allons l'incrémenter ou le décrémenter de 1 à chaque minuterie qui se déclenche.
Ensuite, nous vérifions si l’utilisateur a passé ou non un TextField au constructeur et définissons le targetText variable s'ils le faisaient; cela sera utilisé pour afficher l'heure.
Enfin nous définissons la direction variable à la direction dans laquelle l'utilisateur est passé.
début() Une fonctionIci nous codons le début() fonction pour notre minuterie.
Ajoutez le suivant à la "CountTimer.as".
redéfinit la fonction publique start (): void super.start (); addEventListener (TimerEvent.TIMER, timerHandler);
Parce que nous avons prolongé la minuterie, nous annulons l’actuel début() méthode. Ici, nous appelons simplement super départ() (qui exécute le code de la classe Timer début() méthode) et ajouter un EventListener pour détecter le tic-tac du timer.
timerHandler Une fonctionIci nous codons notre timerHandler () une fonction. C'est ici que nous mettons à jour notre heure et l'affiche. Cette fonction est appelée une fois par seconde.
Ajouter ce qui suit à la classe CountTimer.
fonction privée timerHandler (e: TimerEvent): void // Met à jour notre variable de temps timeed LoadLoaded + = 1; if (direction == "up") // totalSeconds est = 0, pour commencer. Nous y ajoutons 1. totalSeconds ++; else // totalSeconds = theNumber of seconds en ajoutant min et sec; on en soustrait 1 totalSeconds--; // Il reste des secondes. secondes = totalSecondes% 60; // Combien de minutes il reste minutes = Math.floor (totalSeconds / 60); // Les minutes et les secondes à afficher dans le TextField. var minutesDisplay: String = (minutes < 10) ? "0" + minutes.toString() : minutes.toString(); var secondsDisplay:String = (seconds < 10) ? "0" + seconds.toString(): seconds.toString(); if (targetText != null) targetText.text = minutesDisplay + ":" + secondsDisplay; if (test=true) trace(minutesDisplay + ":" + secondsDisplay);
Dans cette fonction, nous mettons à jour notre timeLoaded variable, utilisée pour suivre la progression du temps écoulé.
Ensuite, nous vérifions si direction est égal à "up" ou "down" et ajuster notre totalSeconds variable en conséquence.
Nous déterminons ensuite combien de secondes et de minutes il reste; pad le minutesDisplay et secondesDisplay avec un zéro supplémentaire si nécessaire; met à jour le TextField (s'il en existe un dans le constructeur); et éventuellement tracer le temps si nous avons défini notre tester variable à true (utile pour tester si vous ne définissez pas de champ TextField).
Le calcul utilisé pour déterminer la secondes variable prend le reste de total de secondes / 60.L'opérateur% (modulo) nous donne le reste.
Le calcul utilisé pour déterminer la minutes variable prend simplement la totalSeconds/ 60, arrondi à l'aide de Math.floor ().
getTimeTotal () Une fonctionIci, nous codons une fonction qui retourne simplement notre timeTotal variable.Parce que nous avons rendu cette variable privée, nous avons besoin d’un moyen d’y accéder..
fonction publique getTimeTotal (): int return timeTotal;
getTimeLoaded () Une fonctionIci nous codons une fonction qui retourne notre timeLoaded variable. Encore une fois parce que c'est privé nous avons besoin d'un moyen d'y accéder.
fonction publique getTimeLoaded (): int return timeLoaded;
getProg () Une fonctionCette fonction nous donne la progression de notre temps. C'est combien de temps total (que nous avons défini dans le constructeur) s'est écoulé. On multiplie par 100 pour obtenir un pourcentage compris entre 1 et 100.
fonction publique getProg (): int return Math.floor (timeLoaded / timeTotal * 100);
Ici, nous commençons à concevoir le film principal qui utilise notre classe "CountTimer".
Aller à Fichier> Nouveau et créer un nouveau document ActionScript 3.0.
Définir la taille à 320x220px.
Enregistrez ce document sous "Timer.fla". Aller à Fichier> Nouveau et choisissez Actionscript 3.0 Class.
Enregistrez ce fichier sous "Main.as". Nous allons tester notre classe CountTimer, alors ajoutez ce qui suit au "Main.as".
package import flash.display.MovieClip; importer CountTimer; classe publique Main étend MovieClip var countTimer: CountTimer; fonction publique Main () countTimer = new CountTimer (1,30, "up"); countTimer.start ();
Assurez-vous de définir le tester variable dans "CountTimer.as" à vrai, et réglez la classe de document du film sur "Principal".
Appuyez sur ctrl-enter et testez le film. vous devriez voir le temps tracé dans la fenêtre de sortie.
Ici, nous commençons à concevoir le film principal qui utilise notre Compte à rebours classe.
Nous utiliserons TweenLite dans notre film, donc si vous n'en avez pas, obtenez-le auprès de greensock.com.
Sélectionnez l'outil Texte et assurez-vous que les propriétés suivantes sont définies dans le panneau "CARACTÈRE"..
Toujours dans le panneau "Caractère", cliquez sur "Incorporer" et assurez-vous que "UpperCase", "LowerCase", "Numerals" sont sélectionnés et sous "Inclure également ces caractères".
que vous avez ajouté un ":" et un "%".
Dessinez un champ de texte sur la scène et définissez les propriétés suivantes dans le panneau "POSITION et TAILLE"..
Donnez à cet objet TextField le nom d'occurrence "timer_txt"; assurez-vous que le type est défini sur "Texte classique" et "Texte dynamique" respectivement.
Ce TextField sera utilisé pour afficher l'heure à laquelle le film commence pour la première fois..
Maintenant, nous devons concevoir notre barre de progression.
Aller à Insérer> Nouveau symbole. Donnez-lui le nom "ProgressContainer" et assurez-vous que "Export for Actionscript" est coché et que la classe est définie sur "ProgressContainer"..
Aller à Fenêtre> Composants et faites glisser un composant ProgressBar dans le clip.
Définissez les propriétés de ProgressBar comme suit.
Sous "Paramètres de composant", définissez le mode sur "Manuel"..
Nommez l'occurrence de la barre de progression "pb".
Sélectionnez l'outil Texte et assurez-vous que les propriétés suivantes sont définies dans le panneau "Caractère"..
Dessinez un TextField dans le clip.
Définissez les propriétés suivantes sur le TextField.
Donnez à ce TextField le nom d'instance "progress_txt".
Vous pouvez maintenant fermer ce MovieClip.
Nous allons maintenant concevoir le texte en croissance et en décoloration, à afficher lorsque tout le temps s'est écoulé.
Sélectionnez Insertion> Nouveau symbole. Attribuez-lui le nom "GrowFadeText" et assurez-vous que "Export for Actionscript" est coché et que la classe est définie sur "GrowFadeText"..
Sélectionnez l'outil Texte et assurez-vous que les propriétés suivantes sont définies dans le panneau "Caractère"..
Faites glisser un TextField dans le MovieClip et définissez les propriétés suivantes.
Entrez le texte "TIMER COMPLETE" dans le champ textField. Vous pouvez maintenant fermer ce MovieClip.
Nous allons maintenant concevoir le MovieClip qui glisse à partir de la gauche. Sélectionnez l'outil Rectangle et définissez la couleur sur blanc. Faites glisser un rectangle du coin supérieur gauche de la scène vers le coin inférieur droit.
Sélectionnez le rectangle que vous venez de faire glisser et appuyez sur F8. Attribuez-lui le nom "countContainer". Assurez-vous que "Export for Actionscript est coché et que Class est défini sur" countContainer "..
Définissez les propriétés suivantes sur le MovieClip.
Maintenant, double-cliquez pour aller à l'intérieur du MovieClip.
Sélectionnez l'outil Texte et assurez-vous que les propriétés suivantes sont définies dans le panneau "CARACTÈRE"..
Faites glisser un champ de texte sur la scène et définissez les propriétés suivantes.
Donnez à ce TextField le nom d'occurrence "timer_txt" et assurez-vous que le type est défini sur "Classic Text" et "Input Text" respectivement.
Sélectionnez à nouveau l'outil Texte et faites glisser un TextField sur la scène. Définissez ensuite les propriétés suivantes..
Donnez à ce TextField le nom d'occurrence "instructions_txt" et assurez-vous que le type est défini sur "Texte classique" et "Texte d'entrée".
Allez dans Fenêtre> Composants et faites glisser trois boutons à l'intérieur de ce MovieClip.
Donnez au premier bouton le nom d’instance "countDown_btn" et définissez-y les propriétés suivantes..
Donnez au second bouton le nom d’instance "cancel_btn" et définissez les propriétés suivantes.
Donnez au troisième bouton le nom d’instance "countUp_btn" et définissez-y les propriétés suivantes..
Vous pouvez maintenant fermer le MovieClip.
Maintenant que notre interface utilisateur est conçue, nous pouvons écrire le code du film principal..
Si vous suivez, supprimez tout le code ActionScript de "Main.as" créé à l'étape 9. C'était pour le test; maintenant nous avons besoin d'un code qui fonctionnera avec notre nouvelle interface.
Ici nous ouvrons la déclaration du paquet et importons les classes que nous utiliserons.
Ajouter ce qui suit à "Main.as".
package import flash.display.MovieClip; import fl.controls.Button; import flash.text.TextField; import flash.events.TimerEvent; import flash.events.MouseEvent; import flash.text.TextFieldType; import flash.text.TextFieldAutoSize; importer CountTimer; importer com.greensock.TweenLite; import flash.events.Event; import fl.controls.ProgressBar;
Ici, nous déclarons nos variables et codons le constructeur.
Ajouter ce qui suit le "Main.as"
public class Main étend MovieClip // Un tableau contenant les minutes et les secondes dans les éléments [0] et [1] private var timeArray: Array; // Notre compteur countTimer private var countTimer: CountTimer; // Un booléen nous indiquant s'il s'agit du premier minuteur // (celui utilisé au début du film) private var firstTimer: Boolean = true; // La direction de notre timer peut être "up" ou "down" private var direction: String; // Le MovieClip qui contient le texte que nous cultivons et que nous atténuons est privé var growFadeText: GrowFadeText; // Le MovieClip qui contient notre progressBar private var progress progressContainer: ProgressContainer; // Les minutes private var min: int; // Le second privé var sec: int; fonction publique Main () min = 1; sec = 0; countTimer = new CountTimer (min, sec, "down", timer_txt); timer_txt.text = "1:00"; countTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerComplete); setupButtons (); addProgressContainer (0,70, "down"); countTimer.start (); stage.addEventListener (Event.ENTER_FRAME, updateProgress); cancel_btn.addEventListener (MouseEvent.CLICK, moveContainer);
Nous avons d'abord mis en place le min et seconde variables et les transmettre au countTimer; nous définissons ensuite la direction sur "down" et définissons le TextField cible sur timer_txt.
Nous définissons ensuite du texte par défaut pour TextField, ajoutons un TIMER_COMPLETE événement au minuteur, exécutez une fonction pour configurer nos boutons, ajoutez la barre de progression, démarrez le minuteur et ajoutez un ENTER_FRAME écouteur d’événements à la scène (que nous utiliserons pour mettre à jour la barre de progression), et ajoutez enfin un CLIQUEZ SUR écouteur d'événement à notre cancel_btn.
timerComplete () Une fonctionAjouter ce qui suit à "Main.as".
fonction privée timerComplete (e: TimerEvent): void addGrowFadeText (154,130); if (firstTimer == true) TweenLite.to (GrowFadeText, 2.5, scaleX: 2, scaleY: 2, alpha: 0, onComplete: moveContainer); else TweenLite.to (growFadeText, 2.5, scaleX: 2, scaleY: 2, alpha: 0, onComplete: showTheControls);
Ici, nous ajoutons le texte à la scène en appelant addGrowFadeText () nous examinerons cette fonction sous peu. Nous vérifions ensuite la firstTimer variable pour voir s’il s’agit du premier minuteur, s’il est utilisé tweenLite pour agrandir et atténuer le texte et appeler le moveContainer une fois l’animation terminée. Si ce n’est pas le premier minuteur, nous utilisons à nouveau tweenLite pour agrandir et atténuer le texte, mais appelons le showTheControls () fonction une fois l'animation terminée. Nous examinerons les moveContainer et showTheControls fonctionne sous peu.
setupButtons () Une fonctionAjouter ce qui suit à "Main.as"
fonction privée setupButtons (): void countContainer.countDown_btn.addEventListener (MouseEvent.CLICK, doTimer); countContainer.countUp_btn.addEventListener (MouseEvent.CLICK, doTimer); countContainer.cancel_btn.addEventListener (MouseEvent.CLICK, restoreControls); countContainer.instructions_txt.text = "Entrez l'heure au format 1:30 puis appuyez sur le bouton CountDown ou CountUp"; // Nous ne voulons pas que l'utilisateur puisse éditer le texte countContainer.instructions_txt.selectable = false;
Ici, nous ajoutons des EventListeners à nos boutons, définissons le texte de notre instructions_txt et définissez-le de sorte que l'utilisateur ne puisse ni sélectionner ni modifier le texte. J'ai utilisé un TextField ici pour garder ce didacticiel déjà long, mais vous voudrez probablement utiliser un composant Label ici et le styler avec un objet TextFormat.
addProgressContainer () Une fonctionAjouter ce qui suit à "Main.as"
fonction privée addProgressContainer (xPos: int, yPos: int, dir: String): void progressContainer = new ProgressContainer (); progressContainer.x = xPos; progressContainer.y = yPos; stage.addEventListener (Event.ENTER_FRAME, updateProgress); addChild (progressContainer); if (dir == "down") progressContainer.pb.direction = "left"; else progressContainer.pb.direction = "right";
Nous créons ici un nouveau ProgressContainer et définissons son X et y propriétés par le xPos et yPos paramètres qui sont passés in. Nous ajoutons ensuite un ENTER_FRAME écouteur d'événements qui appelle le Progression de la mise à jour() fonction, et nous ajoutons le progressContainer enfin, nous vérifions la dir paramètre pour voir s'il est égal à "down"; si c'est le cas, nous définissons la direction de la barre de progression sur "gauche", sinon nous définissons la direction de la barre de progression sur "droite".
removeProgressContainer () Une fonctionAjouter ce qui suit à "Main.as"
fonction privée removeProgressContainer (): void if (progressContainer! = null) stage.removeEventListener (Event.ENTER_FRAME, updateProgress); removeChild (progressContainer); progressContainer = null;
Ici, nous vérifions si le progressContainer existe; sinon, on enlève le ENTER_FRAME écouteur d'événements de la scène pour qu'il ne continue pas à s'exécuter. Nous supprimons ensuite progressContainer de la scène et le configurons à nul puisque nous en avons fini.
Progression de la mise à jour() Une fonctionAjouter ce qui suit à "Main.as".
fonction privée updateProgress (e: Event): void progressContainer.progress_txt.text = countTimer.getProg (). toString () + "%"; progressContainer.pb.setProgress (countTimer.getTimeLoaded (), countTimer.getTimeTotal ());
Ici nous définissons le progress_txtLe texte de pour montrer la progression de notre minuterie. Nous utilisons le compte de minuterie getProg () méthode qui retourne un entier de ce que le pourcentage du temps a passé. Puisqu'il retourne un int nous utilisons AS3 intégré dans toString () méthode dessus et y ajouter un signe "%".
Ensuite nous appelons le setProgress () méthode du composant ProgressBar sur notre ProgressBar (pb). Nous passons countTimer.getTimeLoaded () et countTimer.getTimeTotal () qui renvoient des entiers. Pour en savoir plus sur le composant ProgressBar, consultez mon introduction rapide au composant ProgressBar..
addGrowFadeText () Une fonctionAjouter ce qui suit à "Main.as".
fonction privée addGrowFadeText (xPos: int, yPos: int) GrowFadeText = new GrowFadeText (); growFadeText.x = xPos; growFadeText.y = yPos; addChild (growFadeText);
Ici, nous créons une nouvelle instance de GrowFadeText, définissons sa X et y propriétés comme spécifié, puis nous l'ajoutons à la scène.
removeGrowFadeText () Une fonctionAjouter ce qui suit à "Main.as".
fonction privée removeGrowFadeText (): void if (GrowFadeText! = null) removeChild (GrowFadeText); growFadeText = null;
Ici, nous vérifions si GrowFadeText existe. Si ce n'est pas le cas, nous le retirons de la scène et le définissons sur null.
moveContainer () Une fonctionAjouter le texte suivant à "Main.as".
fonction privée moveContainer (e: Event = null): void countTimer.stop (); removeChild (timer_txt); removeChild (cancel_btn); removeGrowFadeText (); removeProgressContainer (); countContainer.cancel_btn.visible = false; firstTimer = false; TweenLite.to (countContainer, 1, x: 0);
Ici, nous arrêtons le chronomètre et retirons le timer_txt et cancel_btn. Ensuite, nous appelons notre removeGrowFadeText () et removeProgressContainer () fonctions, régler le cancel_btn dans le countContainer pour être invisible, définissez le firstTimer variable à faux, et faites glisser le countContainer en utilisant TweenLite.
showControls () Une fonctionAjoutez ce qui suit à "Main.as":
fonction privée showTheControls (): void showControls (); removeProgressContainer (); countTimer.stop (); countContainer.timer_txt.text = ""; countContainer.timer_txt.text = "";
Ici nous appelons le showControls fonction, que nous examinerons sous peu. Ensuite nous appelons removeProgressContainer (), arrêter le chronomètre et réinitialiser nos champs de texte pour qu'ils soient vides.
doTimer () Une fonctionAjoutez ce qui suit à "Main.as":
fonction privée doTimer (e: MouseEvent): void if (e.target == countContainer.countDown_btn) direction = "down"; else direction = "up"; if (countContainer.timer_txt.text! = "") timeArray = countContainer.timer_txt.text.split (":"); min = timeArray [0]; sec = timeArray [1]; countTimer = new CountTimer (min, s, direction, countContainer.timer_txt); countTimer.start (); countTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerComplete); countTimer.addEventListener (TimerEvent.TIMER, updateProgress); hideControls (); addProgressContainer (0,70, direction); Nous vérifions d’abord quel bouton a été enfoncé. Si le countDown_btn a été pressé nous avons mis la direction variable à "bas" sinon nous définissons la direction variable à "up" .Next nous vérifions pour nous assurer que timer_txt n'est pas vide. Si ce n'est pas le cas, nous utilisons le Divisé() fonction pour mettre les minutes et les secondes dans le timeArray.le Divisé() function prend une chaîne et la sépare par tout ce que vous lui transmettez en tant que paramètre. Ici, nous avons utilisé le signe deux-points (:), puis ajoute chaque "pièce" au tableau. Donc, si vous êtes passé "1:45", alors l'élément du tableau [0] serait "1"; l'élément [1] serait "45".
Nous avons ensuite mis le seconde et min les variables.
Ensuite, nous créons une nouvelle instance du countTimer et passer dans le min,seconde,dir,et le TextField à utiliser.
Nous ajoutons ensuite deux TimerEvent les auditeurs qui appellent notre timerComplete () et Progression de la mise à jour() les fonctions.
Enfin nous appelons le hideControls () fonction et ajouter le progressContainer à la scène.
showControls () Une fonctionAjouter ce qui suit à "Main.as".
fonction privée showControls (): void countContainer.instructions_txt.visible = true; countContainer.countDown_btn.visible = true; countContainer.countUp_btn.visible = true; countContainer.cancel_btn.visible = false;
Ici, nous définissons simplement le instruction_txt,countDown_btn,et countUp_btn être visible. Nous avons ensuite mis le cancel_btn être dansvisible.
hideControls () Une fonctionAjouter ce qui suit à "Main.as".
fonction privée hideControls (): void countContainer.instructions_txt.visible = false; countContainer.countDown_btn.visible = false; countContainer.countUp_btn.visible = false; countContainer.cancel_btn.visible = true;
C'est l'opposé de la fonction précédente; Ici, nous venons de définir l'ensemble de la instruction_txt,countDown_btn,et countUp_btn être invisible. Nous avons ensuite mis le cancel_btn être visible.
restoreControls () Une fonctionAjouter ce qui suit à "Main.as".
fonction privée restoreControls (e: Event) showTheControls (); countTimer.stop ();
Ici nous appelons le showControls () fonction et arrêt du chronomètre.
Ajouter ce qui suit à "Main.as"
// Fermer la classe // Fermer le package
Ici, nous fermons notre classe et notre forfait.
Bien que cela ne soit pas absolument nécessaire, réglez le tester variable à faux dans le "CountTimer" .as ".
Assurez-vous que votre classe de document est définie sur "Principal" et testez le film..
Nous avons maintenant une classe de minuterie polyvalente qui peut être utilisée pour un grand nombre de choses, allant de la limite de temps sur les tests à la fixation de temps pour les niveaux sur les jeux..
J'espère que vous avez trouvé ce tutoriel utile et merci de votre lecture!
