Conseil créez un SandClock minimaliste à l'aide d'ActionScript 3

Lisez les étapes faciles de cette astuce pour créer un SandClock minimaliste avec ActionScript..


Aperçu du résultat final

Jetons un coup d'œil au résultat final sur lequel nous allons travailler:


Étape 1: bref aperçu

En utilisant des tableaux et un MovieClip carré prédéfini, nous allons créer un SandClock qui sera animé par un minuteur.


Étape 2: Configurez votre fichier Flash

Lancez Flash et créez un nouveau document Flash, réglez la taille de la scène sur 400x250px et la cadence sur 24 images par seconde..


Étape 3: interface

C’est l’interface que nous allons utiliser. Les carrés de l’image sont en réalité un seul carré bleu MovieClip exporté pour être utilisé avec ActionScript, avec le nom de lien suivant: Carré. Un simple bouton nommé Bouton Start sera utilisé pour construire et démarrer l'horloge.


Étape 4: ActionScript

Créez une nouvelle classe ActionScript (Cmd + N), enregistrez le fichier sous Main.as et écrivez les lignes suivantes. Lisez les commentaires dans le code afin de bien comprendre le comportement de la classe..

 package import flash.display.Sprite; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.MouseEvent; public class Main étend Sprite private var clockArray: Array = [15,13,11,9,7,3,1]; // Enregistre le nombre de carrés par ligne private var top: Array = []; // tiendra les carrés sur la partie supérieure du conteneur var privé de sandclock: Sprite = new Sprite (); // stocke tous les movieclips private var containerCopy: Sprite = new Sprite (); // dupliquera la partie supérieure pour rendre la minuterie var privée: Timer = new Timer (1000); // une minuterie exécutée chaque seconde var counter privé: int = 0; // comptera les secondes, utilisées pour arrêter la fonction publique timer (): void startButton.addEventListener (MouseEvent.MOUSE_UP, buildClock); // un écouteur dans le bouton de démarrage fonction privée buildClock (e: MouseEvent): void startButton.removeEventListener (MouseEvent.MOUSE_UP, buildClock); // désactive le bouton startButton.enabled = false; var clockLength: int = clockArray.length; / * ce double pour parcourir la longueur du tableau d'horloge ET la valeur de chaque élément du tableau créant 7 lignes (longueur) de carrés de 15, 13, 11 (valeur d'élément) et ainsi de suite * / pour (var i: int = 0; je < clockLength; i++)  for (var j:int = 0; j < clockArray[i]; j++)  var s:Square = new Square(); var sc:Square = new Square(); s.x = 70.5 + (s.width * j) + (1 * j) + (i * (s.width + 1)); s.y = 84.5 + (s.height + 1) * i; sc.x = s.x; sc.y = s.y; if (i >= 5) s.x = 70,5 + (largeur s * j) + (1 * j) + (i * ((largeur s)) + 1)) + (largeur s * 2 - 4); sc.x = s.x;  container.addChild (s); containerCopy.addChild (sc); // crée une copie pour la partie inférieure top.push (s); sc.alpha = 0,2; // rend la partie inférieure semi-transparente addChild (conteneur); containerCopy.x = 225; // positionne et fait pivoter la partie inférieure containerCopy.y = 247; containerCopy.rotation = 180; addChild (containerCopy);  timer.addEventListener (TimerEvent.TIMER, startClock); // démarre la minuterie timer.start ();  / * cette fonction s'exécute toutes les secondes, elle change l'alpha du carré correspondant pour créer l'effet de sable. lorsque le temps est écoulé arrête le chronomètre et appelle une fonction * / fonction privée startClock (e: TimerEvent): void conteneur.getChildAt (compteur) .alpha = 0.2; containerCopy.getChildAt (counter) .alpha = 1; counter ++; // 60 secondes si (compteur> = 59) timer.stop (); timer.removeEventListener (TimerEvent.TIMER, startClock); timeComplete ();  fonction privée timeComplete (): void // faire quelque chose ici

Vous pouvez régler la minuterie et le compteur valeur pour rendre la durée de sandclock supérieure ou inférieure.


Étape 5: Classe de document

N'oubliez pas d'ajouter le nom de la classe à la Classe champ dans le Publier section de la Propriétés panneau.


Conclusion

Pourquoi ne pas utiliser ce SandClock pour donner une belle touche à votre application ou à votre jeu??

J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!