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.


    Menu vertical moderne

    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)

    Menu vertical moderne

    Message par artkabis le Mer 22 Avr - 16:44

    Bonjour à tous aujourd'hui j'ai décidé de vous préparer un tutoriel sur la création d'un menu vertical, ce menu se munira d'un icône suiveur qui changera de couleur à chaque passage du bouton survolé, comme des paroles ne valent pas un exemple voici à quoi vous arriverez à la fin de ce tutoriel:


    Il est aussi possible d'adapter ce menu à l'horizontal:


    Voici le code de ce tutoriel:
    Code:

    import gs.TweenMax;
    import gs.easing.Sine;
    /*
                          .:EasingList:.
       Back          Cubic          Linear        Quint
       Bounce        Elastic        Quad          Sine
       Circ          Expo            Quart
    */

    var tableauBt:Array = new Array(accueil,forum,galerie,folio,faq,contact);
    var couleur:ColorTransform = new ColorTransform();
    const ecart:int = 10;
    const lien1:URLRequest = new URLRequest("http://artkabis.fr");
    const lien2:URLRequest = new URLRequest("http://artkabis.fr");
    const lien3:URLRequest = new URLRequest("http://artkabis.fr");
    const lien4:URLRequest = new URLRequest("http://artkabis.fr");
    const lien5:URLRequest = new URLRequest("http://artkabis.fr");
    const lien6:URLRequest = new URLRequest("http://artkabis.fr");

    for (var i:int = 0; i < tableauBt.length; i++){
       tableauBt[i].addEventListener(MouseEvent.MOUSE_OVER,over);
       tableauBt[i].addEventListener(MouseEvent.MOUSE_UP,navig);
    }
    bg_bt.x = accueil.x;
    bg_bt.y = accueil.y;
    bg_bt.width = accueil.width + ecart;
    bg_bt.height = accueil.height + ecart;
    couleur.color = Math.random()* 0xFFFFFF;
    TweenMax.to(bg_bt, .1, {tint: couleur.color});

    function over(e:MouseEvent):void{
       couleur.color = Math.random()* 0xFFFFFF;
       var bt:MovieClip = (MovieClip) (e.target);
       var btWidth:Number = bt.width + ecart;
       var btHeight:Number = bt.height + ecart;
       TweenMax.to(bg_bt, .6,{x:bt.x, y:bt.y,width:btWidth, height:btHeight,
       tint:couleur.color, ease:Sine.easeOut});
    }
    function navig (e:MouseEvent):void{
       if(e.target.name == "accueil")navigateToURL( lien1,"_blank");
       if(e.target.name == "forum")navigateToURL( lien2,"_blank");
       if(e.target.name == "galerie")navigateToURL( lien3,"_blank");
       if(e.target.name == "folio")navigateToURL( lien4,"_blank");
       if(e.target.name == "faq")navigateToURL( lien5,"_blank");
       if(e.target.name == "contact")navigateToURL( lien6,"_blank");
    }

    Le tutoriel:

    La source de ce projet:


    .


    Dernière édition par artkabis le Lun 25 Mai - 22:08, édité 5 fois

    desperadisse
    Ceinture jaune
    Ceinture jaune

    Messages : : 218
    Age : : 35
    Logiciels : Logiciels : : Photoshop CS3, Flash CS3, Dreamweaver CS3, NotePad ++, Wampserver, Flash CS4, Photoshop CS4, Camtasia 6, Adobe Captivate 3.
    Date d'inscription : 07/03/2009

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

    Re: Menu vertical moderne

    Message par desperadisse le Mer 22 Avr - 16:49

    C'est un tutoriel fait avec tweenmax ?

    Bien jouer pour ce menu, c'est vrai que j'en chercher un pour mon site internet ^^

    Merci beaucoup art, pour tes tuto qui font tant rêver ^^

    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: Menu vertical moderne

    Message par artkabis le Mer 22 Avr - 18:16

    Pas de quoi et oui j'utilise bien la classe TweenMax (encore une fois), j'avoue qu'une fois que l'on y a gouté, c'est dur de sans passer !!!


    _________________
    J'me fais de la pub et na tongue

    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: Menu vertical moderne

    Message par artkabis le Mer 22 Avr - 18:17

    Le tutoriel est arrivé !!!!


    _________________
    J'me fais de la pub et na tongue

    Valbuena72
    Ceinture blanche
    Ceinture blanche

    Messages : : 180
    Age : : 24
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 13/03/2009

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

    Re: Menu vertical moderne

    Message par Valbuena72 le Dim 3 Mai - 8:32

    Salut,
    j'ai essaye bonne nouvelle pas de message d'erreur
    mauvaise nouvelle rien ne se passe ^^ j'aurais preferer avoir un message d'erreur pour une fois

    http://upload.stabland.fr/fichiers/files4/menu.fla

    JEYJEY
    Ceinture blanche
    Ceinture blanche

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

    Re: Menu vertical moderne

    Message par JEYJEY le Dim 3 Mai - 23:28

    Euh je voudrais signaler que le lien de téléchargement ne marche plus et serait-il possible d'avoir le code pour la bare horizontal ainsi que le fla a moins que ce soit le même code smile

    Valbuena72
    Ceinture blanche
    Ceinture blanche

    Messages : : 180
    Age : : 24
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 13/03/2009

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

    Re: Menu vertical moderne

    Message par Valbuena72 le Lun 4 Mai - 5:41

    normalement pas besoin
    si c'est la souris qui bouge et on est dans le menu
    le suiveur va suivre dans son conteneur

    JEYJEY
    Ceinture blanche
    Ceinture blanche

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

    Re: Menu vertical moderne

    Message par JEYJEY le Lun 4 Mai - 12:37

    Daccord merci pour la réponse smile

    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: Menu vertical moderne

    Message par artkabis le Lun 4 Mai - 12:54

    Pour répondre à la question de Valbuena72:

    C'est normale que ton menu ne fonctionne pas, tu as placer ton code et tous tes élément dans un symbole de type graphique, donc temps que tu n'auras pas replacer tous ceci dans un clip ou sur la scène principale, tu ne pourras pas voir si ton projet fonctionne.

    PS: après ça tu auras quelques erreurs de compilation, mais bon je pense que tu pourras les régler assez facilement


    _________________
    J'me fais de la pub et na tongue

    Calanor
    Nouveau membre
    Nouveau membre

    Messages : : 39
    Age : : 32
    Logiciels : Logiciels : : la Créative Suite d'Adobe
    Date d'inscription : 18/02/2009

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

    Re: Menu vertical moderne

    Message par Calanor le Ven 15 Mai - 8:50

    Plop !

    Merci Art !

    J'aimerais savoir si il est possible que les boutons (et si oui comment Smile )
    chargent des swf. En fait faire un mix entre ce tuto et celui-ci :
    http://artkabis.forumactif.org/tutos-artkabis-f45/tutoriel-creer-une-interface-complete-en-as3-t217.htm

    Merci encore

    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: Menu vertical moderne

    Message par artkabis le Ven 15 Mai - 12:02

    Oui bien sûr que c'est possible, il suffit de remplacer les urlRequest par le chemin de tes swf:
    Ensuite au début du code tu ajoutes ceci:

    Code:
    var loader:Loader = new Loader();
    loader.x = .. ;
    loader.y = .. ;

    puis dans la partie clic:
    Code:
    if(e.target.name == "accueil")loader.load( lien1);
      if(e.target.name == "forum")loader.load( lien2);
      if(e.target.name == "galerie")loader.load( lien3);
      if(e.target.name == "folio")loader.load( lien4);
      if(e.target.name == "faq")loader.load( lien5);
      if(e.target.name == "contact")loader.load( lien6);
      addChild(loader);


    _________________
    J'me fais de la pub et na tongue

    Calanor
    Nouveau membre
    Nouveau membre

    Messages : : 39
    Age : : 32
    Logiciels : Logiciels : : la Créative Suite d'Adobe
    Date d'inscription : 18/02/2009

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

    Re: Menu vertical moderne

    Message par Calanor le Ven 15 Mai - 17:22

    Merci pour ta réponse si rapide !! je test des que je suis chez moi !! Smile



    Ça fonctionne nickel, j'ai juste un soucis pour afficher la page d'accueil directement. En tous cas génial !

    Voici le code si d'autre en on besoin, à défaut de pas savoir comment posté mon swf Smile

    Code:
    import gs.TweenMax;
    import gs.easing.Sine;


    var tableauBt:Array = new Array(accueil,rea,contact,part);
    var couleur:ColorTransform = new ColorTransform();
    var loader:Loader = new Loader();
    loader.x = 22;
    loader.y = 242;
    const ecart:int = 0;

    const lien1:URLRequest = new URLRequest("page/page1.swf");
    const lien2:URLRequest = new URLRequest("page/page2.swf");
    const lien3:URLRequest = new URLRequest("page/page3.swf");
    const lien4:URLRequest = new URLRequest("page/page4.swf");

    for (var i:int = 0; i < tableauBt.length; i++){
        tableauBt[i].addEventListener(MouseEvent.MOUSE_OVER,over);
        tableauBt[i].addEventListener(MouseEvent.MOUSE_UP,navig);
    }
    bg_bt.x = accueil.x;
    bg_bt.y = accueil.y;
    bg_bt.width = accueil.width + ecart;
    bg_bt.height = accueil.heigth + ecart;
    couleur.color = Math.random()* 0xFFFFFF;
    TweenMax.to(bg_bt, .1,{tint: couleur.color});

    function over(e:MouseEvent):void{
      couleur.color = Math.random()* 0xFFFFFF;
      var bt:MovieClip = (MovieClip) (e.target);
      var btWidth:Number = bt.width + ecart;
      var btHeight:Number = bt.height + ecart;
      TweenMax.to(bg_bt, .6,{x:bt.x, y:bt.y,width:btWidth, height:btHeight,
      tint:couleur.color, ease:Sine.easeOut});
    }
    function navig (e:MouseEvent):void{
    if(e.target.name == "accueil")loader.load( lien1);
      if(e.target.name == "rea")loader.load( lien2);
      if(e.target.name == "contact")loader.load( lien3);
      if(e.target.name == "part")loader.load( lien4);
      addChild(loader);
    }

    Merci pour tout Smile Smile Smile

    Invité
    Invité

    Re: Menu vertical moderne

    Message par Invité le Sam 23 Mai - 10:03

    ahh super bien ce tuto merci Art

    xpmens
    Nouveau membre
    Nouveau membre

    Messages : : 37
    Age : : 45
    Logiciels : Logiciels : : cs
    Date d'inscription : 28/05/2009

    Re: Menu vertical moderne

    Message par xpmens le Jeu 11 Juin - 8:09

    merci artkabis Smile

    Calanor
    Nouveau membre
    Nouveau membre

    Messages : : 39
    Age : : 32
    Logiciels : Logiciels : : la Créative Suite d'Adobe
    Date d'inscription : 18/02/2009

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

    Re: Menu vertical moderne

    Message par Calanor le Ven 12 Juin - 9:12

    Yop,

    J'ai une petite question : Est-il possible que le curseur de la souris se transforme "en petite main" lorsqu'on se déplace sur les boutons ?

    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: Menu vertical moderne

    Message par artkabis le Ven 12 Juin - 9:19

    En effet il te suffit d'ajouter ceci dans la boucle for:
    Code:

    for (var i:int = 0; i < tableauBt.length; i++){
      tableauBt[i].addEventListener(MouseEvent.MOUSE_OVER,over);
      tableauBt[i].addEventListener(MouseEvent.MOUSE_UP,navig);
      tableauBt[i].buttonMode = true;//activation de la main comme curseur
    }

    Calanor
    Nouveau membre
    Nouveau membre

    Messages : : 39
    Age : : 32
    Logiciels : Logiciels : : la Créative Suite d'Adobe
    Date d'inscription : 18/02/2009

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

    Re: Menu vertical moderne

    Message par Calanor le Ven 12 Juin - 9:24

    Merci beaucoup Artkabis !! tu assures !! clair, rapide et précis ! c'est génial !!!!

    DJereMaster
    Ceinture jaune
    Ceinture jaune

    Messages : : 263
    Age : : 29
    Logiciels : Logiciels : : Design: suite Adobe CS4 et CS5, Swift3D, 3Dsmax, Xara3D, Apophysis, Fontlab
    Programmation: FlashDevelop
    Serveurs et bases de données: FileZilla, Wamp, Xamp
    Composition sonore: FLstudio, Cubase
    Traitement de texte: suite Office 2007, suite OpenOffice
    Date d'inscription : 17/06/2009

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

    Re: Menu vertical moderne

    Message par DJereMaster le Ven 19 Juin - 18:26

    Salut,

    et bien pour moi ça ne fonctionne pas:

    voici le message d'erreur:
    TypeError: Error #1034: Echec de la contrainte de type : conversion de flash.text::TextField@2e185a61 en flash.display.MovieClip impossible.
    at Website_fla::MainTimeline/over()

    le changement de couleur se fait bien mais le suiveur ne suit pas.

    Help me!!!

    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: Menu vertical moderne

    Message par artkabis le Ven 19 Juin - 18:48

    a mon avis tu as du louper quelques chose car ça devrait fonctionner, au pire, désactive le texte en faisant ceci:

    Code:
    monTexte.mouseEnabled = false


    _________________
    J'me fais de la pub et na tongue

    DJereMaster
    Ceinture jaune
    Ceinture jaune

    Messages : : 263
    Age : : 29
    Logiciels : Logiciels : : Design: suite Adobe CS4 et CS5, Swift3D, 3Dsmax, Xara3D, Apophysis, Fontlab
    Programmation: FlashDevelop
    Serveurs et bases de données: FileZilla, Wamp, Xamp
    Composition sonore: FLstudio, Cubase
    Traitement de texte: suite Office 2007, suite OpenOffice
    Date d'inscription : 17/06/2009

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

    Re: Menu vertical moderne

    Message par DJereMaster le Ven 19 Juin - 20:01

    Merci, j'ai trouvé^^

    j'ai oublié de convertir en clip le texte de deux boutons.
    tout bête^^

    karim93
    Ceinture blanche
    Ceinture blanche

    Messages : : 105
    Age : : 25
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, After Effect CS4, Illustrator CS4, Dreamweaver CS4, Blender 3d, Cinéma 4D, etc
    Date d'inscription : 07/06/2009

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

    Re: Menu vertical moderne

    Message par karim93 le Dim 21 Juin - 5:16

    merci pour ce tuto sa a l'air sympa smile

    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: Menu vertical moderne

    Message par Tekken le Mer 3 Fév - 15:26

    merci pour ce tuto artkabis
    allez hop dans ma galerie Wink


    _________________

    Mon Site Creation



    Rommich
    Nouveau membre
    Nouveau membre

    Messages : : 2
    Age : : 30
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 23/02/2010

    Re: Menu vertical moderne

    Message par Rommich le Mar 23 Mar - 22:15

    Merci artkabis pour ce super tuto, c'est un vrai plaisir à chaque vidéo de profiter de ta pédagogie !!!

    Une seule question : est il possible de choisir précisemment la teinte à chaque changement du suiveur ? car comme tu le dis dans le tuto, les couleurs sont aléatoire...

    En gros peut on lui dire ce (e.targer) est "acceuil", donc (tint : rouge) ?

    $calpeur
    Nouveau membre
    Nouveau membre

    Messages : : 24
    Age : : 40
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 10/03/2010

    Re: Menu vertical moderne

    Message par $calpeur le Ven 26 Mar - 11:05

    Bonjour
    Voila moi je trouve se menu super donc je l’ai télécharger pour être sur de commettre aucune erreur.
    Le souci est que il ne fonctionne pas cher moi, j ai 7 erreurs.
    Celle-ci peuvent venir d ou?



    $calpeur
    Nouveau membre
    Nouveau membre

    Messages : : 24
    Age : : 40
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 10/03/2010

    Re: Menu vertical moderne

    Message par $calpeur le Ven 26 Mar - 11:52

    Ok c’est de ma faute aprés quelque recherches, je viens de comprendre que pour utiliser certaines classes il faut les importées.
    Ce que je vais faire de pas .

    Contenu sponsorisé

    Re: Menu vertical moderne

    Message par Contenu sponsorisé Aujourd'hui à 18:01


      La date/heure actuelle est Ven 2 Déc - 18:01