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 suiveur. Merci newton

    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 suiveur. Merci newton

    Message par artkabis le Ven 28 Nov - 21:51

    Bonjour à tous, je me suis quelque peu intéressé à la physique dans flash plus particulièrement aux forces, masses et accélérations. Pour réaliser ce menu il faut suivre à la lettre la physique de newton
    la somme des forces est égale à la masse multipliée par l'accélération .


    Grâce à cette loi physique nous pouvons créer un menu avec repositionnement élastique.



    Ce tuto s'adresse aux personnes qui maîtrisent un minimum l'as2, vous pouvez bien sûr copier coller le code, mais essayez quand même de le comprendre. Le voici avec ces commentaires

    PS: Le code a été amélioré depuis la sortie du tuto vidéo:
    1)Ajout de l'infobulle pour le bouton "M" .

    2)Ajout de la fonction clic pour tous les boutons, ceci vous permettra
    par exemple d'afficher une page après clic.

    3)Rafraichissement de la position du pointeur avec updateAfterEvent();

    4)Affichage de l'infobulle "fermer" aprés ouverture du menu

    5)RollOver du bouton principale dès le début de l'animation

    Code:

    // raideur et élasticité du menu (M).Doit être positif et inférieur à 1.
    var k:Number = 0.2;
    //forces de frottement augmente en ce rapprochant de 1 étant le frotement minimal
    var f:Number = 0.30;
    //Coordonnées du vecteur vitesse
    var vx:Number = vy = 0;
    //compteur pour le menu M
    var cpt:Number=1;
    //on active le mode bouton pour le menu (bouton nommé M)
    M.buttonMode=true;

    infoB._visible=false;
    btF._visible=false;
    btC._visible=false;
    btP._visible=false;
    btG._visible=false;
    //on utilise un onEnterframe pour écouter l'animation
    onEnterFrame = function() {
       //fonction clic sur le clip "M" bouton d'ouverture du menu
       M.onPress=function(){
          //on implémente la variable cpt (compteur de clic)
          cpt++;
          //si compteur est plus grand que 1
          if (cpt>1){
             //on affiche et active tout les boutons
             infoB._visible=true;
             infoB._x=M._x;
             infoB._y=M._y;
             infoB.titr.text="Fermer";
             M.buttonMode=true;
             btC.buttonMode=true;
             btF.buttonMode=true;
             btP.buttonMode=true;
             btG.buttonMode=true;
             btC._visible=true;
             btF._visible=true;
             btP._visible=true;
             btG._visible=true;
          //au rollOver des boutons nous jouons la partie over du clip
          btG.onRollOver=function(){
             btG.gotoAndPlay("over");
             //on affiche l'info bulle et on affiche le texte adéquat
             infoB._visible=true;
             infoB.titr.text="GuestBook";
             //on place l'info bulle aux bonnes coordonnées
             infoB._x=btG._x;
             infoB._y=btG._y;
          }
          //on joue la partie out lorsque nous quittons le bouton
          btG.onRollOut=function(){
             btG.gotoAndPlay("out");
             infoB._visible=false;
          }
          btG.onRelease=function(){
             infoB.titr.text="btG cliqué!";
          }
          btC.onRollOver=function(){
             btC.gotoAndPlay("over");
             infoB._visible=true;
             infoB.titr.text="Contact";
             infoB._x=btC._x;
             infoB._y=btC._y;
          }
          
          btC.onRollOut=function(){
             btC.gotoAndPlay("out");
             infoB._visible=false;
          }
          btC.onRelease=function(){
             infoB.titr.text="btC cliqué!";
          }
          
          btF.onRollOver=function(){
             btF.gotoAndPlay("over");
             infoB._visible=true;
             infoB.titr.text="Forum";
             infoB._x=btF._x;
             infoB._y=btF._y;
          }
          btF.onRollOut=function(){
             btF.gotoAndPlay("out");
             infoB._visible=false;
          }
          btF.onRelease=function(){
             infoB.titr.text="btF cliqué!";
          }
          btP.onRollOver=function(){
             btP.gotoAndPlay("over");
             infoB._visible=true;
             infoB.titr.text="Portfolio";
             infoB._x=btP._x;
             infoB._y=btP._y;
          }
          btP.onRollOut=function(){
             btP.gotoAndPlay("out");
             infoB._visible=false;
          }
          btP.onRelease=function(){
             infoB.titr.text="btP cliqué!";
          }
          //4eme
          btF._x=M._x+M._width;
          //3eme
          btC._x=M._x-M._width;
          //1er
          btP._x=btC._x-M._width;
          //5eme
          btG._x=btF._x+M._width;
          //on place les bouton sur l'axe de M_y
          btF._y=btC._y=btP._y=btG._y=M._y;
          //on stabilise le menu (M)
          f=0;
       }
       if (cpt>2){
          infoB._visible=false;
          btF._visible=false;
          btG._visible=false;
          btC._visible=false;
          btP._visible=false;
          cpt=1;
          //on rend elastique le menu
          f=0.30;
          
       }
       trace ("cpt= "+cpt);
       }   
       //t=pointeur (clip)
       //on fixe le pointeur au coordonné de la souris
       t._x=_xmouse;
       t._y=_ymouse;
       //on rafraichie la position du pointeur personnalisé
       updateAfterEvent();
       //on cache le curseur par defaut
       Mouse.hide();
       //la somme des forces est égale à la masse multipliée par l'accélération
       //ax=abscisse du vecteur force
       ax = k*(t._x - M._x);
       //ay=ordonnée du vecteur accélération
       ay = k*(t._y - M._y);
       //on ajoute ax à la valeur de vx a chaque image grace au enterFrame
       vx += ax;
       //On ajoute ay à la valeur de vy.
       vy += ay;
       //on freine le déplacement du disque comme f vaut 0.30,
       //on reduit la vitesse de 70%
       vx *= f;
       //pareil pour la vitesse du vecteur
       vy *= f;
       //on ajoutel'abscisse du vecteur vitesse à l'abscisse du menu(M).
       M._x += vx;
       //de même pour les ordonnées
       M._y += vy;
       //on supprime notre curseur personnalisé si il sort de l'animation
       if (_xmouse < 10 ||_xmouse > 490 || _ymouse < 10  ||_ymouse>390){
          t._visible=false;
       }else{   
          t._visible=true;
       }

       
     
    //fonction du menu au rollOver et out
    //cette fonction est placé à l'exterieur de l'enterFrame
    //pour l'activer dès le dèbut de l'animation
    M.onRollOver=function(){   
       //si le menu est ouvert
       if (cpt>1){
          infoB._visible=true;
          //on affiche "fermer" dans l'infobulle
          infoB.titr.text="fermer";
          //et on la positionne au bon endroit
          infoB._x=M._x;
          infoB._y=M._y;
          
       }
          //sinon si le menu est fermé
          if(cpt<2){
             //on cache l'infobulle
             infoB._visible=false;
          }
          //on joue la partie over du clip "M"
          M.gotoAndPlay("over");
       }
    //au rollOut nous jouons la partie "out" du clip "M"
    M.onRollOut=function(){
       M.gotoAndPlay("out");
       infoB._visible=false;
       
    }};

    Le fichier source:menu_newton.fla

    Le tutoriel:

    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 suiveur. Merci newton

    Message par Tekken le Mar 6 Avr - 16:46

    merci pour ce tutoriel artkabis....j'adore le rendu de ce menu, il est top


    Spoiler:


    _________________

    Mon Site Creation



    Apoulit
    Ceinture blanche
    Ceinture blanche

    Messages : : 77
    Age : : 46
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 12/04/2010

    Re: Menu suiveur. Merci newton

    Message par Apoulit le Ven 20 Aoû - 21:24

    Bonjour , ce tuto est il prévu en AS3 ? @+

    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 suiveur. Merci newton

    Message par Tekken le Sam 21 Aoû - 11:10

    non c'est de l'AS2 Wink


    _________________

    Mon Site Creation



    Contenu sponsorisé

    Re: Menu suiveur. Merci newton

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


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