Création d`une montre numerique sous flash

Création d'une montre numerique sous flash
Introduction:
Pour réaliser une montre sous flash il faut récupérer l'heure de l'utilisateur,
enfin plutot de son ordinateur !
Pour récuperer l'heure et s'en servir dans une animation flash il nous faut
le code script "new Date()" que l'on va attribuer a une variable, par ex: "heure".
Voilà le code :
heure = new Date();
A partir de ce moment on peu connaitre l'heure precise (de l'O.S de l'utilisateur)
avec les methodes suivantes : "getHours()" , "getMinutes()" et getSeconds()"
Ces codes seront liés à la varible "heure" et attribués à chaque fois à une variable
Exemple :
hr = heure.getHours();
min = heure.getMinutes();
sec = heure.getSeconds();
Faites l'essai:
1- Créez un nouveau MovieClip, placez le sur la scène.
Attribuez lui un nom , par ex: digit
2- Dans ce Movieclip il faut maintenant placer
une fenetre de texte dynamique avec comme nom de variable par ex: montre
3- Toujours dans ce même Movieclip, nous allons placer un
nouveau MovieClip vide qui lui va servir de "controleur".
Nous lui donnons comme évenement à ca lecture la gestion du texte
dynanique "montre" qui va afficher l'heure !
heu ... oui ! ok , c'est pas claire :-) voici le code , vous allez comprendre :
onClipEvent (enterFrame) {
heure = new Date();
hr = heure.getHours();
min = heure.getMinutes();
sec = heure.getSeconds();
_root.digit.montre = hr add ":" add min add ":" add sec;
}
Explications :
- La variable "heure" c'est l'heure de l'ordinateur recupérée par le code new Date()
- Les variables "hr", "min" et "sec" sont les variables utilisées pour l'affichage
numérique de l'heure dans notre champs texte dynamique précedement nomé "montre"
- "_root.digit.montre = ..." , est l'accion pointée qui va afficher les valeurs des variables
"hr", "min" et "sec" sur le texte dynamique "montre" dans le MC "digit" que ce trouve sur le _root
(..ouufff) :-)
Ce n'est pas Fini !
Si vous avez fait l'essai, vous observerez qu'il y a un petit défaut !
Probleme de lecture de l'heure :
Pour un affichage numerique de l'heure , flash affiche les chiffres de 0 à 9
comme des chiffres uniques. Pour notre Montre numerique nous souhaitons
voir par exemple 03 et non 3 .
Resolution :
Verifier la valeur des variables "min" (minutes) et "sec" (secondes)
si elles sont inferieures ou égales à 9 nous rajoutons un "0" à leur affichage .
if (sec<=9) {
sec = "0"+sec;
} else {
sec = sec;
}
if (min<=9) {
min = "0"+min;
} else {
min = min;
}
Voilà , cette fois c'est la bonne !
Vous devriez avoir un affichage dans ce style 11:09:02
Il ne vous reste qu'a presonnaliser le tout et hop ...
Vous pouvez maintenant continuer avec une seconde leçon : " La MONTRE ANALOGIQUE " (dite à
aiguilles) ...
Le principe :
L'heure est obtenue grâce au systeme étudié précédement!
(voir le tutoriel "Création d'une Montre numerique sous flash")
En résumé :
1- Créez un nouveau MovieClip, placez-le sur la scène.
Attribuez lui un nom , par ex: horloge
2- Dans ce même Movieclip, nous allons placer un
nouveau MovieClip vide qui lui va servir de "contrôleur".
Nous lui donnerons comme évènement à sa lecture la gestion de notre horloge.
onClipEvent (enterFrame) {
}
(nous verons les codes plus tard)
SUITE :
A partir de ce moment là,
Nous changeons tout simplement le principe de son affichage.
Au lieu d'avoir une variable texte qui se modifie comme dans le tutoriel
précédant, nous modifions ici une apparence graphique .
Pour ce faire nous allons utiliser trois éléments graphiques :
- la petite aiguille ( heures )
- la grande aiguille ( minutes )
- la troteuse ( secondes )
Chacun de ces élément devra être un MovieClip
( assurez-vous à la creation de ces MovieClips, d'avoir comme centre
l'extremité de chaque aiguille !! ça va vous aider pour les faire
trourner :-) , si ce n'est pas le cas , éditez le centre de l'objet
( par Modifier > transformer > editer le centre )
Donc :
Placez un movieclip ( la troteuse des secondes ) dans le MovieClip "horloge"
Nommez l'occurrence de ce movieclip ( ex. : s )
Placez un movieclip ( l'aiguille de l'heure ) dans le MovieClip "horloge"
Nommez l'occurrence de ce movieclip ( ex. : h )
Placez un movieclip ( l'aiguille des minutes ) dans le MovieClip "horloge"
Nommez l'occurrence de ce movieclip ( ex. : m )
Nous avons maintenant les éléments graphiques de notre montre ( les aiguilles )
et l'heure de l'utilisateur. Il nous faut interpréter tout ça !
Comment faire trourner les aiguilles :
Apres avoir placé nos trois aiguilles sur la scène avec toutes
les trois pour centre un même point, faisons-les tourner .
Elements :
- Dans un cercle complet nous avons 360º
- Dans une demie journee 12heures
- Dans une heure 60 minutes
- et dans une minute 6 secondes
( sur ce coups on ne vous a rien appris :-) !! )
Et hop , un petit coup de mathématique et on definit la position angulaire
de chaque aiguille selon l'heure :
- pour les minutes , nous multiplions la valeur de la variable "min "
par 6 pour obtenir l'angle de rotation ( puisqu'il y a 6 fois 60 dans 360 ).
- pour les secondes pareil, nous multiplions la valeur de la variable " sec "
par 6 pour obtenir l'angle de rotation.
- pour l'heure , comme dans notre cadran nous n'affichons que 12 heures il nous faut poser une
condition !
Si la valeur de la variable " hr "est inferieure ou égale à 12 nous multiplions
cette valeur par 30 pour obtenir l'angle de rotation ( puisqu'il y a 30 fois 12 dans 360 )
et si la valeur de notre variable est superieur à 12 nous lui retirons 12 et réalisons la même
operation!
Logique non ?
Mettre tout cela en application:
Sélectionnez le Movieclip " contrôleur " ( voir " En résumé : étape 2- " )
et attribuez-lui comme évènement à sa lecture ceci :
onClipEvent (enterFrame) {
heure = new Date();
_root.horloge.secondes = heure.getSeconds();
_root.horloge.minutes = heure.getMinutes();
_root.horloge.heures = heure.getHours();
_root.horloge.s._rotation = _root.horloge.secondes*6;
_root.horloge.m._rotation = _root.horloge.minutes*6;
if (_root.horloge.h.<=12) {
_root.horloge.h._rotation = _root.horloge.heures*30;
} else {
_root.horloge.h._rotation = (_root.horloge.heures-12)*30;
}
}
Voilà nos aiguilles qui tournent ... qui tournent :-)