Construire une horloge binaire brillante avec Flash

Dans ce tutoriel, nous allons créer une horloge inhabituelle, mais très cool: une horloge binaire.

Aperçu du résultat final

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

Étape 1: Que signifie binaire??

Tout le monde sait compter, mais tout le monde ne sait pas qu'il existe autant de façons de le faire. Nous sommes habitués à un mode de comptage spécial appelé système décimal, mais nous pouvons également utiliser le système hexadécimal, octal ou binaire, entre autres..

Dans notre système décimal, nous assignons 10 pour représenter le nombre total de doigts et de pouces que nous avons chacun, et comptons de haut en bas à partir de là. Mais en binaire, 10 ne représente que le nombre total de pouces - donc 10 en binaire est égal à 2 en décimal; 11 en binaire est 3 en décimal; 100 en binaire est 4 en décimal, et ainsi de suite. Donc, plutôt que chaque colonne représentant des unités, des dizaines, des centaines, des milliers,… (en comptant de droite à gauche), elles représentent des unités, des deux, des quatre, des huit,…, doublant à chaque fois.

Le nombre 10 que nous voyons normalement peut donc être représenté de différentes manières:

Le système binaire est basé sur le numéro deux, c'est pourquoi on l'appelle binaire, par opposition à la décsystème imal que nous utilisons normalement et qui a une base de 10. Le système binaire est celui utilisé par les ordinateurs pour fonctionner, car nous pouvons l’utiliser pour représenter n’importe quel nombre en utilisant une série de commutateurs "on" (1) et "off" (0).

Avec cette connaissance, pouvez-vous comprendre comment lire l'heure dans le fichier SWF?

Si vous voulez en savoir plus à ce sujet, vous pouvez utiliser le système de numération binaire Google et consulter les infos à ce sujet =)

Étape 2: Créer le fichier Flash

Créez un nouveau fichier AS3 Flash et nommez-le "Binary_Clock.fla"..

Étape 3: Préparez la scène

Accédez aux propriétés et remplacez la taille par 550x400 et la couleur de fond par # 222222..

Étape 4: Obtenez TweenMax

Accédez à la page Web du projet TweenMax et téléchargez la bibliothèque pour AS3..

Étape 5: Extrait de TweenMax

Déroulez le fichier et copiez le dossier nommé "com" dans le dossier où vous avez votre Binary_Clock.fla fichier.

Étape 6: Créer un bit

Maintenant, allez à Insérer> Nouveau symbole et nommez-le "Bit" avec le type Movie Clip.

Ce "bit" "représentera un seul chiffre d'un nombre. Il aura deux états, de deux couleurs différentes: l'un représentera 0 et l'autre représentera 1.

Étape 7: dessiner un morceau

Ensuite, dans le symbole que vous venez de créer, créez un nouveau carré de 50x50px.

Étape 8: Modifier le bit

Changez la couleur du carré en # 00CBFF et centrez-le.

Étape 9: Créer les colonnes

De retour sur la scène, prenez quelques extraits du panneau de la bibliothèque et arrangez-les pour créer les colonnes que nous utiliserons. Vous devriez finir avec quelque chose comme ceci:

Étape 10: Ajouter des éléments

Si vous le souhaitez, vous pouvez ajouter des étiquettes de texte et des lignes pour le rendre plus compréhensible:

Étape 11: attribuer des noms d'instance

Pour chaque bit, modifiez le nom de l'instance dans son panneau de propriétés. Donnez-leur des noms tels que ceux illustrés ci-dessous:

Étape 12: Liez la FLA à une classe de document

Accédez au panneau de propriétés et définissez le champ de la classe sur "Main". Il s'agit du nom de la classe que nous allons créer à l'étape suivante..

(Vous n'êtes pas sûr de ce que nous faisons ici? Lisez cette brève introduction aux classes de document.)

Étape 13: Créer la classe de document

Avec l'étape terminée, nous pouvons maintenant commencer à coder. Commencez par créer un nouveau fichier ActionScript 3.0 et enregistrez-le sous le nom "Main.as"..

Ajoutez ce code au fichier:

 package import flash.display.MovieClip; Classe publique Main étend MovieClip fonction publique Main ()

Étape 14: Ajouter les importations nécessaires

Nous allons commencer par importer les classes nécessaires. Ajoutez ceci en dessous de la déclaration du paquet:

 import flash.display.MovieClip; import flash.utils.Timer; import flash.events.TimerEvent; importer com.greensock. *; importer com.greensock.easing. *;

Étape 15: Déclarez les variables

Ensuite, nous allons déclarer des variables publiques. Ajoutez ceci en dessous de la déclaration de classe:

 public var clock: Timer = new Timer (1000); public var date: Date = new Date (); public var hr: int; public var min: int; public var sec: int; public var bits: Array;

La création d'un nouvel objet Date le définit automatiquement à l'heure actuelle.

Étape 16: attribuer des valeurs

OK, ajoutons maintenant le code qui lancera l'horloge. Cela va dans la fonction Main ():

 // Avec cela, nous affectons les valeurs réelles de l'horloge à chaque variable sec = date.getSeconds (); min = date.getMinutes (); hr = date.getHours (); clock.start (); clock.addEventListener (TimerEvent.TIMER, setTime);

Étape 17: Créez la fonction setTime ()

C'est la fonction qui sera appelée chaque seconde.

 fonction privée setTime (e: TimerEvent): void date = new Date (); sec = date.getSeconds (); min = date.getMinutes (); hr = date.getHours ();

Étape 18: Convertir le nombre décimal en fichier binaire

Cette fonction changera un nombre décimal en un tableau binaire, qui sera utilisé plus tard.

 fonction privée dec2bin (dec: int, longueur: int): Array var bin: Array = new Array (); while ((dec / 2)> 0) // remarquez que ceci a le même effet que "while ((dec / 2)> = 1)" bin.push (dec% 2); // dec% 2 est le * reste * lorsque dec est divisé par deux. 3% 2 = 1; 4% 2 = 0; 5% 2 = 1; 6% 2 = 0; etc. // en d’autres termes, dec% 2 est 1 si dec est impair et 0 si dec est pair dec = dec / 2; // parce que dec est un int, il sera arrondi while (bin.length Donc, dec2bin (13, 4) donne [1,1,0,1].
 
  Étape 19: Créez la fonction converter ()
 Cette fonction prend un nombre décimal et utilise dec2bin () pour le convertir en tableau à 2 colonnes que nous avons à l'écran..
  convertisseur de fonctions privées (num: int): Array var st: String = String (num); if (st.length == 1) st = "0" + st; var fDigit: int = int (st.charAt (1)); var sDigit: int = int (st.charAt (0)); var fColumn: Array = dec2bin (fDigit, 4); var sColumn: Array = dec2bin (sDigit, 3); var résultat: Array = fColumn.concat (sColumn); retourne le résultat; 
 
  Étape 20: Activer et désactiver les bits
 Nous devons maintenant ajouter quelque chose qui va activer et désactiver les bits; c'est ce que fait cette fonction:
  // newBits est le tableau à 2 colonnes que nous obtenons de converter (), la cible est "H" "M" ou "S" pour indiquer quelle colonne utiliser la fonction privée turnBits (newBits: Array, target: String): void / / Boucle dans le tableau à 2 colonnes pour changer l’état du bit pour (var a: int = 0; a 
  Étape 21: Modifier les fonctions
 Quelques modifications aux fonctions Main () et setTime (): il suffit d’appeler la fonction pour que les modifications soient apportées à chaque seconde et au début:
  fonction publique Main () sec = date.getSeconds (); min = date.getMinutes (); hr = date.getHours (); turnBits (convertisseur (sec), 'S'); turnBits (convertisseur (min), 'M'); turnBits (convertisseur (hr), 'H'); clock.start (); clock.addEventListener (TimerEvent.TIMER, setTime);  fonction privée setTime (e: TimerEvent): void date = new Date (); sec = date.getSeconds (); min = date.getMinutes (); hr = date.getHours (); turnBits (convertisseur (sec), 'S'); turnBits (convertisseur (min), 'M'); turnBits (convertisseur (hr), 'H'); 
 Essayez-le et vous verrez s'afficher correctement l'heure. Mais nous pouvons faire mieux… 
  Étape 22: un peu de style
 C'est ici qu'intervient TweenMax. Nous ajouterons de la luminosité et faciliteront le rendu de l'horloge. Modifiez votre fonction turnBits () comme ceci:
  fonction privée turnBits (newBits: Array, target: String): void pour (var a: int = 0; a Et c'est tout! Nous avons terminé notre tutoriel =)
 Conclusion
 Maintenant, nous avons une horloge attrayante que nous pourrions utiliser comme économiseur d'écran ou ajouter à une page Web.
 Ceci est mon premier tutoriel donc j'espère que vous l'avez aimé. Merci d'avoir lu!



		
			
	   
	




Code