Tester l'animation (ctrl-Envoi ou pomme-Envoi) ne nous montrera pour le moment qu'un seul trait blanc: l'aiguille des secondes étant au-dessus des deux autres et de la même largeur, elle cache celles des minutes et des heures. Il est temps de dissocier les aiguilles, et donc d'intégrer la notion de temps...

(actions pour l'image-clé 1 du calque "scripts", suite et fin)
//procédure de création du temps
function temps() {
  var maintenant = new Date();
  if (maintenant.getHours() > 12) {
    var jourPourCent = ( maintenant.getHours() - 12 ) / 12;
  }
  else {
    var jourPourCent = maintenant.getHours() / 12;
  }
  var heurePourCent = maintenant.getMinutes() / 60;
  var minutePourCent = maintenant.getSeconds() / 60;
  heures._rotation = jourPourCent*360 + heurePourCent*(360 / 12);
  minutes._rotation = heurePourCent * 360;
  secondes._rotation = minutePourCent * 360;
}

Cette procédure nous permet d'aborder de nombreux points et spécificités de la programmation ActionScript, aussi nous allons nous attarder dessus pour la décomposer.

- L'ensemble du code de gestion de temps est placé dans une procédure, car ne nous en servirons pas qu'une seule fois mais l'appellerons en boucle afin de toujours mettre à jour l'affichage de l'heure de notre horloge.
Nous voyons donc ici la manière de déclarer une fonction (function nom() { instruction; }), une variable locale (var x = valeur;) et une structure conditionnelle (if (condition) { instruction; } else { instruction; }), pour ce qui est du code général. On voit donc que la syntaxe d'ActionScript ne diffère pas de beaucoup de celle des autres langages de script...

- Nouveauté, en revanche: l'utilisation de la classe Date. Elle est nécessaire dès qu'il s'agit de travailler avec le temps: années, mois, jours, heures... Nous allons donc récuperer l'heure locale (celle de l'ordinateur sur lequel est lancée l'animation) par le constructeur new Date();, et allons la stocker dans l'objet / variable locale maintenant. Nous pouvons ensuite utiliser les méthodes de maintenant: getHours() (renvoie l'heure sous la forme d'un entier compris entre 0 et 23), getMinutes() (renvoie les minutes, un entier compris entre 0 et 59) et getSeconds() (renvoie les secondes, un entier compris entre 0 et 59).

- Une horloge fonctionne sur une base de 12 heures, tandis que getHours() utilise une base de 24 heures. Il nous faut donc tester si l'heure actuelle dépasse les 12 heures, auquel cas nous lui retranchons 12 et la divisons par 12. Dans le cas contraire, nous ne faisons que la division par 12. Dans le deux cas, l'heure est stockée dans la variable locale jourPourCent. En effet, cette division par 12 nous permet d'obtenir le jour en pourcentage d'heures écoulées, ce qui nous sera utile pour opérer la rotation de l'aiguille.
A noter qu'une manière plus concise de parvenir à ce résultat aurait été d'utiliser l'opérateur modulo % pour pour passer d'un système 0-23 heures à 0-11 heures (24 et 12 correspondant au 0):
var jourPourCent = (maintenant.getHours() % 12) / 12;

Pareillement, les pourcentages de minutes et de secondes écoulées sont récupérés à l'aide des méthodes getMinutes et getSeconds divisées par 60.

- Enfin, nous utiliserons une méthode de la classe MovieClip (dont les trois clips des aiguilles sont des occurences), _rotation, qui nous permettra d'appliquer une rotation du clip sur son axe (que nous avons placé lors de la création du clip à l'extrêmité inférieure de notre trait vertical). La rotation est appliquée en degrés, en fonction du pourcentage de temps écoulés. Pour l'aiguille des heures, nous utilisons le pourcentage d'heures écoulées ainsi que le pourcentage de minutes écoulées (sauf si l'on préfère que l'aiguille ne se déplace qu'au passage de l'heure).

Toutes nos instructions principales sont maintenant prêtes, il ne nous reste plus qu'à appeller la fonction temps() en boucle pour voir notre horloge afin le temps. C'est à cela que serviront les deux autres images-clés que nous avons créées au début de ce tutoriel, sur le calque "scripts".

(action pour l'image-clé 2 du calque "scripts")
temps();

(action pour l'image-clé 3 du calque "scripts")
gotoAndPlay(2);

Vous devez maintenant voir un "a" au-dessus du cercle vide de chaque image-clé du calque "scripts": elles comportent toutes les trois des actions.
Vous comprendrez facilement les deux dernières actions que nous avons entrées: tandis que l'image-clé 2 invoque la fonction temps(), l'image-clé 3 créé une boucle sur l'image-clé 2. temps() est ainsi constamment invoquée, et l'heure est toujours mise à jour. gotoAndPlay() nous permet d'utiliser à notre avantage l'aspect "défilement du temps" propre à Flash.

Voilà, nous avons terminé notre horloge. Il ne vous reste plus qu'à compiler l'animation et à l'exporter au format SWF pour pouvoir l'utiliser directement dans un navigateur (équipé du plug-in adéquat). Notre fichier source est bien sûr disponible.

Le prochain objectif, maintenant que vous possèdez les bases principales de la programmation ActionScript, sera de vous exposer aux diverses méthodes spécifiques de Flash au travers d'applications plus proche des besoins professionnels.

Page 1 | 2