Voici un
tutoriel pas forcement très adapté pour les
néophytes
en Flash et en Action Script. Je vais m’efforcer
d’être
le plus clair et donner un maximum d’explications.
1. L'OBJET HORLOGE
On commence par créer l’objet Horloge qui contiendra l’ensemble de ce que nous allons faire. Ce qui permettra de l’insérer plus facilement dans un autre script si besoin est. Le niveau choisi est 1. Attention qu’il n’y ait rien au même niveau, il serait écrasé. Pour éviter d’avoir à répéter que nous appelons Horloge, nous passerons par la fonction with qui englobera le reste du script.createEmptyMovieClip("Horloge",
1);
with
(Horloge) {
}
Ensuite on va créer les aiguilles de l’horloge.
Elle sera
composée de 3 aiguilles de 3 tailles différentes
avec
des épaisseurs différentes.
2. LES AIGUILLES
On commence par créer l’aiguille des secondes que l’on va appeler Aiguille1. Le niveau choisi sera assez élevé, 21, pour pouvoir placer d’autres objets en dessous (les points). On utilise with pour la même raison précédemment citée.createEmptyMovieClip("Aiguille1",
21);
with
(Aiguille1) {
}
Dans cet
objet, on lui donne le type de ligne à tracer avec lineStyle.
On prend une épaisseur de 1
lineStyle(1);
On lui
dit ensuite de commencer à dessiner avec beginFill.
beginFill();
On choisit
le point de départ avec moveto
aux coordonnées (0,
0) dans l’objet
Aiguille1
(ce qui correspond aussi
à (0, 0) dans
Horloge).
moveto(0,
0);
On peut
maintenant dessiner cette fameuse aiguille avec lineto.
On lui donne les coordonnées d’arrivée
de cette
ligne. On va la faire d’une longueur de 100, mais
étant
donné que les coordonnées y sont inverses par
rapport à
un repère « standard », il faut
lui donner
les coordonnées (x, y)=( 0,
-100) pour avoir une ligne
verticale pointant
comme pour 0 seconde à l’horloge (cela
à son
importance pour facilité les calculs par la suite).
lineto(0,
-100);
Et
on ferme le tracé.
endFill();
Pour
cette première
aiguille, nous avons donc ceci :
createEmptyMovieClip("Aiguille1",
21);
with
(Aiguille1) {
lineStyle(1);
beginFill();
moveto(0,
0);
lineto(0,
-100);
endFill();
}
L’aiguille
des minutes et des heures se font sur le même modèle. Pour les
minutes, on prend une épaisseur de 1,5
et une longueur de 75
au niveau 22.
Pour les heures, une épaisseur de 2
et une longueur de 50
au niveau 23.
createEmptyMovieClip("Aiguille2",
22);
with
(Aiguille2) {
lineStyle(1.5);
beginFill();
moveto(0,
0);
lineto(0,
-75);
endFill();
}
createEmptyMovieClip("Aiguille3",
23);
with
(Aiguille3) {
lineStyle(2);
beginFill();
moveto(0,
0);
lineto(0,
-50);
endFill();
}
On a
nos aiguilles et
on pourrait s’en contenter. Cependant
ce n’est pas super niveau lecture. On va donc ajouter les
points des heures pour rendre cette horloge un peu plus claire.
3. LES POINTS DES HEURES
On a besoin de 12 points, donc une boucle est nécessaire.for
(i=1; i<=12; i++) {
}
On
va rentrer le nom
des points dans une variable nom.
nom
= "Point"+i;
Ensuite,
on lui dit de
créer l’objet point. Cette opération se
répète
12 fois, il était donc nécessaire
d’avoir 12 noms
différents à 12 niveaux différents (i).
On se sert d’eval
pour transformer le contenu de la chaîne nom
en nom de variable.
createEmptyMovieClip(nom,
i);
with
(eval(nom)) {
}
C’est
maintenant
que cela se complique un peu. On va lui dire de dessiner des points,
et ce n’est pas vraiment ce qu’il y a de plus
simple
niveau dessin dans Flash. A la main, il n’y a aucun mal
à
dessiner un cercle parfait, en programmation c’est plus
compliqué. D’ailleurs si on regarde de très
près ce
n’est pas vraiment circulaire, mais c’est suffisant
pour
ce que l’on fait.
Pour
simplifier la
gestion de coordonnées, on rentre les coordonnées
de
départ dans 2 variables :
x
= -5;
y
= -100;
Cela place le départ de l'objet assez haut pour
effectuer des rotations très simples.
Pour le style de ligne, on n’en veut pas donc on ne met rien. ^^
Pour le style de ligne, on n’en veut pas donc on ne met rien. ^^
lineStyle();
Par
contre le remplissage nous intéresse. On met donc la couleur
0xA0D0FE
(un
bleu ciel, mais vous pouvez le changer si elle ne vous plaît
pas).
beginFill(0xA0D0FE);
Les
coordonnées
de départ sont x
et y :
moveTo(x,
y);
On
lui dit ensuite de
dessiner ce « cercle »
curveTo(x-5,
y+5, x+0, y+10);
curveTo(x+5,
y+15, x+10, y+10);
curveTo(x+15,
y+5, x+10, y+0);
curveTo(x+5,
y-5, x+0, y+0);
Note : J'admets que pour
comprendre comment on dessine des courbes, ce n'est pas simple.
D'ailleurs,
je n'ai pas vraiment trouvé comment expliquer. Essayer avec
l'aide si vous voulez vraiment le faire, mais je n'ai pas vraiment
compris
celle-ci. J'ai fait par tâtonnement jusqu'à comprendre le
système. J'essaierai de faire une explication plus claire quand
j'aurai le temps.
On le ferme :
endFill();
Et
on lui attribue une valeur de rotation (en
degrés, pas en radians) pour le faire pivoter et ainsi
placer les douze points en fonction de i
_rotation
= valeur+(360/12)*i;
On a
donc cela pour
créer les points :
for
(i=1; i<=12; i++) {
nom
= "Point"+i;
createEmptyMovieClip(nom,
i);
with
(eval(nom))
{
x
= -5;
y
= -100;
lineStyle();
beginFill(0xA0D0FE);
moveTo(x,
y);
curveTo(x-5,
y+5, x+0, y+10);
curveTo(x+5,
y+15, x+10, y+10);
curveTo(x+15,
y+5, x+10, y+0);
curveTo(x+5,
y-5, x+0, y+0);
endFill();
_rotation
= (360/12)*i;
}
}
4. L'AFFICHAGE DE L'HEURE
Maintenant,
il s'agit de
faire fonctionner tout cela et que l'heure s'affiche correctement :
On
crée une
fonction que l'on place sur l'une des aiguilles (par exemple) qui
aura pour but de tourner en permanence donc : onEnterFrame
Aiguille1.onEnterFrame
= function() {
}
On
récupère
la date dans un variable :
ladate
= new Date();
On
applique à
l'Aiguille1
les secondes grâce à getSeconds()
:
Aiguille1._rotation
= ladate.getSeconds()/60*360;
Si vous voulez que
l'aiguille des secondes ne se déplace pas par
à-coup :
Aiguille1._rotation
= (ladate.getSeconds()+ladate.getMilliseconds()/1000)/60*360;
On
applique à l'Aiguille2
les minutes grâce à
getSeconds()
:
Aiguille2._rotation
= ladate.getMinutes()/60*360;
Et
les heures à l'Aiguille3
grâce à getHours()
mais
pour avoir comme sur les vraies montres un avancement de
l'aiguille en fonction du temps on ajoute
getMinutes() dans
le calcule :
Aiguille3._rotation
=
(ladate.getHours()%12+(ladate.getMinutes()/60))/12*360;
Avant de fermer with
(Horloge),
on
décale
l'objet
Horloge
pour
qu'il soit visible
_x
= 120;
_y
= 120;
J'espère
que
vous avez suivi. Pour les calculs mathématiques, je n'ai
pas expliqué. C'est suffisamment simple pour être
compris sans aide.
5. RESULTAT ET SCRIPT
Après
compilation, vous devriez avoir un truc du genre :) Si ce n'est pas le
cas, le code complet est à la fin pour vous aider.