Hello,
Dans ce tuto, nous allons apprendre à créer une horloge digitale, similaire à celle-ci, à insérer sur votre site, par exemple
Commençons par créer un nouveau document de la taille approximative de votre horloge. Le mien fait 550*70 px. Vous pouvez modifier cette taille par après en cliquant sur le bouton a coté de "size", il en va de même pour la couleur de fond de la scène :
Avec l'outil texte(
) tracez un champ de texte de la taille de votre scène :
et appliquez-y les même paramètres que moi, ne faites cependant pas attention aux valeurs encadrées en rouge, elles dépendent de la taille de la scène et du positionnement du champ de texte
La police que vous choisissez n'a évidement pas non plus de répercussions sur le résultat final.
Pourquoi "var : heure" ?
Cela nous permet de créer une variable propre a champ de texte qui adoptera le contenu de cette variable.
Créez maintenant un nouveau calque (
) sur lequel nous placerons le code.
Voici le code à placer (si vous n'avez pas le panneau "actions", allez dans le menu "Fenêtre" et cliquez sur Actions-F9) :
Code :
- onEnterFrame = function() {
- date = new Date();
- an = date.getFullYear();
- mois = date.getMonth();
- jour = date.getDate();
- heures = date.getHours();
- minutes = date.getMinutes();
- secondes = date.getSeconds();
- var TableauMois:Array = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "septembre", "Octobre", "Novembre", "Décembre"]
- if (jour<10) {
- jour = "0"+jour+"";
- }
- if (heures<10) {
- heures = "0"+heures+"";
- }
- if (minutes<10) {
- minutes = "0"+minutes+"";
- }
- if (secondes<10) {
- secondes = "0"+secondes+"";
- }
- heure = "Nous sommes le "+jour+" "+TableauMois[mois]+" "+an+" et il est "+heures+":"+minutes+":"+secondes+"";
- };
|
Je vous enjoins fortement à ne pas copier/coller ce code, ça ne suffit pas pour s'en souvenir et par la suite, vous aurez des problèmes de syntaxe, ce qui vous obligera à reconsulter ce tuto quand vous ferez appel à des fonctions similaires et vous aura fait en fin de compte perdre du temps au lieu d'en gagner ! Bon, on explique :
Code :
- onEnterFrame = function() {
- ...
- }
|
"onEnterFrame" signifie "à chaque image" c'est à dire par défaut 24 fois par secondes
C'est a cette fréquence que notre date va s'actualiser, sans ça, elle s'afficherait une fois mais ne se mettrai pas à jour ce qui, soulignons-le, est un comble pour une date
"date" peut être remplacé par ce que vous voulez, la _date_d'_aujourd'_hui par exemple, il faut juste en modifier toutes les instances dans les 6 lignes suivantes
"new Date();" Ca, c'est l'objet Date (nooon ?) Mais qu'est-ce qu'un objet ? C'est une sorte de super-variable prédéfinie qui contient d'autres variables que l'on peut extraire pour s'en servir indépendamment, ce que nous allons faire dans les lignes suivantes :
Code :
- an = date.getFullYear();
|
Ici, comme je disais, on crée la variable "an" et comme valeur, on lui donne un morceau de l'objet "date" préalablement crée, ce qui renverra 2008. Il en va de même pour les autres lignes. Deux problèmes se posent à présent : 1) Les mois s'affichent par défaut en chiffes mais, nécessité pédagogique oblige, j'ai décidé qu'ils devaient s'afficher en lettres.:ane: Pour y remédier, nous allons créer un tableau dans lequel nous allons stocker le nom du chaque mois. Ca se présente de cette manière :
Code :
- var TableauMois:Array = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "septembre", "Octobre", "Novembre", "Décembre"]
|
Pour naviguer dans ce tableau, nous allons utilser la valeur renvoyée par date.getMonth(); c'est a dire la variable mois. Voici la requête à effectuer pour naviguer dans un tableau :
; Ce qui donnerait pour Janvier (:info: Le tableau compte à partir de zéro) : "TableauMois[0]" Des lors, nous pouvons remplacer la valeur [0] par une variable; En l'occurrence, la variable mois ! C'est donc ce que j'ai fait sur la dernière ligne, dont nous parlerons plus tard
Par chance, la partie de l'objet Date qui renvoie le mois est elle-même un tableau, ce qui signifie qu'en Janvier, la variable "Mois" renvoie "0". Si vous voulez afficher le mois en chiffres, vous devrez plutôt écrire ceci :
Code :
- mois = date.getMonth() +1;
|
Problème 2: Imaginons qu' il soit une heure, une minute et une seconde, nous nous retrouverions avec ceci : 1:1:1 Or, pauvres humains régis par les conventions que nous sommes, nous aimons voir un "0" quand le chiffre des dizaines est absent. La solution est la suivante :
Code :
- if (heures<10) {
- heures = "0"+heures+"";
- }
|
"if (heures<10) {...}"
Le "if" signifie qu'il va y avoir une condition. Si elle est remplie, les actions entre accolades s'exécutent. Sinon, rien ne se passe. La condition est écrite dans les parenthèses, dans ce cas, "si la valeur "heures" est inférieure à dix", et par conséquent, ne comporte qu'un chiffre. Si la condition est remplie, on passe aux actions :
Code :
- heures = "0"+heures+"";
|
Imaginons que "heures" vaille "5", ça donnerait en français :
Si la variable "heures" qui vaut "5" est inférieure à 10, alors "heures" est égal à "0" plus lui-même.
Pourquoi les guillemets et les "+" ?
C'est une concaténation. Concaténer, c'est grouper entre elles plusieurs chaines de texte. Le texte clair est entre guillemets et on entoure les variables avec des "+"
A présent, il nous reste à faire une grande concaténation et l'assigner à la variable "heure"(sans "s", cette fois) que nous avons déclarée hors du code, sur la quatrième image. Vous devriez d'ailleurs être en mesure d'écrire cette dernière ligne vous-même
:
Code :
- heure = "Nous sommes le "+jour+" "+TableauMois[mois]+" "+an+" et il est "+heures+":"+minutes+":"+secondes+"";
|
Ce tuto est fini, j'espère qu' il vous a plu, n'hésitez pas à poster des commentaires/critiques/questions 
Message édité par leo_killer le 09-11-2008 à 15:26:30
---------------
Mes gadgets Flash
Tutos Flash