Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
20 décembre 2010 1 20 /12 /décembre /2010 10:00
Horloge avec aiguilles pour site avec Flash 8

tout d''abors créer une horloge avec les aiguilles, j'ai pris le logiciel The Gimp, qui est très bien, mais vous pouvez prendre n'importe lequel (Photoshop, Corel paint shop pro...)

Créer un cadran avec The Gimp

ouvrir votre logiciel
fichier/nouveau/ 200*200pxl/transparent

Prendre outil de sélection rectangulaire cocher coins arrondis à 15 pxl
Faire votre carré et le remplir avec l'outil de remplissage avec la couleur noire
Reprendre votre outil de sélection rectangulaire vérifier coins arrondis à 15 pxl et refaire un carré mais légèrement plus petit et appuyer sur la touche "suppr".

Ce que vous devrez avoir
Image

clique droit alpha vers sélection
Image

filtre/alpha vers logo/biseau graduel

*taille de la bordure; 5
*hauteur du biseau: 40
*largeur du biseau: 2.5
*couleur arrière plan: qui doit être le blanc (normalement)

Image

ok
Prendre outil gomme et on va effacer le blanc qui dépasse des coins

On va mettre des guides
Image/guide/nouveau guide

*direction: horizontal
*position: 100

on recommence
*direction: verticale
*position: 100

votre carré doit avoir 2 lignes perpendiculaires qui se coupent au centre
outil pinceau, brosse circle(11) et mettre un point au centre

Fichier/créer/logos/biseau graduel
*texte: 12
*Taille de la police: 12

le reste ne pas toucher

faire pareil pour les chiffres: 3, 6, 9
toujours décocher backgound,

prendre le chiffre 9
faire Edition/copier visible, vous retournez sur votre cadran et vous le copier comme nouveau calque, on va le placer sur la ligne horizontale, à sa place

Faire pareil pour le 12, 3, 6


Votre cadran est fini, on l'enregistre en png, fusionner les calques (Pour sauvegarder votre travail, Faire enregistrer en psd)

Maintenant, on va faire les aiguilles qui nous serviront plus tard

Fichier/nouveau/ 3*50/ remplir avec couleur du premier plan la nommer heures
Fichier/nouveau/3*65/ remplir avec couleur du premier plan la nommer minutes
Fichier/nouveau/2*75/ remplir avec la couleur du premier plan que j'ai au-préalable mis en rouge: la nommer seconds

et vous enregistrez les aiguilles une par une en png

Maintenant, on va pouvoir commencer
Ouvrir votre logiciel Flash 8

créer: document flash
Ouvrir votre dossier ou votre cadran et les aiguilles se trouvent. les faire glisser dans bibliothèque.
Image

Mettre la scène a la taille de votre cadran, moi c'est 200*200 et ok
Image

Faire glisser votre cadran dans votre scène, ainsi que les aiguilles.
sur votre aiguille heure, clique droit convertir en symbole le nommer hours cocher la case clip et ok
Faire pareil pour les aiguilles minutes: la nommer minutes
et pour les seconds: la nommer seconds

double clique sur l'aiguille heure
déplacer votre aiguille de façon à ce que la croix soit en bas et centrer
Image

faire de même pour les autres.

on revient sur la séquence
on place les aiguilles au centre du cadran, en commençant par l'heure
Image

on va lui donner un nom d'occurrence: hours
puis les minutes
nom d'occurrence: minutes
et enfin les secondes
nom d'occurrence: seconds

Prendre l'outil de sélection et entourer votre horloge
clique droit, convertir en symbole, la nommer horloge et cocher clip, puis lui donner un nom d'occurrence: horloge

clique sur action et mettre ce code:
Code: 

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

on ferme action.

on va tester votre horloge

ctrl + entré, si tout va bien, on va l'enregistrer en swf
Faire exporter, exporte l'animation, lui donner un nom, faire ok

c'est fini



Maintenant à vous, bonne chance

Partager cet article

Repost 0
Published by Illuminati - dans Tutoriels Flash8
commenter cet article

commentaires

Profil

  • Illuminati
  • Blog de tutoriels, de tubes, d'images, de wallpapers, etc...Venez nous voir nombreux et nombreuses.Pour me contacter cliquer sur le bouton contact.
  • Blog de tutoriels, de tubes, d'images, de wallpapers, etc...Venez nous voir nombreux et nombreuses.Pour me contacter cliquer sur le bouton contact.

Recherche