Share
ActionScript 3.0 est un langage très puissant, capable de créer des utilitaires simples et légers aux applications de bureau complètes..
Dans ce tut, nous allons créer quelque chose de simple, une horloge numérique simple et esthétique en Flash.
À l'aide de l'objet Date et de ses propriétés, nous obtenons le jour, les heures, les minutes et les secondes et nous utilisons TextFields sur scène pour afficher les données obtenues. Les mises à jour seront traitées par un minuteur.
Ouvrez Flash et créez un nouveau fichier Flash (ActionScript 3)..
Réglez la taille de la scène sur 600x300 et ajoutez un fond radial bleu à noir (# 003030, # 000000).
Nous allons ajouter deux champs de texte dynamiques pour chaque élément, nous allons placer ceux qui ont la lueur en premier pour obtenir l'effet des lignes.
Sélectionnez l'outil Texte et créez un champ de texte de 342x104px, utilisez la couleur # 00FAFF, cliquez sur l'option Centrer dans le panneau Paragraphe et choisissez la police de votre choix. J'ai utilisé DS-Digital italic, 100pt.
Nommez-le "clockGlow", ajoutez des chiffres, centrez-le pour l'utiliser comme guide et ajoutez un filtre anti-luminescence avec les valeurs suivantes:
Vous devriez avoir quelque chose comme ça:
Répétez le processus avec une taille de police plus petite pour les jours et l'indicateur am / pm. Les noms d'instance sont le nom du jour plus le mot "Glow", ce sera "monGlow", "tueGlow" et ainsi de suite, "ampmGlow" pour l'indicateur AM / PM..
Nous allons dessiner une série de lignes qui couvriront la scène pour obtenir l'effet d'écran LCD.
Sélectionnez l'outil Rectangle et créez une ligne noire de 600 x 1 pixels, dupliquez-le (Cmd + D) et placez-le en dessous en laissant un espace de 1 pixels..
Répétez le processus jusqu'à ce qu'il corresponde à la hauteur de la scène. Vous allez finir avec quelque chose comme ça:
Convertir l’écran de lignes en groupe (Cmd + G) et le centrer dans l’étape.
Comme vous pouvez le voir dans la dernière image, l’effet de ligne est omniprésent sur le texte. Nous voulons seulement qu'il s'applique à la lueur, alors ajoutons un nouveau calque de texte.
Comme ce texte est exactement le même que celui que nous avions créé auparavant (sans le filtre anti-luminescent), nous pouvons simplement copier les champs de texte et supprimer le filtre anti-luminescent. Nous allons également supprimer le mot "Glow" des noms d'instance.
Cela complétera l'interface.
Créez un nouveau document ActionScript et enregistrez-le sous le nom "Main.as"..
Cette fois, nous aurons besoin de quelques cours.
package import flash.display.MovieClip; import flash.utils.Timer; import flash.events.TimerEvent;
Nous allons utiliser des méthodes et des propriétés spécifiques à MovieClip, nous étendons donc à l'aide de la classe MovieClip. L'extension à l'aide de la classe Sprite ne fonctionnera pas.
Classe publique principale étend MovieClip
Ce sont les variables que nous allons utiliser, expliquées dans les commentaires.
/ * Un objet Date utilisé pour obtenir le jour et l'heure * / var date: Date = new Date (); var day: int = date.day; // Le jour / * L'heure * / var heures: int = date.hours; var minutes: * = date.minutes; var secondes: * = date.seconds; / * Un objet Minuteur qui gérera les mises à jour, exécuté toutes les secondes * / var timer: Timer = new Timer (1000);
Cette fonction est exécutée lorsque la classe est chargée.
fonction publique Main (): void / * Empêche le décalage, car le temporisateur n'est exécuté qu'une seconde après le démarrage du film * / updateClock (); / * Masque le texte de tous les jours, ces fonctions sont expliquées plus tard * / hideObjects (lundi, lundi, mardi, mardi, mercredi, mercredi, mercredi, jeudi, jeudi, jeudi, vendredi, vendredi, samedi, samedi, samedi, samedi, samedi, samedi, samedi, samedi, samedi, samedi, mercredi, mercredi, mercredi, mercredi, mercredi, mercredi, mercredi, mercredi, jeudi, mercredi, jeudi, jeudi, jeudi, jeudi, jeudi, samedi, samedi, samedi, samedi, samedi, samedi; / * Affiche le jour actuel * / showCurrentDay (); / * Démarre le minuteur * / timer.addEventListener (TimerEvent.TIMER, startClock); timer.start ();
C'est la fonction qui gère l'horloge. Il est appelé une fois dans la fonction principale, puis chaque seconde dans la fonction startClock..
fonction privée updateClock (): void / * AM PM, si les heures sont supérieures à 11, c'est-à-dire que 12 et 12 sont PM * / if (heures> 11) ampm.text = "PM"; ampmGlow.text = "PM"; else ampm.text = "AM"; ampmGlow.text = "AM"; / * Permet d'éviter l'horloge sur 24 heures, si les heures sont supérieures à 12 (comme 13), soustrait 12 (donc c'est 1) * / si (heures> 12) heures- = 12; / * Si le numéro n’est qu’un chiffre, ajoutez un 0 à gauche * / if (String (minutes) .length<2) minutes="0"+minutes; if (String(seconds).length<2) seconds="0"+seconds; /* Set TextFields */ clock.text=hours+":"+minutes+":"+seconds; clockGlow.text=hours+":"+minutes+":"+seconds;
Ceci est une fonction pour rendre les objets invisibles, nous utilisons le paramètre… rest pour passer un nombre quelconque de paramètres.
fonction privée hideObjects (… cibles) pour (var i: int = 0; i < targets.length; i++) targets[i].visible=false;
Cette instruction Switch vérifiera la variable day pour obtenir le jour et le afficher.
Accentsconagua
fonction privée showCurrentDay (): void switch (jour) cas 0: sun.visible = true; sunGlow.visible = true; Pause; cas 1: mon.visible = true; monGlow.visible = true; Pause; cas 2: tue.visible = true; tueGlow.visible = true; Pause; cas 3: wed.visible = true; wedGlow.visible = true; Pause; cas 4: thu.visible = true; thuGlow.visible = true; Pause; cas 5: fri.visible = true; friGlow.visible = true; Pause; cas 6: sat.visible = true; satGlow.visible = true; Pause; défaut: trace ("Erreur du jour de la semaine"); Cette fonction met à jour l'objet Date pour obtenir la date réelle et appelle la fonction updateClock pour mettre à jour les champs de texte..
fonction privée startClock (e: TimerEvent): void date = new Date (); heures = date.heures; minutes = date.minutes; secondes = date.secondes; updateClock ();
Retournez au fichier .Fla et dans le panneau Propriétés, ajoutez "Principal" dans le champ Classe pour en faire la classe de document..
Comme vous pouvez le constater, il est très facile de créer et de modifier cette horloge numérique. Expérimentez avec la classe de date, changez l'interface et ajoutez peut-être plus de fonctionnalités!
Merci d'avoir lu.
