Horloge numérique avec Koolmoves.

On va faire un peu de flash maintenant ! Il va falloir télécharger un logiciel pour ça !
Celui que je vous propose de télécharger est payant mais vous pouvez l'essayer 30 jours !
Rendez-vous donc sur koolmoves.com pour le télécharger.
Installez-le et lancez le, cliquez sur ok quand il y a une petite fenêtre qui apparait.
Ca semble peut-être compliqué mais c'est un logiciel tres simple et intuitif.
Pour commencer votre horloge numerique vous pouvez mettre un fond ( une image ou une couleur )
Pour inserer une image cliquez sur File>import>cochez image et choisissez votre image.
Vous remarquerez que le plan de travail n'a pas les mêmes dimensions que votre image.
Pour regler ses dimensions, cliquez droit sur un endroit du plan de travail, et dans le menu
qui apparait, cliquez sur movie width/heigh ( en bas ) et mettez les dimensions de votre image.
Maintenant il va falloir creer un texte dynamique qui va afficher l'heure.
Pour faire un texte dynamique cliquez sur le coin inférieur droit du bouton T qui se trouve
dans la palette d'outils "tools" et la vous allez voir apparaitre un bouton nommé ab|, cliquez dessus.
Ceci est le bouton pour les textes dynamiques. Maintenant vous devez définir la zone qui délimitera
les heures. Pour cela faites un carré avec l'outil ab| sur votre fond de départ.
Choisissez un endroit qui permette de mettre les minutes et les secondes par la suite.
( un peu vers la gauche ).Cliquez droit sur ce carré et cliquez sur "show proprietie",
une fenêtre apparait. Vous pouvez alors regler la taille du carré au pixel pres avec "Position/size".
Avec "type" vous définissez la police et la taille des chiffres ( n'écrivez rien ici ).
"Color" permet de modifier la couleur des chiffres. Pour "has a border", mettez no.
Le reste n'a pas d'importance sauf le champ "variable name", entrez ici hours.
Il faut maintenant creer les chiffres des minutes, pour cela refaites les mêmes étapes que
pour le carré des heures, mais cette fois un seul parametre va changer : "variable name"
vous y entrerez minutes. Pour creer le carré des secondes c'est pareil mais
avec un "variable name" nommé seconds. Maintenant il va falloir mettre le code
qui permet de faire afficher l'heure. Pour cela cliquez droit sur un des carrés
et cliquez ensuite sur "edit frame action/sounds" ensuite cliquez sur le +
et sur action script. La une fenêtre s'ouvre. Vous allez y coller ceci :

myTime = new Date();
var seconds = myTime.getSeconds();
secondhand._rotation = seconds*6;
var minutes = myTime.getMinutes();
minutehand._rotation = minutes*6;
var hours = myTime.getHours();
hourhand._rotation = hours*30;
hourhand._rotation += (minutes/2);


( pour coller le code cliquez sur la valisette avec la feuille ) et cliquez sur OK.
Maintenant il faut voir ce que ça donne, pour cela cliquez sur "play" ( en haut ) puis
sur "play in a web browser". Vérifiez si vos chiffres sont visibles et alignés.
Si ce n'est pas le cas il faut aligner les carres. Ensuite il faut vérifier que les chiffres
sont bien animés ! Si c'est le cas vous avez fini ce tutorial. Si ce n'est pas le cas
rien de grave. Il va falloir séléctionner tous les éléments présents dans la fenetre du bas
"score/timeline" ( si vous ne l'avez pas allez dans view>score/timeline ).
Pour séléctionner tous les éléments en même temps il faut enfoncer la touche "shift"
et en même temps cliquer sur chaque élément. ( txt1, txt2, txt3 et S1 normalement ).
Quand tout est séléctionné cliquez sur le bouton . Vérifiez si tout marche comme il faut.
Pour cela rejouez l'animation comme tout à l'heure.
Si ça ne marche pas vérifiez que vous avez bien respecté tout ce qui a été dit dans ce tutorial.
Maintenant il va falloir enregistrer tout ça ! Rien de plus simple,
cliquez sur File>export movie>as a swf ( flash movie ) et choisissez le répertoire et le nom de votre horloge.
Merci d'avoir lu ce tutorial !

Une aide pour ce tutorial ? Demandez ici :
© mc-creations 2007. Reproduction interdite. Faire un lien Partenaires