![[Fléche]](../images/defaut/icones/puce_navig.gif)
Tutorial Flash : Date et heure avec AS3
Introductions
Informations
Documents
Résultat
Voici une méthode qui vous permettra d'afficher la date et l'heure dans une animation Flash AS3.
L'accés aux documents est exclusivement réservé aux membres.
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 : AS3
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 class TextFormat
Nous allons nous intéresser à la mise en forme du texte et utiliser la class TextFormat().Code-source : AS3
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 : AS3
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 : AS3
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 : AS3
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 : AS3
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();
Commentaires
Aucun commentaire enregistré
