Tutoriel: créer une horloge personnalisé

par **artkabis** Mer 17 Sep - 14:16

artkabis: Fondateur; Messages : : 4545
Age : : 40
Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
Date d'inscription : 11/09/2008

Capacités en graphisme
Capacité graph:
(9/10)

Message n°1

Tutoriel: créer une horloge personnalisé

Message par artkabis Mer 17 Sep - 14:16

Bonjour à tous, aujourd'hui nous allons créer une horloge personnalisée pour sont site ou son blog.

Vous pouvez télécharger la source en cliquant ICI

Attention! le tutoriel est assez long et il est donc possible que le chargement prenne un peu de temps.

Le tutoriel:

Voici le code utilisé dans ce tutoriel, copiez le avant de lire la video:

Code:

onClipEvent (enterFrame) { heure = new Date(); _root.horloge.secondes = heure.getSeconds(); _root.horloge.msecondes = heure.getMilliseconds(); _root.horloge.minutes = heure.getMinutes(); _root.horloge.heures = heure.getHours(); _root.horloge.s._rotation = _root.horloge.secondes * 6 + _root.horloge.msecondes / 166;//on attribue une rotation du calque "s" en fonction des secondes _root.horloge.m._rotation = _root.horloge.minutes * 6 + _root.horloge.secondes / 10;//on attribue une rotation du calque "m" en fonction des minutes if (_root.horloge.h <= 12) { _root.horloge.h._rotation = _root.horloge.heures * 30 + _root.horloge.minutes / 2;//on attribue une rotation du calque "h" en fonction des heures } else { _root.horloge.h._rotation = (_root.horloge.heures - 12) * 30 + _root.horloge.minutes / 2; } // end else if //trace(heure+minute+seconde); ici vous pouvez verifier la mise à jour de l'heure }

Dernière édition par artkabis le Jeu 28 Mai - 21:13, édité 9 fois

**par **Zarkann** Ven 9 Jan - 13:33**

Zarkann

Zarkann: Nouveau membre; Messages : : 5
Age : : 56
Logiciels : : Quelles logiciel utilisez vous?
Date d'inscription : 02/01/2009

Message n°2

Re: Tutoriel: créer une horloge personnalisé

par Zarkann Ven 9 Jan - 13:33

merci bien pour le tuyau

en fait j'ai pas dormit de la nuit après avoir fait une bannière avec une simple animation de 30 images

je me suis lancer dans le tutoriel "créer un menu glow et l'animer" (que j'ai réussi du premier coup)

après je vais attaqué les horloges

merci en tout cas pour tout ces tutoriaux

Cordialement Eric

**par **artkabis** Ven 9 Jan - 14:06**

artkabis

artkabis: Fondateur; Messages : : 4545
Age : : 40
Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
Date d'inscription : 11/09/2008

Capacités en graphisme
Capacité graph:
(9/10)

Message n°3

Re: Tutoriel: créer une horloge personnalisé

par artkabis Ven 9 Jan - 14:06

Et bien écoute, moi mon ptit plaisir c'est de voir de personnes qui apprennent en faisant mes tutoriels.

PS: Bravo pour la réussite du tuto menu glow, car c'est n'est pas le plus simple.

Dernière édition par artkabis le Ven 2 Aoû - 11:46, édité 1 fois

**par **HPWEST** Jeu 19 Fév - 15:06**

HPWEST

HPWEST: Nouveau membre; Messages : : 47
Age : : 53
Logiciels : : Adobe
Date d'inscription : 19/02/2009

Message n°4

Re: Tutoriel: créer une horloge personnalisé

par HPWEST Jeu 19 Fév - 15:06

Bonjour !!!!

suite au tuto bien réalisé je me demandais si il était possible d'ajouter une fonction de sonnerie qui serait toute les heures. si oui qu'elle serait la façon de l'ajouter.
au plaisir de lire vos réponses ..

**par **AlanAdk** Jeu 19 Fév - 19:07**

AlanAdk

AlanAdk: Ceinture jaune; Messages : : 280
Age : : 47
Logiciels : : Flash, Illustrator, Photoshop, Indesign
Date d'inscription : 16/02/2009

Capacités en graphisme
Capacité graph:
(0/0)

Message n°5

Re: Tutoriel: créer une horloge personnalisé

par AlanAdk Jeu 19 Fév - 19:07

Alors peut etre une alternative, si l'es aiguilles sont des symboles on peut très bien imaginer un autre clip ( un petite boule) qu'on peut positionner avec la souris sur le cadran et quand il y a contact avec ces deux clips ou symbole, ca declanche le son !

Je dis ca parce qu'avec ce que je connais je pense pouvoir le faire et ca pourrais etre sympa comme reveil de deplacer un truc sur le cadran.

Tiens je vais essayer !

**par **AlanAdk** Ven 20 Fév - 15:50**

AlanAdk

AlanAdk: Ceinture jaune; Messages : : 280
Age : : 47
Logiciels : : Flash, Illustrator, Photoshop, Indesign
Date d'inscription : 16/02/2009

Capacités en graphisme
Capacité graph:
(0/0)

Message n°6

Re: Tutoriel: créer une horloge personnalisé

par AlanAdk Ven 20 Fév - 15:50

HPWEST a écrit:Bonjour !!!!

suite au tuto bien réalisé je me demandais si il était possible d'ajouter une fonction de sonnerie qui serait toute les heures. si oui qu'elle serait la façon de l'ajouter.
au plaisir de lire vos réponses ..

Voici une piste pour le reveil. J'ai modifié rapidement la petite horloge fournis sur le forum et j'ai placé un rond rouge qui correspond au reveil.
Vous pouvez bouger ce point avec la souris et le positionner sur le cadran ou vous souhaitez. Lorsque l'aiguille des secondes rentre en contact avec le point rouge , ca sonne ! ( j'ai pris l'aiguille des secondes car elle tourne plus vite pour le test mais il faudrait le faire pour les aiguilles heures et les minutes)

Par contre mon souci est que l'aiguille est considere comme un "symbole" , donc lorsqu'elle est de travers il faut imaginer un rectangle autour, c'est pour cela que la colision se fait avec le point rouge au niveau du "symbole" et non au niveau de la "forme" de l'aiguille. Voir image :
Quelqu'un aurai une piste pour gerer la colision avec la forme e non le symbole par hasard ?
J'ai le code a disposition si vous souhaitez.

Dernière édition par AlanAdk le Ven 20 Fév - 16:52, édité 1 fois

**par **Amonbofils** Ven 20 Fév - 16:40**

Amonbofils

Amonbofils: Ceinture jaune; Messages : : 414
Age : : 40
Logiciels : : Quelles logiciel utilisez vous?
Date d'inscription : 26/11/2008

Capacités en graphisme
Capacité graph:
(0/0)

Message n°7

Re: Tutoriel: créer une horloge personnalisé

par Amonbofils Ven 20 Fév - 16:40

moi je dirait bien pour faire plus simple de créer un cercle de rayon = a l'aiguille et de permettre le déplacement du point rouge que sur ce cercle, du coup, ca ne prend en compte que le bout du symbole, donc l'angle de ta zone en pointiller, mais c'est de la bidouille :D

**par **AlanAdk** Ven 20 Fév - 16:51**

AlanAdk

AlanAdk: Ceinture jaune; Messages : : 280
Age : : 47
Logiciels : : Flash, Illustrator, Photoshop, Indesign
Date d'inscription : 16/02/2009

Capacités en graphisme
Capacité graph:
(0/0)

Message n°8

Re: Tutoriel: créer une horloge personnalisé

par AlanAdk Ven 20 Fév - 16:51

Ca pourrait être une solution mais ca nous limitera dans le graphisme. Je note quand meme!

J'ai pris mon bouquin d'ActionScript et on dirait que c'est pas si evident que ca ! Peut être en ActionScript 3 c'est plus simple pour ceux qui connaissent les colisions sous AS3

On peut effacer le cadre du symbole lorsqu'on fait un test de colision avec la souris. ex: hitTest (._xMouse, ._yMouse, false) Le false ici indiquerai qu'on ne fait attention qu'a la forme et pas au symbole .

Mais de symbole a symbole c'est pas la meme

**par **HPWEST** Ven 20 Fév - 17:27**

HPWEST

HPWEST: Nouveau membre; Messages : : 47
Age : : 53
Logiciels : : Adobe
Date d'inscription : 19/02/2009

Message n°9

Re: Tutoriel: créer une horloge personnalisé

par HPWEST Ven 20 Fév - 17:27

ok là moi je bosse sur deux horloges dont une que je présente ici

et l'autre qui est en prépa car ce sera le logo de vista avec son animation et que cette animation se mettra en marche toute les heures avec un son.

Dernière édition par HPWEST le Dim 22 Fév - 16:18, édité 1 fois

**par **AlanAdk** Ven 20 Fév - 17:39**

AlanAdk

AlanAdk: Ceinture jaune; Messages : : 280
Age : : 47
Logiciels : : Flash, Illustrator, Photoshop, Indesign
Date d'inscription : 16/02/2009

Capacités en graphisme
Capacité graph:
(0/0)

Message n°10

Re: Tutoriel: créer une horloge personnalisé

par AlanAdk Ven 20 Fév - 17:39

Ok , le reveil on peut le faire en code effectivement c'est certainement plus simple, mais j'aurai bien aime faire tourner le reveil avec le ptit bouton qu'on positionne, j'imagine pas mal de fonctionnalite par la suite.

Par contre elle est jolie ton horloge, mais les ptits points qui clignotent, j'aime pas trop ca fait "mal aux yeux", et puis si tu permets ne prend pas le logo de vista pour faire ton anime ! On en bouffe déjà assez comme ça ! (Lol)

Bon a plus tard

**par **HPWEST** Ven 20 Fév - 17:51**

HPWEST

HPWEST: Nouveau membre; Messages : : 47
Age : : 53
Logiciels : : Adobe
Date d'inscription : 19/02/2009

Message n°11

Re: Tutoriel: créer une horloge personnalisé

par HPWEST Ven 20 Fév - 17:51

AlanAdk a écrit:Ok , le reveil on peut le faire en code effectivement c'est certainement plus simple, mais j'aurai bien aime faire tourner le reveil avec le ptit bouton qu'on positionne, j'imagine pas mal de fonctionnalite par la suite.

Par contre elle est jolie ton horloge, mais les ptits points qui clignotent, j'aime pas trop ca fait "mal aux yeux", et puis si tu permets ne prend pas le logo de vista pour faire ton anime ! On en bouffe déjà assez comme ça ! (Lol)

Bon a plus tard

il parait plus simple de gérer le réveil en action script c'est certain ..

et pour le reste ( les points rouge et le logo, cela reste des amusements )

**par **AlanAdk** Dim 22 Fév - 17:46**

AlanAdk

AlanAdk: Ceinture jaune; Messages : : 280
Age : : 47
Logiciels : : Flash, Illustrator, Photoshop, Indesign
Date d'inscription : 16/02/2009

Capacités en graphisme
Capacité graph:
(0/0)

Message n°12

Re: Tutoriel: créer une horloge personnalisé

par AlanAdk Dim 22 Fév - 17:46

HPWEST a écrit:trouver...

Ah tu as trouve ? Tu passe par quoi alors ?

J4avais pas vu j'ai mis un autre code entre temps je pense que ca peut marcher aussi ou pas loin.

**par **AlanAdk** Dim 22 Fév - 22:34**

AlanAdk

AlanAdk: Ceinture jaune; Messages : : 280
Age : : 47
Logiciels : : Flash, Illustrator, Photoshop, Indesign
Date d'inscription : 16/02/2009

Capacités en graphisme
Capacité graph:
(0/0)

Message n°13

Re: Tutoriel: créer une horloge personnalisé

par AlanAdk Dim 22 Fév - 22:34

perceque je trouvais les deux tres ressemblant c'est pour ca je te confondais

**par **HPWEST** Lun 23 Fév - 17:41**

HPWEST

HPWEST: Nouveau membre; Messages : : 47
Age : : 53
Logiciels : : Adobe
Date d'inscription : 19/02/2009

Message n°14

Re: Tutoriel: créer une horloge personnalisé

par HPWEST Lun 23 Fév - 17:41

bon ben vu que je nul en as
j'ai fais ceci mais cela ne marche pas lol je l'ai mis a la suite du code de l'horloge

Code:

/*début son*/ { var son = new Sound(); if (_root.getHours() ==0 && _root.getSeconds() == 0 && _root.getMinutes() ==0) son.loadSound("Starting.mp3", true); } /*fin son*/

pas évident a coder tout sa lol mais je continue de chercher lol

**par **AlanAdk** Ven 27 Fév - 18:43**

AlanAdk

AlanAdk: Ceinture jaune; Messages : : 280
Age : : 47
Logiciels : : Flash, Illustrator, Photoshop, Indesign
Date d'inscription : 16/02/2009

Capacités en graphisme
Capacité graph:
(0/0)

Message n°15

Re: Tutoriel: créer une horloge personnalisé

par AlanAdk Ven 27 Fév - 18:43

Apres ce tuto ma petite Horloge.

Merci Artkabis.

**par **artkabis** Ven 27 Fév - 19:40**

artkabis

artkabis: Fondateur; Messages : : 4545
Age : : 40
Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
Date d'inscription : 11/09/2008

Capacités en graphisme
Capacité graph:
(9/10)

Message n°16

Re: Tutoriel: créer une horloge personnalisé

par artkabis Ven 27 Fév - 19:40

Et bien c'est plutôt jolie tout ça, j'aime assez l'anim des secondes, bien joué !!!

**par **FireSnake** Mar 3 Mar - 9:50**

FireSnake

FireSnake: Ceinture blanche; Messages : : 127
Age : : 32
Logiciels : : Photoshop CS4, Flash CS3, Dreamweaver CS3, AutodesK 3DS Max 9
Date d'inscription : 02/01/2009

Capacités en graphisme
Capacité graph:
(6/10)

Message n°17

Re: Tutoriel: créer une horloge personnalisé

par FireSnake Mar 3 Mar - 9:50

Hop voilà une petite horloge toute simple Merci Artkabis !

Je n'ai pas mis le fond transparent, mais bon ce n'est pas super grave

**par **Lilwarre A.K.A. Prod** Mar 3 Mar - 11:43**

Lilwarre A.K.A. Prod

Lilwarre A.K.A. Prod: Ceinture verte; Messages : : 631
Age : : 34
Logiciels : : Adobe Master Collection CS4!
Date d'inscription : 31/12/2008

Capacités en graphisme
Capacité graph:
(0/0)

Message n°18

Re: Tutoriel: créer une horloge personnalisé

par Lilwarre A.K.A. Prod Mar 3 Mar - 11:43

Très beau toute ces créas dit donc

**par **maellelian** Mar 24 Mar - 0:43**

maellelian

maellelian: Nouveau membre; Messages : : 40
Age : : 53
Logiciels : : Quelles logiciel utilisez vous? Photoshop, Flash
Date d'inscription : 22/02/2009

Message n°19

Re: Tutoriel: créer une horloge personnalisé

par maellelian Mar 24 Mar - 0:43

Hop, un tit essai de ton tuto :

J'suis contente, j'ai réussi du premier coup... Bon ok, ton tuto est très bien fait, mais bon, contente quand même

**par **Benji27930** Ven 31 Juil - 9:50**

Benji27930

Benji27930: Nouveau membre; Messages : : 15
Age : : 31
Logiciels : : Photoshop CS4, Flash CS4
Date d'inscription : 17/02/2009

Capacités en graphisme
Capacité graph:
(0/0)

Message n°20

Re: Tutoriel: créer une horloge personnalisé

par Benji27930 Ven 31 Juil - 9:50

Salut tout le monde voila ma petite horloge :

j'aimerai savoir aussi si je pouvais le mettre en fond d'écran sur mon téléphone portable ?

Sinon super tuto merci artkabis !

**par **artkabis** Ven 31 Juil - 10:36**

artkabis

artkabis: Fondateur; Messages : : 4545
Age : : 40
Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
Date d'inscription : 11/09/2008

Capacités en graphisme
Capacité graph:
(9/10)

Message n°21

Re: Tutoriel: créer une horloge personnalisé

par artkabis Ven 31 Juil - 10:36

Et bien, il y a de très belles choses ici!!! Bien joué à tous

Sinon, il est tout à fait possible d'intégrer une horloge à un téléphone mobile, il y à d'ailleurs un tutoriel ici>> http://www.artkabis.net/tutos-as2-f97/horloge-as2-pour-sony-ericsson-avec-adobe-device-central-par-krysh-nar-t1146.htm

**par **Benji27930** Ven 31 Juil - 10:39**

Benji27930

Benji27930: Nouveau membre; Messages : : 15
Age : : 31
Logiciels : : Photoshop CS4, Flash CS4
Date d'inscription : 17/02/2009

Capacités en graphisme
Capacité graph:
(0/0)

Message n°22

Re: Tutoriel: créer une horloge personnalisé

par Benji27930 Ven 31 Juil - 10:39

D'accord je te remercie artkabis !

**par **scarfox** Mar 4 Aoû - 8:05**

scarfox

scarfox: Nouveau membre; Messages : : 14
Age : : 44
Logiciels : : Quelles logiciel utilisez vous?
Date d'inscription : 26/07/2009

Message n°23

Re: Tutoriel: créer une horloge personnalisé

par scarfox Mar 4 Aoû - 8:05

Merci je vais testez tout a l'heure ! encore merci pour ce tuto !

**par **scarfox** Mar 4 Aoû - 20:09**

scarfox

scarfox: Nouveau membre; Messages : : 14
Age : : 44
Logiciels : : Quelles logiciel utilisez vous?
Date d'inscription : 26/07/2009

Message n°24

Re: Tutoriel: créer une horloge personnalisé

par scarfox Mar 4 Aoû - 20:09

slt j ai testez et franchement je me suis mélanger un peux les pinceau lol(niveau aiguille) pourtant c'est bien expliquer c'est sa vouloir allez trop vite lol

Mes bon voici le resultat

Part contre c'est pas a l'heure je sais pas pour quoi

**par **artkabis** Mer 5 Aoû - 2:34**

artkabis

artkabis: Fondateur; Messages : : 4545
Age : : 40
Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
Date d'inscription : 11/09/2008

Capacités en graphisme
Capacité graph:
(9/10)

Message n°25

Re: Tutoriel: créer une horloge personnalisé

par artkabis Mer 5 Aoû - 2:34

Alors ton horloge est belle, mais tes aiguilles ne sont pas correctement positionnés, il est donc normal que tu n'es pas la bonne heure.

**par Contenu sponsorisé**

Contenu sponsorisé

Contenu sponsorisé

Message n°26

Re: Tutoriel: créer une horloge personnalisé

par Contenu sponsorisé

Artkabis

Artkabis

Artkabis

Tutoriel: créer une horloge personnalisé

Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Re: Tutoriel: créer une horloge personnalisé

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Recherche avancée