Date et heure

Introduction
Informations

Voici une méthode qui vous permettra d'afficher la date et l'heure dans une animation Flash AS3.

Auteur : Netger
Publication : 7 juin 2008 18:39
Consultations : 5014

1. Préparer l'espace de travail

Ouvrez un nouveau document Flash AS3 ou un document dans le quel vous souhaitez ajouter la date, l'heure ou même les deux.

Comme vous vous en doutez la taille de la scène ainsi que la couleur du background n'ont pas d'importance pour ce tutorial.

2. Les tableaux

Nous n'aurons maintenant plus besoin de la scène pour travailler : le panneau ActionScript suffira.

Pour commencer nous allons construire deux tableaux afin de référencer les noms des jours de la semaine et les noms des mois de l'année :

Code-source actionscript
const MOIS:Array = new Array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
const JOURS:Array = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
 

Ces tableaux permettront donc de récupérer le nom correspondant à l'index associé et ainsi de pouvoir noter en toutes lettres les noms des jours et des mois.

3. La classe TextFormat

Nous allons nous intéresser à la mise en forme du texte et utiliser la class TextFormat().

Code-source actionscript
var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.color = 0x0000FF;
format.size = 14;
format.bold = true;
 

Je pense que la lecture de ce bout de code vous aura permis d'en comprendre le sens général : nous souhaitons afficher un texte en gras, de taille 14px, de couleur bleu et de police "verdana".

4. La class TextField

A cette étape déclarez et ajoutez sur la scène les deux champs de texte où la date et l'heure seront affichés.

Code-source actionscript
var date_field:TextField = new TextField();
date_field.x = 30;
date_field.y = 75;
date_field.autoSize = TextFieldAutoSize.LEFT;
date_field.defaultTextFormat = format;
addChild(date_field);
 
var heure_field:TextField = new TextField();
heure_field.x = 30;
heure_field.y = 100;
heure_field.autoSize = TextFieldAutoSize.LEFT;
heure_field.defaultTextFormat = format;
addChild(heure_field);
 

Nous en profitons pour placer ces champs de texte :

date_field : coordonnées X:30 et Y:75
heure_field : coordonnées X:30 et Y:100

Nous leur attribuons également un alignement à gauche ainsi que le style de texte (format) que nous avons déclaré à l'étape précédente.
Enfin nous ajoutons ces champs sur la scène.

5. Les fonctions

Afin de faire fonctionner ce script nous aurons besoins de deux fonctions :

La première, très simple, nous permettra d'ajouter un "0" devant les nombres strictement inférieurs à 10.
La seconde fonction sera déclenchée chaque seconde grâce à un timer et permettra de définir et d'afficher les dernières valeurs correspondant à la date et à l'heure.

Code-source actionscript
function reglage( valeur:uint ):String
{
	return (valeur<10) ? "0"+valeur : String(valeur);
}
 
function afficher( Tevt:TimerEvent ):void
{
	var temps:Date = new Date(); 
	var annee:uint = temps.fullYear;
	var mois:String = MOIS[temps.month];
	var numJour:uint = temps.date;
	var jour:String = JOURS[temps.day];
	date_field.text = jour + " " + numJour + " " + mois + " " + annee;
 
	var heure:String = reglage( temps.hours );
	var minute:String = reglage( temps.minutes );
	var seconde:String = reglage( temps.seconds );
	heure_field.text = heure + " : " + minute + " : " + seconde;
}
 

6. La class Timer

Dernière étape, il ne nous reste plus qu'à déclarer et lancer le timer :

Code-source actionscript
var myTimer:Timer = new Timer( 1000, 0 );
myTimer.addEventListener( TimerEvent.TIMER, afficher );
myTimer.start();
 

Un écouteur d'événement placé sur le timer permet de lancer la fonction "afficher" à chaque démarrage du timer (chaque seconde).

7. Code source complet

Voici le code source complet de ce script :

Code-source actionscript
const MOIS:Array = new Array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
const JOURS:Array = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
 
var format:TextFormat = new TextFormat();
 
format.font = "Verdana";
format.color = 0x0000FF;
format.size = 14;
format.bold = true;
 
var date_field:TextField = new TextField();
date_field.x = 30;
date_field.y = 75;
date_field.autoSize = TextFieldAutoSize.LEFT;
date_field.defaultTextFormat = format;
addChild(date_field);
 
var heure_field:TextField = new TextField();
heure_field.x = 30;
heure_field.y = 100;
heure_field.autoSize = TextFieldAutoSize.LEFT;
heure_field.defaultTextFormat = format;
addChild(heure_field);
 
function reglage( valeur:uint ):String
{
	return (valeur<10) ? "0"+valeur : String(valeur);
}
 
function afficher( Tevt:TimerEvent ):void
{
	var temps:Date = new Date();
	var annee:uint = temps.fullYear;
	var mois:String = MOIS[temps.month];
	var numJour:uint = temps.date;
	var jour:String = JOURS[temps.day];
	date_field.text = jour + " " + numJour + " " + mois + " " + annee;
 
	var heure:String = reglage( temps.hours );
	var minute:String = reglage( temps.minutes );
	var seconde:String = reglage( temps.seconds );
	heure_field.text = heure + " : " + minute + " : " + seconde;
}
 
var myTimer:Timer = new Timer( 1000, 0 );
myTimer.addEventListener( TimerEvent.TIMER, afficher );
myTimer.start();
 

Rédiger un commentaire
Afficher les commentaires (0)

Vous devez être identifié pour poster un commentaire

Aucun commentaire

Restez informé :

Rechercher sur :

GoogleAdsenses