Artkabis

Salut !!!
Si vous êtes membre du forum, vous pouvez vous connecter.
Au cas contraire vous avez la possibilité de créer gratuitement un compte...

Forum d'entraide en graphisme et webdesign. Formation pour Flash, Photoshop et les langages: as2, as3, html, php, javascript, etc.


    Tutoriel: créer une horloge personnalisé

    Partagez

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : 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  (9/10)

    Tutoriel: créer une horloge personnalisé

    Message par artkabis le 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

    Zarkann
    Nouveau membre
    Nouveau membre

    Messages : : 5
    Age : : 48
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 02/01/2009

    Re: Tutoriel: créer une horloge personnalisé

    Message par Zarkann le 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) Laughing

    après je vais attaqué les horloges

    merci en tout cas pour tout ces tutoriaux

    Cordialement Eric

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : 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  (9/10)

    Re: Tutoriel: créer une horloge personnalisé

    Message par artkabis le 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

    HPWEST
    Nouveau membre
    Nouveau membre

    Messages : : 47
    Age : : 46
    Logiciels : Logiciels : : Adobe
    Date d'inscription : 19/02/2009

    Re: Tutoriel: créer une horloge personnalisé

    Message par HPWEST le 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 ..

    AlanAdk
    Ceinture jaune
    Ceinture jaune

    Messages : : 280
    Age : : 40
    Logiciels : Logiciels : : Flash, Illustrator, Photoshop, Indesign
    Date d'inscription : 16/02/2009

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

    Re: Tutoriel: créer une horloge personnalisé

    Message par AlanAdk le 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 !

    AlanAdk
    Ceinture jaune
    Ceinture jaune

    Messages : : 280
    Age : : 40
    Logiciels : Logiciels : : Flash, Illustrator, Photoshop, Indesign
    Date d'inscription : 16/02/2009

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

    Re: Tutoriel: créer une horloge personnalisé

    Message par AlanAdk le 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

    Amonbofils
    Ceinture jaune
    Ceinture jaune

    Messages : : 414
    Age : : 33
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 26/11/2008

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

    Re: Tutoriel: créer une horloge personnalisé

    Message par Amonbofils le 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

    AlanAdk
    Ceinture jaune
    Ceinture jaune

    Messages : : 280
    Age : : 40
    Logiciels : Logiciels : : Flash, Illustrator, Photoshop, Indesign
    Date d'inscription : 16/02/2009

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

    Re: Tutoriel: créer une horloge personnalisé

    Message par AlanAdk le 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 Razz

    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 Smile

    HPWEST
    Nouveau membre
    Nouveau membre

    Messages : : 47
    Age : : 46
    Logiciels : Logiciels : : Adobe
    Date d'inscription : 19/02/2009

    Re: Tutoriel: créer une horloge personnalisé

    Message par HPWEST le 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

    AlanAdk
    Ceinture jaune
    Ceinture jaune

    Messages : : 280
    Age : : 40
    Logiciels : Logiciels : : Flash, Illustrator, Photoshop, Indesign
    Date d'inscription : 16/02/2009

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

    Re: Tutoriel: créer une horloge personnalisé

    Message par AlanAdk le 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 Smile

    HPWEST
    Nouveau membre
    Nouveau membre

    Messages : : 47
    Age : : 46
    Logiciels : Logiciels : : Adobe
    Date d'inscription : 19/02/2009

    Re: Tutoriel: créer une horloge personnalisé

    Message par HPWEST le 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 Smile

    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 ) Wink

    AlanAdk
    Ceinture jaune
    Ceinture jaune

    Messages : : 280
    Age : : 40
    Logiciels : Logiciels : : Flash, Illustrator, Photoshop, Indesign
    Date d'inscription : 16/02/2009

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

    Re: Tutoriel: créer une horloge personnalisé

    Message par AlanAdk le Dim 22 Fév - 17:46

    HPWEST a écrit:trouver... Cool

    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.

    AlanAdk
    Ceinture jaune
    Ceinture jaune

    Messages : : 280
    Age : : 40
    Logiciels : Logiciels : : Flash, Illustrator, Photoshop, Indesign
    Date d'inscription : 16/02/2009

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

    Re: Tutoriel: créer une horloge personnalisé

    Message par AlanAdk le Dim 22 Fév - 22:34


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

    HPWEST
    Nouveau membre
    Nouveau membre

    Messages : : 47
    Age : : 46
    Logiciels : Logiciels : : Adobe
    Date d'inscription : 19/02/2009

    Re: Tutoriel: créer une horloge personnalisé

    Message par HPWEST le 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

    AlanAdk
    Ceinture jaune
    Ceinture jaune

    Messages : : 280
    Age : : 40
    Logiciels : Logiciels : : Flash, Illustrator, Photoshop, Indesign
    Date d'inscription : 16/02/2009

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

    Re: Tutoriel: créer une horloge personnalisé

    Message par AlanAdk le Ven 27 Fév - 18:43

    Apres ce tuto ma petite Horloge.



    Merci Artkabis.

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : 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  (9/10)

    Re: Tutoriel: créer une horloge personnalisé

    Message par artkabis le Ven 27 Fév - 19:40

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


    _________________
    J'me fais de la pub et na tongue

    FireSnake
    Ceinture blanche
    Ceinture blanche

    Messages : : 127
    Age : : 25
    Logiciels : 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  (6/10)

    Re: Tutoriel: créer une horloge personnalisé

    Message par FireSnake le Mar 3 Mar - 9:50

    Hop voilà une petite horloge toute simple Smile Merci Artkabis !

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


    Lilwarre A.K.A. Prod
    Ceinture verte
    Ceinture verte

    Messages : : 631
    Age : : 26
    Logiciels : Logiciels : : Adobe Master Collection CS4!
    Date d'inscription : 31/12/2008

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

    Re: Tutoriel: créer une horloge personnalisé

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

    Très beau toute ces créas dit donc Smile

    maellelian
    Nouveau membre
    Nouveau membre

    Messages : : 40
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous? Photoshop, Flash
    Date d'inscription : 22/02/2009

    Re: Tutoriel: créer une horloge personnalisé

    Message par maellelian le 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 Wink

    Benji27930
    Nouveau membre
    Nouveau membre

    Messages : : 15
    Age : : 24
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4
    Date d'inscription : 17/02/2009

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

    Re: Tutoriel: créer une horloge personnalisé

    Message par Benji27930 le 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 !

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : 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  (9/10)

    Re: Tutoriel: créer une horloge personnalisé

    Message par artkabis le Ven 31 Juil - 10:36

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

    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


    _________________
    J'me fais de la pub et na tongue

    Benji27930
    Nouveau membre
    Nouveau membre

    Messages : : 15
    Age : : 24
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4
    Date d'inscription : 17/02/2009

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

    Re: Tutoriel: créer une horloge personnalisé

    Message par Benji27930 le Ven 31 Juil - 10:39

    D'accord je te remercie artkabis !

    scarfox
    Nouveau membre
    Nouveau membre

    Messages : : 14
    Age : : 37
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 26/07/2009

    Re: Tutoriel: créer une horloge personnalisé

    Message par scarfox le Mar 4 Aoû - 8:05

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

    scarfox
    Nouveau membre
    Nouveau membre

    Messages : : 14
    Age : : 37
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 26/07/2009

    Re: Tutoriel: créer une horloge personnalisé

    Message par scarfox le 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 Wink 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 slow grand sourire

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : 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  (9/10)

    Re: Tutoriel: créer une horloge personnalisé

    Message par artkabis le 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.


    _________________
    J'me fais de la pub et na tongue

    Contenu sponsorisé

    Re: Tutoriel: créer une horloge personnalisé

    Message par Contenu sponsorisé Aujourd'hui à 16:28


      La date/heure actuelle est Sam 10 Déc - 16:28