[Tutoriel] Comment faire une horloge anologique de dessins animés pour vos forums ou blog

[Caline]

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.. :Smiley4: :Smiley4: :Smiley4: 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 :Smiley4: :Smiley4:

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

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) ^^ :Smiley3: A noter qu'a ce stade la en cas de problème vous pouvez encore modifié ^^

[Caline]

Obligée de continuer sur un 2eme post j'ai dépassé la limite de caractère autorisés par forum actif ^^

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é :Smiley4: 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 ^^

[Caline]

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 :Smiley3:

[Contenu sponsorisé]