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.


    Mise à jour du tutoriel: Créer un bouton avec flash

    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)

    Mise à jour du tutoriel: Créer un bouton avec flash

    Message par artkabis le Lun 23 Mar - 12:43

    Bonjour à tous, je me suis rendu compte que le tutoriel: "Créer un bouton" daté quelque peu. J'ai donc décidé de dépoussièrer tout ça en codant déjà en as3, mais aussi en vous proposant différentes techniques que j'utilise moi-même.

    L'apercu:



    Le code:
    Code:

    btn.addEventListener("mouseOver",over);
    btn.addEventListener("mouseOut",out);
    btn.addEventListener("mouseDown",clic);
    btn.addEventListener("mouseUp",declic);

    function over(pEvt:MouseEvent):void{
       pEvt.target.gotoAndPlay("over");
    }
    function out(pEvt:MouseEvent):void{
       pEvt.target.gotoAndPlay("out");
    }
    function clic(pEvt:MouseEvent):void{
       pEvt.target.gotoAndPlay("clic");
    }
    function declic(pEvt:MouseEvent):void{
       pEvt.target.gotoAndPlay("over");
    }

    Voilà, en tout cas j'espère que vous apprécierez ce tutoriel !!!!



    Dernière édition par artkabis le Mer 1 Avr - 14:45, édité 2 fois

    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: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par Lilwarre A.K.A. Prod le Lun 23 Mar - 14:58

    Merci ^^ mais curieux comme je le suis je vais te poser une question :
    Est-ce que sa fait parti du tutoriel que tu as dit où l'on va créer une interface flash ?

    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: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par artkabis le Lun 23 Mar - 15:14

    Non c'est une mise à jour de ce tuto: ICI que je trouvais franchement désué, mais tu peux toujours regarder ce tutoriel ICI , il explique comment créer une interface en as3


    _________________
    J'me fais de la pub et na tongue

    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: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par Lilwarre A.K.A. Prod le Lun 23 Mar - 16:11

    Ne t'inquiète pas pour moi je regarde tout tes tutos Smile

    JEYJEY
    Ceinture blanche
    Ceinture blanche

    Messages : : 100
    Age : : 24
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 22/02/2009

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par JEYJEY le Lun 23 Mar - 23:49

    Super tuto je sens qui va m'être utile smile

    megalex
    Ceinture jaune
    Ceinture jaune

    Messages : : 343
    Age : : 24
    Logiciels : Logiciels : : photoshop cs3, flash cs4,flex builder 3,gimp,code::blocks, notepad++,et bien d'autres...
    Date d'inscription : 12/04/2009

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par megalex le Mar 14 Avr - 16:19

    magnifique tuto, je connaissait pas les étiquettes. merci pour m'avoir appris cela, sa me sera sans doute utile, et tu m'as fait comprendre certaines choses aussi, auquelles je n'avais pas pensé :D

    ps: quel mode de compression utilise-tu pour tes videos stp? car sa charge vite et une fois en plein écran c'est absolument magnifique, en tout cas on arrive très facilement a lire le code AS ^^

    EDIT: en réalité j'ai tenté de faire ce tuto mais au moment ou tu fais une interpolation de forme entre les deux première phases du bouton moi j'essaie de faire pareil mais l'option interpolation de forme est grisée, je ne peux choisir que les deux autres et la transition ne se fait pas Sad

    REEDIT: alors j'ai supprimé mon bouton et j'en ai refais un et maintenant sa marche :D

    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: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par artkabis le Mer 15 Avr - 10:03

    Merci du compliment megalex, ça fait plaisir de voir que tu as appris des choses grâce à cette vidéo.

    Concernant ton petit soucis, je vais quand même t'expliquer pourquoi l'interpolation de forme fut grisé dans ton cas. Il faut savoir que seul les formes peuvent utiliser ce type d'interpolations et non les clips, les graphiques ou les boutons.


    _________________
    J'me fais de la pub et na tongue

    Nementon
    Nouveau membre
    Nouveau membre

    Messages : : 12
    Age : : 25
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 05/07/2009

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

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par Nementon le Dim 5 Juil - 18:10

    Merci, super tutoriel, très intéressant ! (J'ai pus améliorer ma signature garce a lui Razz )

    J'ai d'ailleurs eut droit a un drôle de bug, que je n'ai toujours pas compris, je m'explique :

    Voulant afficher une animation sur mon texte, je le convertie en clip et lui donne l'occurrence de aqua.
    Je créé mes "petites animations" que j'ai essayé d'appeler ainsi, sur la dernière frame de mon script "AS" principale :


    Code:

    stop(); // Non merci aux boucles =p

    var booly:int = 0;

    aqua.addEventListener("mouseOver",plays);
    aqua.addEventListener("mouseDown",returns);

    function plays(pEvt:MouseEvent):void{
      if(booly == 0) {
        pEvt.target.gotoAndPlay("anime");
          booly = 1;
      }
    }

    function retruns(pEvt:MouseEvent):void{
      pEvt.target.gotoAndPlay("default");
    }


    Ce qui ma permis d'avoir une belle erreur "ReferenceError: Error #1069: La propriété gotoAndPlay est introuvable sur flash.text.TextField et il n'existe pas de valeur"

    J'ai finalement utilise les script suivant :

    Code:

    stop();
    var booly:int = 0;

    aqua.addEventListener("mouseOver",plays);
    aqua.addEventListener("mouseDown",returns);

    function plays(pEvt:MouseEvent):void{
      if(booly == 0) {
          aqua.gotoAndPlay("anime");
          booly = 1;
      }
    }

    function retruns(pEvt:MouseEvent):void{
      aqua.gotoAndPlay("default");
    }


    Mais mettant inspiré du code proposé, je ne comprend pas pourquoi "pEvt.target" ne pointe pas sur mon "aqua" ? Shocked

    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: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par artkabis le Dim 5 Juil - 18:49

    Et bien il te suffit tout simplement de désactiver un texte que tu dois avoir dans aqua, non?

    Si je ne me trompe pas, un simple
    Code:
    aqua.mouseChildren = false;

    réglera ton problème...


    _________________
    J'me fais de la pub et na tongue

    Nementon
    Nouveau membre
    Nouveau membre

    Messages : : 12
    Age : : 25
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 05/07/2009

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

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par Nementon le Dim 5 Juil - 18:55

    Aaah, problème de doc alors, autant pour moi, je ne l'avais pas vus venir celle la =p

    Merci

    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: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par artkabis le Dim 5 Juil - 19:08

    Comment ça un problème de doc ??

    Car, là c'est simplement que tu avais un clip (aqua en l'occurrence) qui contenait un autre objet, toi tu veux gérer le rollOver sur cet objet alors que celui-ci contient un élément qui sera pris en compte lors de l'événement mouseOver, il faut donc savoir que si tu dois ajouter de l'interactivité à un symbole, celui-ci doit toujours être le seul élément à déclencher l'écoute de l'objet, au cas contraire, on désactive le clip enfant pour qu'il n'y est pas d'interaction avec l'objet écouté.


    _________________
    J'me fais de la pub et na tongue

    jPeG
    Nouveau membre
    Nouveau membre

    Messages : : 48
    Age : : 26
    Logiciels : Logiciels : : Photoshop,Photofiltre,Flash et Sony vegas
    Date d'inscription : 22/02/2009

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par jPeG le Mar 3 Nov - 0:11

    Je voulais savoir comment faire pour  mettre a la place des couleurs, des images (.png par exemple) car j'ai teste en suivant le tuto mais en remplacent les couleurs par des images .png, deux images donc.On va dire une blanche et une orange mon clip de base et noir.J'ai mit pour quand je suis dessus l'image blanche et quand je clic l'image orange,ca marche sauf que quand je le compile ,je m'aperçoit que les images ce joue en boucle ou que c'est un peut e bordel les image s'inverse ou ne corresponde pas a ce que je veux. ePeut tu m'aider ?
    Code:
    var adresse:URLRequest = new URLRequest("http://switchlan.free.fr")

    bt1.addEventListener(MouseEvent.MOUSE_OVER, dessus);
    bt1.addEventListener(MouseEvent.MOUSE_OUT, cote);
    bt1.addEventListener(MouseEvent.MOUSE_DOWN, cliquer);
    bt1.addEventListener(MouseEvent.MOUSE_UP, decliquer);

    function dessus (pEvt:MouseEvent):void{
       pEvt.target.gotoAndPlay("over");
    }
    function cote (pEvt:MouseEvent):void{
       pEvt.target.gotoAndPlay("out");
    }
    function cliquer (pEvt:MouseEvent):void{
       pEvt.target.gotoAndPlay("clic");
       navigateToURL (adresse,"_blank");
    }
    function decliquer (pEvt:MouseEvent):void{
     pEvt.target.gotoAndPlay("over");

    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: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par artkabis le Mar 3 Nov - 19:33

    Peux tu nous fournir ton fichier fla ?


    _________________
    J'me fais de la pub et na tongue

    jPeG
    Nouveau membre
    Nouveau membre

    Messages : : 48
    Age : : 26
    Logiciels : Logiciels : : Photoshop,Photofiltre,Flash et Sony vegas
    Date d'inscription : 22/02/2009

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par jPeG le Jeu 5 Nov - 16:51

    Bien sur http://www.sendspace.com/file/zeixtv

    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: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par artkabis le Jeu 5 Nov - 17:24

    Il fallait déplacer ton état 'out' en première position et mettre tes images sur une seule frame puis placer les stops en alignement avec les image et les étiquettes, regardes:

    : http://dl.free.fr/l8F1spU5a


    _________________
    J'me fais de la pub et na tongue

    jPeG
    Nouveau membre
    Nouveau membre

    Messages : : 48
    Age : : 26
    Logiciels : Logiciels : : Photoshop,Photofiltre,Flash et Sony vegas
    Date d'inscription : 22/02/2009

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par jPeG le Jeu 5 Nov - 20:08

    Ok Merci.

    thecartoon
    Nouveau membre
    Nouveau membre

    Messages : : 35
    Age : : 46
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 08/01/2010

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par thecartoon le Mer 13 Jan - 15:31

    Trop génial !!
    j'ai enfin compris ce qu'est un ecouteur !
    tes tutos sont vraiment super et surtout a la portée des debutant en AS !!!!!

    bravo a toi et encore merci

    mattouexpat
    Nouveau membre
    Nouveau membre

    Messages : : 32
    Age : : 29
    Date d'inscription : 06/01/2010

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

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par mattouexpat le Dim 24 Jan - 19:26

    c'est exactement ce que je cherchais merci!!

    Bon alors je me suis lancé: j'ai malgré tout un problème! ça bloque au niveau de cette phrase
    Code:

    if (pEvt.target.name == "btn")navigateToURL (adresse1;"_blank");
    deux erreurs:
    - rightparen est attendu devant semilicon
    - semilicon est attendu devant _blank

    Bon il me semble que rightparen c'est la parenthèse mais je ne voit pas là, et le point virgule non plus!!

    help me please!!

    mattouexpat
    Nouveau membre
    Nouveau membre

    Messages : : 32
    Age : : 29
    Date d'inscription : 06/01/2010

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

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par mattouexpat le Mer 27 Jan - 8:55

    une petite aide svp

    Demeter
    Ancien staff

    Messages : : 4569
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Logiciel Adobe Photoshop, flash, dreamweaver, the gimp, blender 3D, visual studio 2010, expression studio 4, Aptana studio 1.5, Illustrator, indesign.

    Date d'inscription : 14/07/2009

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

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par Demeter le Mer 27 Jan - 12:57

    Bonjour mattouexpat alors ces simple entre adresse1 et les guillemet sa dois être une vergule et pas un point virgule.
    La bonne syntaxe et :
    Code:
    if (pEvt.target.name == "btn")navigateToURL (adresse1,"_blank");

    mattouexpat
    Nouveau membre
    Nouveau membre

    Messages : : 32
    Age : : 29
    Date d'inscription : 06/01/2010

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

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par mattouexpat le Mer 27 Jan - 18:17

    merci baucoup Demeter cela a réglé mon problème!
    Mais j'en ai un autre à présent

    J'arrive bien à ce que tous les boutons renvoient vers navigateToURL mais dès que je rajoute un if, ben ça ne marche plus?? alors que mes occurrences ont bien des noms différents.

    Code:
    var adresse1:URLRequest = new URLRequest("http://ogcnice.com");
    var adresse2:URLRequest = new URLRequest("http://eurosport.fr");

    addEventListener("mouseOver",over);
    addEventListener("mouseOut",out);
    addEventListener("mouseDown",clic);
    addEventListener("mouseUp",declic);

    function over(pEvt:MouseEvent):void{
      pEvt.target.gotoAndPlay("over");
    }
    function out(pEvt:MouseEvent):void{
      pEvt.target.gotoAndPlay("out");
    }
    function clic(pEvt:MouseEvent):void{
      pEvt.target.gotoAndPlay("clic");
      if (pEvt.target.name == "btn1")navigateToURL (adresse1,"_blank");
      if (pEvt.target.name == "btn2")navigateToURL (adresse2,"_blank");
    }
    function declic(pEvt:MouseEvent):void{
      pEvt.target.gotoAndPlay("over");
    }

    Mon fla: http://dl.free.fr/oJyRzb4vr

    et j'avais une autre question également au lieu de pointer vers une URL pointer vers un fichier.html par exemple??

    MERCI de votre aide!

    Demeter
    Ancien staff

    Messages : : 4569
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Logiciel Adobe Photoshop, flash, dreamweaver, the gimp, blender 3D, visual studio 2010, expression studio 4, Aptana studio 1.5, Illustrator, indesign.

    Date d'inscription : 14/07/2009

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

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par Demeter le Mer 27 Jan - 19:37

    Bonjour mattouexpat j'ai regardé, voici ton fla avec des erreurs corrigée mais je ne trouve pas pourquoi que dès que l'on joue if ça ne fonctionne pas.

    Donc voici ton fla que tu peux télécharger ainsi que les autres membres s’ils en ont besoin
    voici ton fichier

    mattouexpat
    Nouveau membre
    Nouveau membre

    Messages : : 32
    Age : : 29
    Date d'inscription : 06/01/2010

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

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par mattouexpat le Mer 27 Jan - 19:39

    Merci beaucoup!!

    Peut être une piste? si je met "btn" seulement et pas btn1 ou btn2 et bien ça marche mais du coup ça renvoie vers le même lien pour tous les boutons? est-ce que tu pourrais regarder? Merci!!

    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

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

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par Tekken le Lun 15 Fév - 15:16

    merci pour ce tutoriel artkabis Wink

    Spoiler:


    Dernière édition par Tekken le Mer 17 Mar - 14:17, édité 1 fois


    _________________

    Mon Site Creation



    kaskroute
    Nouveau membre
    Nouveau membre

    Messages : : 4
    Age : : 33
    Logiciels : Logiciels : : flash CS4
    Date d'inscription : 13/02/2010

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par kaskroute le Ven 19 Fév - 2:10

    yeahhhhhh First TUTOOO completeddd!!

    il y a une chose que je n'ai pas réussi à faire c'est d'ouvrir les différents liens sur la même page...j' ouvre à chaque fois de nouvelles fenêtres. je te demande pas si tu as une solution çelà tombe sous le sens ( le smiley n'a aucun rapport mais faut réussir à la placer celui là lol)

    je pense que tu mérites un petit " MERCIIIII" en tous cas

    la vidéo dure environ 35 minutes... j' ai dû la mater 4 5 fois ( je te laisse faire le calcul) mais c 'est qu'il y a quantité d'information pour
    les débutants comme moi... mais bon après on se regarde ds une glace et on se dit bordel je saiiiis faire un menuuuuuuuuuu avec FLASH!

    bon OK je vais me coucher @+++ la compagnie

    Contenu sponsorisé

    Re: Mise à jour du tutoriel: Créer un bouton avec flash

    Message par Contenu sponsorisé Aujourd'hui à 17:17


      La date/heure actuelle est Ven 9 Déc - 17:17