[Flash] Comment faire une horloge analogique pour vos forums et blogs

Tout d'abord pour faire une horloge analogique vous aurez besoin du logiciel FLASH, en ce qui me concerne j'ai le logiciel Macromédia flash professional version 8.0.. (le tuto va donc etre réalisé en fonction de ce logiciel)..

Il faudra que votre image soit prete, si vous voulez une pendule arrondie transparente prévoyez donc une image arrondie avec des calques pour qu'elle soit a la base transparente, prevoyez si vous voulez une bordure pour votre pendule de la faire avant de lancer flash sur des logiciels comme gimp, photophiltre, photoshop.. Bref l'image de base doit etre prete avant de lancer flash, une fois cela fait pensé a noter les dimensions exact de votre image ^^..

Image standart :

Après un petit passage sur gimp pour l'arrondir, faire la bordure, régler la taille etc sa donne l'image définitive pour notre pendule la taille de cette image et de largeur : 330.. Hauteur 260..

Spoiler:

Bon vous ouvrez flash et a créer vous prennez "Document flash"

Une fois sur le document vous allez a "fenetre" puis "propriété" puis "propriété".. A noter qu'on peut accéder a propriété directement en appuyant CTRL +F3 en meme temps.. (c'est ce que je fais).. A dimension (1) mettez les dimensions largeur et hauteur de votre image.. A cadence (2) regler a 12 images/secondes.. A couleur d'arrière plan (3) pour ceux qui souhaitent une pendule transparente bref qu'on voit pas le carré autour obligatoire de régler sur blanc pour ceux qui souhaitent le cadre, reglé la couleur souhaitée, vous pouvez également réglé en blanc et faire apparaitre le cadre blanc ^^

Spoiler:

Pour fermer cet écran faites comme dans la capture (a noter que c'est valable pour toutes les fermetures tout au long des étapes ^^)

Spoiler:

Une fois fermé, vous allez retourné a votre écran de base avec un carré blanc de la dimension que vous avez réglé précédament, faites "fichier" puis "ouvrir" et la selectionnez votre image.. Une fois fait ajuster l'image pour qu'elle soit pile au milieu de carré blanc et qu'elle soit entièrement dessus au cas ou sa serait pas le cas.. Pour se faire cliquer 1 fois avec le bouton gauche de la souris, maintenez enfoncé et déplacé votre image jusqu'a ce qu'elle soit centré..

Bon maintenant, l'étape que je detesté faire.. il faut faire le contour de l'horloge ^^ pour se faire.. Allez sur (1) de la capture 1 ps: si vous voulez une pendule rectangle selectionnez le rectangle a coté ^^ dans notre exemple la pendule sera ronde pour que le rond soit transparent faites aller sur le pot de peinture (1) capture 2 puis sur le très rouge barrer (2) capture 2 et cliquer dessus.. puis ensuite allez sur (2) capture 1

Capture 1

Spoiler:

Capture 2

Spoiler:

Ensuite faites "fenetre" puis "propriété" puis "propriété" a (1) selectionné la couleur du très (prenez la meme couleur que le contour de votre pendule histoire que sa ne se voit pas) ^^ a (2) selectionnez le plus bas de l'épaisseur a savoir 0.25.. Fermer la fenetre des propriétés, vous revenez automatiquement a l'écran, et la cliquer sur le rond que vous avez cliquer taleur et faite le contour de votre pendule (ps: ne vous plantez pas faites très attention a bien tout selectionné bref ayez l'oeil ^^.. Je cherche une technique pour que sa se fasse automatiquement a ce niveau la car c'est vraiment très chiant a faire, si vous avez la technique je suis preneuse ^^ A noter que vous pouvez bouger votre image pour la faire rentrer dans le cercle en maintenant CTRL enfoncé et en maintenant en la bougant avec le bouton gauche de votre souris

Spoiler:

Une fois que c'est fini cliquer sur le curseur de la souris (1) selectionné votre pendule en faisant double clic très important sa ^^.. Puis appuyer sur F8 et a Nom (2) écrivé horloge a type vérifié que la boule noire est bien sur "clip" a Alignement (3) mettez le point noir au milieu comme sur l'image ^^ puis faites "Ok"

Spoiler:

Une fois fais, il faut nommer l'occurence.. Allez dans "fenetre" puis dans "propriété" puis "propriété" et a occurence (1) écrivez horloge comme j'ai écris dans la capture, puis fermer..

Spoiler:

Ensuite double cliquer sur la pendule (très important n'oubliez pas de faire sa) puis ajouter 3 nouveaux calques en appuyant 3 fois sur l'icone (1) sur le calque 2 faites cliques droit puis "propriété" a Nom écrivé heure (2)

Spoiler:

Ensuite meme procédure pour le calque 3 faites clique droit puis propriété puis a Nom écrivez minute Pour le calque 4 faites pareil est a Nom écrivez seconde

Une fois tout sa fini.. Cliquer sur le calque heure (1) puis sur l'outil pour faire des traits (2)

Spoiler:

Faites "fenetre" puis "propriété" puis propriété" selectionner la couleur des aiguilles voulues (1), réglez l'épaisseur de vos aiguilles (2).. Ps si vous souhaitez 3 aiguilles de couleurs différentes, et épaisseurs différentes il faudra a chaque changement de calque répétez cette opération et mettre ce que vous souhaité.. En ce qui me concerne je conseil pour l'aiguille des heures et minute une épaisseur a 3.. Pour l'aiguille des secondes une épaisseur a 1.. Une fois que c'est fait fermer tout sa et on revient a notre pendule

Spoiler:

Bon la très important dessiné l'aiguille en partant pile du "+" situé au milieu de votre pendule que vous avez Capture 1 (1) les aiguilles que vous dessiné doivent etre orienté toutes vers midi.. Capture 2 (2) et dessiné une petite aiguille qui correspondra a l'aiguille des heures..

Capture 1

Spoiler:

Capture 2

Spoiler:

Une fois que c'est fini.. Cliquer sur le calque minute (si vous voulez changer couleur + épaisseur aller dans "fenetre" puis "propriété" puis "propriété" et réglé ce que vous voulez, si vous voulez laissé tel quel comme l'aiguille des heures pas besoin d'y aller ^^.. Ensuite toujours au milieu a partir du "+" tracer l'aiguille des heures (faites une aiguille plus longue que l'aiguille des heures) et tracer cette aiguille par dessus l'aiguille de l'heure.. (1)

Spoiler:

Une fois que c'est fini.. Cliquer sur le calque seconde (si vous voulez changer couleur + épaisseur aller dans "fenetre" puis "propriété" puis "propriété" et réglé ce que vous voulez (en ce qui me concerne j'ai mis l'épaisseur a 1), si vous voulez laissé tel quel comme l'aiguille des heures pas besoin d'y aller ^^.. Ensuite toujours au milieu a partir du "+" tracer l'aiguille des secondes (faites une aiguille longue en général l'aiguille seconde est toujours la plus longue) et tracer cette aiguille par dessus l'aiguille de l'heure et minute.. (1)

Spoiler:

Voila vous devrez avoir ses 3 aiguilles positionnées ainsi ^^..

La partie suivante est décisive pour le bon fonctionnement de l'horloge, faites a l'identique comme moi, ps : pour les mots écrits en gras.. Recopier les a l'identique, respecter la casse majuscule/minuscule.. Et respecter l'orthographe exact..

Cliquer sur votre calque "heure" (1) puis appuyer F8 a Nom écrivez heure (2), a "alignement" la boule noire devra etre orientée vers le bas (3) ^^ ensuite faites "ok"..

Spoiler:

Il faut ensuite régler l'occurence de l'heure.. faites "fenetre" puis "propriété" puis "propriété" ensuite a nom de l'occurence tapez Hours (1) puis fermer

Spoiler:

Ensuite cliquer sur votre calque "minute" (1) puis appuyer F8 a Nom écrivez minute (2), a "alignement" la boule noire devra etre orientée vers le bas (3) ^^ ensuite faites "ok"..

Spoiler:

Il faut ensuite régler l'occurence de la minute.. faites "fenetre" puis "propriété" puis "propriété" ensuite a nom de l'occurence tapez Minutes (1) puis fermer

Spoiler:

Ensuite cliquer sur votre calque "seconde" (1) puis appuyer F8 a Nom écrivez seconde (2), a "alignement" la boule noire devra etre orientée vers le bas (3) ^^ ensuite faites "ok"..

Spoiler:

Il faut ensuite régler l'occurence de la seconde.. faites "fenetre" puis "propriété" puis "propriété" ensuite a nom de l'occurence tapez Seconds (1) puis fermer

Spoiler:

Bon une fois fini tout sa.. Cliquer sur calque 1 (2) puis sur A (2) qui signifie texte..

Spoiler:

Ensuite aller dans "fenetre" puis "propriété" puis "propriété" Donc la.. Regler le "texte statique" (1) c'est obligatoire ^^.. Pour régler la police mettez ce que vous souhaitez a (2) pour régler la taille de la police (3) si vous souhaitez vos chiffres et gras ou italique ou les 2 reglé a (4).. En ce qui concerne le texte il doit etre centré c'est obligatoire (5), pour la couleur de police réglez celle que vous souhaitez (6) ensuite fermer..

Spoiler:

On revient donc sur notre pendule ^^, cliquer une fois a l'endroit ou vous souhaitez que le texte soit inséré et écrivez vos chiffres ^^ ps: si c'est pas aligner ou trop haut, trop bas, c'est pas grave sa s'ajuste.. Une fois que c'est fait cliquer sur le curseur de la souris (1) et ensuite cliquer une fois avec le bouton gauche de la souris sur le chiffre souhaité (2) et déplacé le pour qui soit a l'endroit que vous souhaitez vérifié bien l'alignement haut-bas.. gauche-droite car sinon sa ne voudra plus rien dire

Spoiler:

Option facultative si vous souhaitez mettre une petite boule au milieu histoire que se soit plus jolie esthétiquement ^^.., toujours sur le calque 1 aller sur pinceau (1) puis selectionner la taille de votre boule (2) la forme de votre boule qui peut etre autre chose (3), la couleur du contour de votre boule (4) la couleur de la boule (5) et placer la sur le "+" (6), Une fois qu'on a fini tout sa, on clique sur la souris (7) ^^

Spoiler:

Ensuite il faut aller dans Séquence 1 (1) et appuyer sur F9

Spoiler:

Copier Coller ce texte (en dessous de la capture d'image) sur la partie blanche (1)

Spoiler:

Le texte a copier/coller (NE MODIFIER RIEN)


onClipEvent (enterFrame) {
time = new Date()
mil = time.getMilliseconds();
s = time.getSeconds();
m = time.getMinutes();
h = time.getHours();
Seconds._rotation = s*6+(mil/(1000/6));
Minutes._rotation = m*6+(s/10);
Hours._rotation = h*30+(m/2);
}

Voila ensuite fermer les propriétés..

Ensuite revenez sur la pendule, faites "controle" puis "tester l'animation" (1)

Spoiler:

A ce niveau la tout doit etre PARFAIT, vérifier tout que la pendule soit visible ENTIEREMENT sans que vous ayez besoin d'agrandir la fenetre, vérifié les contours de la pendule si c'est pas coupé, les aiguilles l'alignement doit etre parfait!! il ne faut aucun décalage d'aiguilles^^ les aiguilles minutes et secondes doivent etre a la bonne heure vérifier sa.. Quand a l'aiguille heure elle se mettra niquel qu'a la prochaine heure fixe (exemple la il est 19h15, il faudra attendre 20h pour qu'elle soit bien dans l'axe a l'heure, elle retarde d'une heure avant l'heure fixe bref c'est normal ne vous inquiétez pas) ^^ A noter qu'a ce stade la en cas de problème vous pouvez encore modifié ^^

Une fois que tout ses controles sont éffectués.. Il faut bien évidament enregistrer ce travail.. Faites "fichier" puis "exporter" puis "exporter l'animation" (1) ensuite dans la fenetre qui apparait donner un nom a votre pendule et vérifier bien que l'extension de type soit ".swf" faites enregistrer, une nouvelle fenetre va apparaitre "exporter au format flash player" sur cette fenetre ne touchez a rien faites simplement "ok"..

Voila notre pendule est désormais enregistrer ^^

Maintenant comment héberger la pendule, et la mettre sur un forum ou blog ou autre site ^^

Aller sur ce site :

http://www.photomaniak.com/upload/index.php l'inscription est OBLIGATOIRE, mais c'est un site entièrement gratuit, est très pratique pour l'hebergement de ce type de fichiers..

Aller dans "uploder une image" (1) puis dans "parcourir" selectionner l'image swf de votre pendule puis faites "envoyer"

Spoiler:

Une fois héberger elle apparaitra en haut (au cas ou vous avez déja héberger plusieurs images) cliquer sur le lien (1)

Spoiler:

Si vous souhaitée l'image avec le cadre carré (non transparente donc) sélectionner directement le code (1)

Spoiler:

Ce qui donnera sa :



Si vous souhaitez une image ronde donc et transparente donc sur les coté pour pas que sa fasse un cadre carré bref comme l'exemple ici :


Donc pour la transparence selectionner ce code si (1)

Spoiler:

La suite sur le prochain post car je suis obligé de désactivé le bbcode et html pour pouvoir vous montrer ^^

Ce qui donne pour notre exemple :

[embed-flash(330,260)]http://photomaniak.com/upload/out.php/i662161_MarieAntoinetteetLadyOscar.swf[/embed-flash]

Mais vous ne garderez que le lien a savoir : http://photomaniak.com/upload/out.php/i662161_MarieAntoinetteetLadyOscar.swf

<EMBED SRC="votre lien" WIDTH="250" HEIGHT="250" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" PLAY="False" WMODE="transparent" LOOP="False" QHALITY="High"></EMBED>

Pour régler la taille de votre pendule a WIDTH (largeur)="mettre le chiffre souhaité" et a HEIGHT (hauteur)="mettre le chiffre souhaité"

Ce qui donne pour notre exemple :

<EMBED SRC="http://photomaniak.com/upload/out.php/i662161_MarieAntoinetteetLadyOscar.swf" WIDTH="250" HEIGHT="250" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" PLAY="False" WMODE="transparent" LOOP="False" QHALITY="High"></EMBED>

Voila pour faire une pendule analogique ^^ Y'a pu qu'a la mettre ou vous souhaitez

Miss la balise code est fait pour inscrire du code, pas besoin de désactiver les choses :

Code:

[code]...[/code]

C'est fort dommage que le rendu soit si pixélisé au niveau de la forme entre autre.

Caline a écrit:

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;
}

Si toi t'arrives à comprendre ce que signifie ce langage, chapeau alors !

GénéDA a écrit:

Miss la balise code est fait pour inscrire du code, pas besoin de désactiver les choses :

Code:

[code]...[/code]

C'est fort dommage que le rendu soit si pixélisé au niveau de la forme entre autre.

Je peux pas pour ici, en ce qui concerne code sa fait horrible sur l'affichage ^^ déja niveau couleurs sa donne violet fushia sur bleu très clair pour les lettres ^^ et sa fait en fenetre ou faut décendre avec souris bref on lit très mal..

Pour la pixélisation de l'image, l'image de base que j'ai trouvée sur le net est petite, et en la retravaillant avec gimp j'ai du l'agrandir entre autre c'est sa qui a provoqué la pixélisation ^^ pourtant j'ai enregistré en png et non en gif.. Mais sa a pas suffit pour la qualité d'image..

Il existe apparemment un excellent logiciel gratuit permettant d'agrandir une image sans la pixelliser. Je ne sais pas ce qu'il vaut.

Et il permet aussi d'arrondir, de faire une bordure et qui gere les calques?

C'est quoi ce logiciel sa m'interesse? ^^

Caline a écrit:

Et il permet aussi d'arrondir, de faire une bordure et qui gere les calques?

Aucune idée.

A tester...

Voici le logiciel : http://french.eazel.com/lv/group/view/kl57957/Liquid_Resize.htm

J'ai testé le logiciel, enfin si on peut appeler sa logiciel c'est nul lol.. On peut rien faire avec..

Et c'est horrible la déformation quand tu change la taille, je vais rester sur gimp lol..

Edit : j'en ai profité pour faire une modification sur les couleurs notamment de code car je voyais rien lol

Ah bon, bah tant pis lol

t'auras au moins essayé !

Bon alors plusieurs ptites remarques maintenant que j'y arrive. J'ai pas encore testé ta méthode la miss mais je le ferai demain ^^

Alors moi j'utilise un autre AS si jamais ça interesse quelqu'un (je ferai aussi un tuto avec tout ce que j'ai pu apprendre et la méthode que j'utilise)
D'après mes recherches c'est l'as le plus utilisé:

Citation :

onClipEvent (enterFrame) {
time = new Date()
mil = time.getMilliseconds();
s = time.getSeconds();
m = time.getMinutes();
h = time.getHours();
seconds._rotation = s*6+(mil/(1000/6));
minutes._rotation = m*6+(s/10);
hours._rotation = h*30+(m/2);
}

Sinon je trouve plus pratique dans flash de ne pas passer par le menu ou les clic droit pour fermer: il suffit soit de passer par les raccourcis clavier si vous les connaissez ou alors vous avez les fenetres déjà présente dans votre document, il suffit de cliquer sur les fleches ou de glisser la fentre pour l'ouvrir selon le cas:

Spoiler:

Spoiler:

Caline a écrit:

Une fois sur le document
vous allez a "fenetre" puis "propriété" puis "propriété".. A noter
qu'on peut accéder a propriété directement en appuyant CTRL +F3 en meme
temps.. (c'est ce que je fais)

Du coup plus besoin de passer par là ^^

Spoiler:

Voilà, je trouve ça plus pratique

Pour les propriété je fais toujours CTRL et F3 comme j'ai indiqué d'entrée.. Pour fermer propriété je peux pas faire comme tu fais sur mon pc actuel car j'ai un petit écran ^^ c'est pour sa que j'avais fais mes premières pendules sur mon autre pc vista lool..

En ce qui concerne ton AS je vais faire un test avec le tien voir si y'a ou pas l'ajustage de l'heure.. Vais faire le test maintenant je vais voir si sa corrige le soucis de l'aiguille (ps: ben après skype loool)

Code:

..............................!        !         
                            .! !      ! !         
                            ! . !    ! . !         
                              ^^^^^^^^^ ^           
                            ^            ^         
                          ^  (0)      .(0)  ^     
                        ^          ""          ^     
                        ^    **************    ^   
                      ^    *                *    ^   
                    ^    *    /\  /\  /\      *    ^ 
                  ^    *                        *    ^
                  ^  *      /\  /\  /\  /\        *  ^
                  ^  *                            *  ^
                  ^  *                            *  ^
                  ^  *                            *  ^
                  ^  *                            *  ^ 
                    ^ *                          * ^
                      ^ *                      * ^
                        ^ *                  * ^
                          ^ *      ) (      * ^
                          . ^^^^^^^^ ^^^^^^^^^

Tom a écrit:

Il existe apparemment un excellent logiciel gratuit permettant d'agrandir une image sans la pixelliser. Je ne sais pas ce qu'il vaut.

Aucun logiciel ne peut faire cela !

Si tous lol en réalité, mais cela doit être des images vectorielles ! Ce qui est très rarement le cas.

La balise code, c'est fait pour cela, c'est mieux que rien.

C'est dommage pour la pixélisation quand meme ^^ enfin bon faut trouver une image au bon format dès le départ qu'elle soit pas trop petite sa aide..

Bon concernant le script sa fonctionne pas ^^

Ben en fait pour le script, ça fonctionne mais il faut faire le montage de l'horloge différement. Comme celui que je fais et que je t'ai montré hier. (ou plutot cette nuit d'ailleurs)

Concernant l'horloge du forum, du coup tu l'a refaite? Mais il me semblait hier que le cercle du centre se placé sur les aiguilles et non l'inverse, non?

Edit: je n'arrive pas à rendre le fond de l'horloge transparent même avec ta méthode! Pourrais tu m'aider la miss?

EDIT BIS: problème résolu! je suis trop tête en l'air!!!

en fait, caline, au vu du topic, tu aurais pu faire l'horloge qui est sur mon forum ?

caline = un puits de connaissances sans fin (sans oublier etana ^^)

Salut Caline j'ai pas le logiciel FLASH alors tu peux me faire une horloge avec cette image



stp

Coucou miss ^^

Je te souhaite la bienvenue au royaume




Je vais voir sa ^^

Tu souhaiteré quel couleur pour les chiffres et aiguilles?

Ta un forum ou blog? Que je zieute niveau design pour voir niveau couleur ce que sa donneré? Et sa serait pour mettre ou? Histoire que je vois la taille ^^

Oui j'ai un forum et je ve bien du bleu foncer où du noire