Pas encore membre ? Enregistrez-vous ! | Identifiants égarés ?
Fermer

Horloge digitale

  • Introduction
  • Informations
Horloge digitale Vous souhaitez afficher l'heure sur votre site?
Ce tutoriel aborde une méthode qui permet d'afficher une horloge digital en Flash.  
Netger
  • Auteur : Netger
  • Publication : 25 mai 2006 19:30
  • Consultations : 7591
 

1. Nouveau document

Il faut maintenant créer un nouveau document flash.
Horloge digitale image 1 Attribuez lui les propriétés suivantes :
  • dimensions : 300 x 50 pixels (j'ai choisie les dimensions au hasard)
  • couleur d'arrière-plan : blanc (peu importe).
  • cadence : 12 images par secondes
  • unité de la règle : pixels

2. Préparer le scénario

Afin de préparer notre scène, insérez une image-clé à la frame 2 et appliquez lui une action "stop();"

Horloge digitale image 2 Nous allons maintenant ajouter un movie clip sur notre scène.
Cela nous permettra d'y insérer un code ActionScript afin de gérer l'affichage de l'heure.
Ajoutez une forme quelconque (ou même un mc vide); j'utilise ici un simple rectangle.

3. Insérer le code ActionScript

Horloge digitale image 3 Ne vous laissez pas impressionner, ce n'est pas bien compliqué ;-)
Assurez vous de bien avoir sélectionné votre mc et déployez le panneau script.

Voici le code à y insérer :
Code-source actionscript
  1. onClipEvent (enterFrame)
  2. {
  3. 	// Nom pour la date
  4. 	horloge = new Date();
  5.  
  6. 	// Gestion de l'heure
  7. 	heure = horloge.getHours();
  8. 	if (heure<10) heure = "0"+ horloge.getHours();
  9.  
  10. 	// Gestion des minutes
  11. 	minute = horloge.getMinutes();
  12. 	if (minute<10) minute = "0"+horloge.getMinutes();
  13.  
  14. 	// Gestion des Seconds
  15. 	seconde = horloge.getSeconds();
  16. 	if (seconde<10) seconde = "0"+horloge.getSeconds();
  17.  
  18. 	// Gestion du format d'affichage
  19. 	affichage ="Il est "+this.heure+" heure, "+this.minute+" minutes et "+this.seconde+" secondes.";
  20. }
 

4. Insérer un champ de texte dynamique

Notre code est prêt et fonctionnel...
c'est bien mais il nous faut quelque chose qui nous permette de l'afficher : un champ de texte dynamique.

Horloge digitale image 4 Ce champ de texte permettra donc de gérer la mise en forme de l'affichage (police, décoration, alignement, couleur, etc...).
Attention, il ne faut pas le placer n'importe où : double-cliquez sur le mc_horloge afin "d'entrer" dans le clip et insérez votre champ de texte.
N'oubliez surtout pas de lui attribuer le paramètre "texte dynamique" et de lui attribuer un nom de variable (pour notre script, "Var = affichage").

Et voilà c'est fini !!
Testez votre animation pour vérifier que tout est correct.  
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire