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

Horloge analogique

  • Introduction
  • Informations
Horloge analogique Nous allons voir ici comment réaliser une horloge de type analogique avec Flash.  
Netger
  • Auteur : Netger
  • Publication : 18 oct. 2006 16:44
  • Consultations : 11295
 

1. Nouveau document

Il faut maintenant créer un nouveau document flash.
Horloge analogique image 1 Attribuez lui les propriétés suivantes :
  • dimensions : 300 x 300 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
Peignez ensuite l'arrière plan en noir.

2. Préparer le MC de base

Horloge analogique image 2 Nous allons maintenant ajouter un movie clip sur notre scène (clic droit et convertir en symbole).
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) et donnez lui le nom de variable "horloge".

Pour des raisons pratiques, dessinez un point (sur un nouveau calque) afin de repérer le centre du MC "horloge".

3. Insérer le code ActionScript

Horloge analogique image 3 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. 	// On utilise une variable pour stocker et séparer les valeurs de la date actuelle
  4. 	var heure = new Date();
  5.  
  6. 	// On récupére l'heure, les minutes et les secondes dans des variables
  7. 	var secondes = heure.getSeconds();
  8. 	var minutes = heure.getMinutes();
  9. 	var heures = heure.getHours();
  10.  
  11. 	// Affichage des secondes
  12. 	_root.horloge.sec._rotation = secondes*6;
  13.  
  14. 	// Affichage des minutes
  15. 	_root.horloge.min._rotation = minutes*6;
  16.  
  17. 	// Affichage de l'heure
  18. 	if (heures <= 12) _root.horloge.heur._rotation = heures*30;
  19. 	else _root.horloge.heur._rotation = (heures-12)*30;
  20. }
 
Pour que vous compreniez mieux ce code :
  • "heure","heures","minutes" et "secondes" sont des variables
  • "horloge" est un MC contenant les aiguilles
  • "sec" est le MC représentant l'aiguille des secondes
  • "min" est le MC représentant l'aiguille des minutes
  • "heur" est le MC représentant l'aiguille des heures
Nous n'avons pas encore réalisé ces 3 derniers MC, c'est donc ce que nous allons faire maintenant.

4. Placer les aiguilles

Pour les aiguilles j'utiliserai ici de simples rectangles mais vous pouvez très bien utiliser un bitmap.

Horloge analogique image 4 Avant de commencer prenez soin de vous placer dans le MC horloge.
Pour cela il vous suffit de double-cliquer dessus.

La méthodes sera la même pour chaque aiguille :
  • créer un nouveau calque
  • dessiner/importer et placer l'aiguille au centre
  • la transformer en MC en prenant soin de définir le point de pivot
  • lui attribuer un nom de variable

5. Minutes et secondes

Répétez cette opération pour les 2 autres aiguilles (sans oublier de leur attribuer leur nom de variable) et testez votre animation pour vérifier que tout est correct. Horloge analogique image 5  
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire