[Flash] Horloge analogique

[Nilana]

[Flash] Horloge analogique

---

Voici un Tutorial qui nous a été offert par un membre de ForumActif.

• Question ? : Les questions sur les tutoriaux sont à poser ICI.
  
• Auteur : gg69
  
• Tutorial :
  
  Nous allons passer à l'étape suivante, c'est à dire créer une horloge avec des aiguilles (analogique).
  Pour vous procurer le logiciel regardez le tuto sur les horloges numériques qui se trouve ici.
  
  
  Attention : Ne vous lancez pas sur ce type d'horloge sans maîtriser parfaitement la création des horloges numériques!
  
  Vous êtes prêt, alors c'est parti!
  
  Ouvrez le logiciel Flash, puis créez un nouveau document en AS2.
  
  

  Spoiler:

  
  Sélectionnez la taille de la page en 300 X 300 (trop petit ce sera invisible et trop grand vous allez vous y perdre ) Veillez à ce que la cadence soit à 12 ips.
  
  

  Spoiler:

  
  Nous allons commencer par dessiner le cadre de notre horloge avec les outils de dessin du logiciel.
  
  

  Spoiler:

  Il faut donc sélectionner l'outil de traçage de cercle qui est caché derrière celui du traçage des rectangles. Il suffit de cliquer (bouton gauche) en tenant appuyé 2 secondes sur le bouton traçage de rectangle pour voir apparaître un sous menu de formes. Nous choisirons donc le cercle (ovale).
  
  

  Spoiler:

  
  Maintenant, nous ne voulons que le contour de notre cercle et surtout que l'intérieur soit vide.
  En cliquant sur le pot de peinture, nous visualisons les différentes couleurs et nous pouvons sélectionner une fonction de vide :
  
  

  Spoiler:

  
  Pour le tracé du cercle, cliquez sur l'outil juste au dessus avec un crayon et de la couleur.
  Dans notre exemple, ce sera du rouge.
  
  

  Spoiler:

  
  Avant de tracer le cercle, il faut paramétrer son épaisseur. 1 c'est trop fin et 100 c'est plein, dans ce cas on choisira la valeur 10.
  pour effectuer ce paramétrage, cliquez sur l'outil de traçage de cercle, puis regardez les propriétés.
  
  

  Spoiler:

  
  Tracez votre cercle n'importe où en veillant à ce qu'il ne soit ni trop petit, ni trop grand.
  Il devra tenir dans le cadre blanc
  
  Cliquez ensuite sur l'outil de sélection afin de ne plus pouvoir le déformer :
  
  

  Spoiler:

  
  Par défaut, le logiciel n'active pas toutes ses fonctions pour une meilleure lisibilité, mais nous en avons besoin de quelques-unes. Cliquez sur l'onglet "fenêtre" et activez les fonctions "Aligner et Infos".
  
  

  Spoiler:

  
  Cliquez maintenant sur votre cercle pour le sélectionner. Il devient rouge avec des points blancs.
  Nous allons le centrer sur la scène.
  Dans la partie "Aligner" cliquez dans l'ordre qui suit :
  
  

  Spoiler:

  
  Le cercle est centré
  
  Nous allons le "transformer" en clip (symbole) avec un point d'action au centre.
  Il faut appuyer sur la touche "F8" (le cercle doit être sélectionné) et une fenêtre apparaît.
  Donnez un nom et contrôlez les paramètres. Ils doivent êtres identiques à l'image ci-dessous :
  
  

  Spoiler:

  
  Une fois validé par OK, il faut nommer l'occurrence du clip. A partir de maintenant, vous devez nommer exactement comme moi, sinon votre horloge ne fonctionnera pas...
  Celle-ci s'appellera "horloge" en minuscule et sans les "".
  
  

  Spoiler:

  
  Il faut entrer dans le clip en double cliquant sur notre cercle.
  Créez 3 nouveaux calques et nommez-les comme sur l'image :
  
  

  Spoiler:

  
  Sélectionnez le calque "heure", puis l'outil de traçage pour les traits (barre en diagonale au dessus de l'outil ovale). Choisissez une épaisseur de 2 (1 c'est trop petit) et la couleur bleue.
  Tracez votre trait n'importe où sauf à l'intérieur de votre rectangle blanc (zone de travail).
  Attention, ce trait représentera les heures il doit être le plus court des 3...
  
  Sélectionnez le calque des minutes et tracez un autre trait de couleur verte un peu plus long que le trait bleu. Sélectionnez le calque secondes et tracez un trait jaune encore un peu plus long.
  Vous voyez vos 3 traits dans 3 calques différents.
  
  

  Spoiler:

  Nous allons paramétrer l'heure en cliquant sur l'aiguille des heures (bleue) puis sur la touche "F8" et nous convertissons notre trait en clip avec cette fois-ci le point d'action en bas. Nommez votre clip "heure".
  
  

  Spoiler:

  
  Il faut nommer l'occurrence de votre clip "Hours" sans les "", mais la majuscule est indispensable
  
  

  Spoiler:

  
  Faites de même avec les 2 autres traits : conversion en clip avec point d'action en bas, nommez vos clips minute et seconde puis les occurrences correspondantes comme suit : "Minutes" et "Seconds".
  
  

  Spoiler:

  
  Il faut mettre nos aiguilles au centre du cercle à la perfection!!!
  En effet, le décalage même d'un seul pixel, provoque un dysfonctionnement de l'horloge.
  Elle vous donnera l'heure, mais allez savoir laquelle
  Certainement pas la bonne
  
  Rassurez-vous, le logiciel va les centrer pour vous tout seul comme un grand
  
  Cliquez sur l'aiguille des heures et reportez-vous à la fenêtre "info" qui se trouve à côté de "Aligner".
  Entrez les valeurs X et Y à zéro. L'aiguille va se placer au centre du cercle rouge :
  
  

  Spoiler:

  
  Faites de même avec les 2 autres aiguilles. Elles vont se placer les unes sur les autres, mais ne se mélangent pas car elles sont dans 3 calques différents...
  
  Nous allons maintenant ajouter les repères 12, 3, 6 et 9.
  Sélectionnez le calque 1.
  Cliquez sur l'outil texte

  Spoiler:

  Dans les propriétés, choisissez une police, une taille et une couleur avec un centrage du texte.
  Le texte est statique.
  
  

  Spoiler:

  
  Créez vos 4 champs de texte avec les valeurs 12, 3, 6 et 9.
  
  

  Spoiler:

  
  Cliquez sur l'outil de sélection :
  
  rappel

  Spoiler:

  
  Déplacez vos 4 boites de textes à l'endroit désiré.
  Vous pouvez parfaire l'alignement vertical et horizontal comme ceci :
  
  

  Spoiler:

  
  Voilà, le décor est planté, maintenant il faut lui expliquer comment tout ça va tourner...
  Il faut retourner dans la scène principale (et oui, là on était dans le clip "horloge" souvenez-vous )
  Cliquez sur "séquence 1" juste en dessous de la liste des calques puis appuyez sur F9.
  Une fenêtre apparaît. Copier/coller ce code à l'intérieur.
  

  Code:

  
onClipEvent (enterFrame)
{
var heure = new Date();
var secondes = heure.getSeconds();
var minutes = heure.getMinutes();
var heures = heure.getHours();

_root.horloge.Seconds._rotation = secondes*6;
_root.horloge.Minutes._rotation = minutes*6;
if (heures<=12) _root.horloge.Hours._rotation = heures*30;
else _root.horloge.Hours._rotation = (heures-12)*30;
}

  
  Vous obtenez ceci :
  
  

  Spoiler:

  
  Fermez la fenêtre et testez votre animation en appuyant sur CTRL et ENTREE.
  
  

  Spoiler:

  
  Génial ça fonctionne
  
  Vous pouvez améliorer votre horloge en ajoutant par glisser/déposer des images de fond ou d'aiguilles dans la bibliothèque :
  
  

  Spoiler:

  
  Bon, mais c'est pas tout ça, mais il faudrait sauvegarder ce joli travail...
  
  

  Spoiler:

  
  
  Voilà c'est terminé.
  
  En cas de difficulté à faire fonctionner votre horloge, je mets à disposition le fichier .fla qui a servi à réaliser ce tuto
  
  -->Télécharger le .fla<--