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 glissière avec effet lumineux (intermédiaire)

    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 glissière avec effet lumineux (intermédiaire)

    Message par artkabis le Sam 18 Juil - 12:15

    Salut, après avoir passé pas mal de temps à préparer ce tutoriel, je peux enfin vous le présenter:

    Dans cette vidéo, nous créerons un menu glissière avec apparition dynamique, pour cela, nous utiliserons la classe TweenLite pour les transitions et la classe Rollover (personnalisé) pour la gestion des états des boutons, cette dernière classe vous avez déjà été proposé dans la partie 'partage de code', je l'ai juste légèrement réadapté pour l'occasion, mais elle reste tout même similaire à celle de mon framework.

    Le résultat:


    Voici quelques unes des fonctionnalité de ce menu:

    •Formatage css interne pour les titres de notre menu.
    •Reflet lumineux
    •Rollover dynamique géré en externe
    •Bride des boutons pendant la navigation
    •Bride des boutons en fonction de la page en cours.
    •Filtres dynamiques (ombres)

    Vous trouverez la classe Rollover ici>>
    class_rollOver

    Et le fichier fla ici>>
    Menu_cache

    Le tutoriel>>


    Dernière édition par artkabis le Dim 1 Nov - 21:40, édité 3 fois

    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 glissière avec effet lumineux (intermédiaire)

    Message par artkabis le Sam 18 Juil - 17:17

    Le tuto est pratiquement uploadé, il devrait être visible dans moins d'une demi heure...


    _________________
    J'me fais de la pub et na tongue

    Invité
    Invité

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par Invité le Lun 20 Juil - 10:07

    super tuto art merci 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 glissière avec effet lumineux (intermédiaire)

    Message par artkabis le Lun 20 Juil - 10:53

    Pas de quoi, j'ai passé pas mal de temps à le préparer celui-là...

    Normalement il y a pas mal de choses qui sont passé en revu et on y apprend quelques petites astuces bien utiles pour la prog en as3


    _________________
    J'me fais de la pub et na tongue

    mathieu020
    Nouveau membre
    Nouveau membre

    Messages : : 4
    Age : : 29
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 09/09/2009

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par mathieu020 le Jeu 10 Sep - 13:12

    Merci, c'est trop cool

    philippe maurice
    Nouveau membre
    Nouveau membre

    Messages : : 4
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 09/08/2009

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

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par philippe maurice le Ven 11 Sep - 3:39

    Bonjour,
    Bravo c'est du beau travail et ton tuto en vidéo est très bien expliqué.

    Je me heurte toutefois à un petit problème avec ce code quoi que je fasse le premier clic fonctionne puis tous se bloque sauf l'effet lumineux en rollover. Je n'ai aucune erreur même en déboguage J'ai recommencé depuis le début trois fois et c'est toujours pareil. de plus je ne peut pas ouvrir ton fichier source alors je ne peut même pas comparer pour trouver mon erreur.

    Petite précision, j'utilise CS3.

    si quelqu'un à rencontré toute aide serait la bienvenue.

    Merci et bonne continuation à tous.

    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 glissière avec effet lumineux (intermédiaire)

    Message par artkabis le Ven 11 Sep - 17:13

    Salut es-tu bien certain d'avoir ceci dans la fonction 'ouvrePage ?
    Code:

          TweenLite.to(page,1,{x:centreX,ease:Back.easeOut,onComplete:function reactiv():void{m.mouseChildren = true}});


    _________________
    J'me fais de la pub et na tongue

    philippe maurice
    Nouveau membre
    Nouveau membre

    Messages : : 4
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 09/08/2009

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

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par philippe maurice le Sam 12 Sep - 1:32

    bonjour à tous et merci de t'intérresser à mon problème mais c'est résolu
    ce n'était en fait qu'une simple erreur d'inattention veuillez m'excuser pour le message inutile. TOUT marche NIKEL c'est du beau travail merci encore.

    juliendangers
    Nouveau membre
    Nouveau membre

    Messages : : 30
    Age : : 25
    Logiciels : Logiciels : : Adobe flash professionnel CS4, adobe photoshop CS4
    Date d'inscription : 22/10/2009

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par juliendangers le Ven 30 Oct - 17:26

    suis je le seul à ne voir aucun liens?? Car ce tuto m'aurait intéressé :D

    Plumaillon
    Ceinture jaune
    Ceinture jaune

    Messages : : 274
    Age : : 28
    Date d'inscription : 28/03/2009

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

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par Plumaillon le Ven 30 Oct - 17:56

    Pour ma part je vois le .swf, les liens pour les téléchargements ont perdus leurs images mais fonctionnent et le tuto est là^^
    Donc oui c'est surement juste pour toi....

    Edit : rectification les liens ne fonctionnent pas xD
    et le tuto non plus apparament

    juliendangers
    Nouveau membre
    Nouveau membre

    Messages : : 30
    Age : : 25
    Logiciels : Logiciels : : Adobe flash professionnel CS4, adobe photoshop CS4
    Date d'inscription : 22/10/2009

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par juliendangers le Ven 30 Oct - 19:18

    ouai tu me rassure mdr! car j'ai lancé la page dans 3 navigateurs et a chaque fois rien en marchait, donc là j'aurais vrmnt eu un pb... xD

    ludopene
    Nouveau membre
    Nouveau membre

    Messages : : 4
    Age : : 35
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 06/10/2009

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par ludopene le Lun 16 Nov - 16:27

    bonsoir,

    marche pas pour moi non plus, dommage il me plait vraiment !!!

    juliendangers
    Nouveau membre
    Nouveau membre

    Messages : : 30
    Age : : 25
    Logiciels : Logiciels : : Adobe flash professionnel CS4, adobe photoshop CS4
    Date d'inscription : 22/10/2009

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par juliendangers le Lun 16 Nov - 17:56

    bah si tu regarde bien artkabis a tt remis le 1er novembre :p Donc tt y est!!!

    Platoon
    Nouveau membre
    Nouveau membre

    Messages : : 10
    Age : : 39
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?

    Flash 8 , Gimp2 et depuis peu After Effects
    Date d'inscription : 14/11/2009

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

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par Platoon le Sam 21 Nov - 21:23

    Merci Pour Ce Tuto Génial mais je voudrais savoir comment remplacer les chiffres qui apparaisse dans les carres par un texte par exemple

    Merci de votre Aide

    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 glissière avec effet lumineux (intermédiaire)

    Message par artkabis le Sam 21 Nov - 22:32

    Alors tu peux mettre un contenu différent en fonction de la valeur de nbP, sachant que pour accéder au champ de texte dynamique, tu devras modifier l'élément page.nbPage.text

    Donc dans la fonction ouvrePage, tu peux faire ceci:

    Code:
    if(nbPage === 1){
    page.nbPage.text = 'contenu de la page lié au bouton n°1'
    }else if(nbPage === 2)
    {
    page.nbPage.text = 'contenu de la page lié au bouton n°2'
    }
    Et il te suffit de continuer ainsi en fonction du nombre de boutons liés à ton interface


    _________________
    J'me fais de la pub et na tongue

    Platoon
    Nouveau membre
    Nouveau membre

    Messages : : 10
    Age : : 39
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?

    Flash 8 , Gimp2 et depuis peu After Effects
    Date d'inscription : 14/11/2009

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

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par Platoon le Dim 22 Nov - 18:28

    Merci pour ta réponse

    Mais quand tu dit je te site "tu devras modifier l'élément page.nbPage.text"

    Ligne Actuellement dans le Script

    page.nbPage.text = String(nbP)

    Dois je le remplacer par ce que tu m'a donné ou changer une valeur et rajouter les quelques lignes que tu m'a donné.

    Excuse moi mais je débute en Flash je suis pas très compètent en la matière.

    Encore désole.

    Plumaillon
    Ceinture jaune
    Ceinture jaune

    Messages : : 274
    Age : : 28
    Date d'inscription : 28/03/2009

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

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par Plumaillon le Dim 22 Nov - 20:22

    Donc dans la fonction ouvrePage, tu peux faire ceci:
    signifie, que c'est à l'intérieur de ta fonction.
    tu dois avoir logiquement une ligne de code qui contient :
    Code:
    function ouvrePage gningningnin
    juste après cette ligne tu écris directement le code qu'artkabis t'as donné, il signifie:

    si le numéro de page est égal à 1
    écrire :'contenu de la page lié au bouton n°1'
    autrement, si le numéro de la page est égal à 2
    écrire : 'contenu de la page lié au bouton n°2'

    Après ça, tu peux ajouter le nombre de page que tu veux en reprenant le code et en modifiant uniquement les chiffres.
    En gros pour une troisième page :
    Code:
    }else if(nbPage === 3)
    {
    page.nbPage.text = 'contenu de la page lié au bouton n°3'
    }

    Il me semble que tu dois grader la ligne de code que tu as déjà car c'est la fonction String() qui te permet de passer des nombres de pages à l'écriture. Si tu l'enlève tu auras probablement un message d'erreur du type : machin String vers un élément de type Number sans rapport" ou quelque chose dans ce gout là (sans le machin lol! )
    Voilà tu sais tout!

    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 glissière avec effet lumineux (intermédiaire)

    Message par artkabis le Lun 23 Nov - 11:15

    En effet, merci plumaillon ...

    Après, si tu as vraiment des difficultés à mettre ceci en place, n'hésites surtout pas à revenir ici, je sais que ce n'est pas simple de tout comprendre qu'en on débute, alors saches que je te donnerais un coup de pouce si besoin est.


    _________________
    J'me fais de la pub et na tongue

    Platoon
    Nouveau membre
    Nouveau membre

    Messages : : 10
    Age : : 39
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?

    Flash 8 , Gimp2 et depuis peu After Effects
    Date d'inscription : 14/11/2009

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

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par Platoon le Mar 24 Nov - 7:26

    Bonjour

    Alors déjà merci pour vos explications mais excusez moi mais j'ai encore besoin de vos lumière voila j ai bien suivie ce que vous m'avez dit (du moins j'espère) et malheureusement rien n'y fais.

    Quand je met le bout de script donc comme ceci

    Code:
    function ouvrePage(me:MouseEvent):void
    if(nbPage === 1){
    page.nbPage.text = 'contenu de la page lié au bouton n°1'
    }else if(nbPage === 2)
    {
    page.nbPage.text = 'contenu de la page lié au bouton n°2'
    }else if(nbPage === 3)
    {
    page.nbPage.text = 'contenu de la page lié au bouton n°3'
    }else if(nbPage === 4)
    {
    page.nbPage.text = 'contenu de la page lié au bouton n°4'
    }else if(nbPage === 5)
    {
    page.nbPage.text = 'contenu de la page lié au bouton n°5'
    }

    Voici l'erreur qui s'affiche
    1126: La fonction ne comporte pas d'élément body.

    Par contre si je place le script apres "{" comme ceci

    Code:
    function ouvrePage(me:MouseEvent):void
    {
        if(nbPage === 1){
    page.nbPage.text = 'contenu de la page lié au bouton n°1'
    }else if(nbPage === 2)
    {
    page.nbPage.text = 'contenu de la page lié au bouton n°2'
    }else if(nbPage === 3)
    {
    page.nbPage.text = 'contenu de la page lié au bouton n°3'
    }else if(nbPage === 4)
    {
    page.nbPage.text = 'contenu de la page lié au bouton n°4'
    }else if(nbPage === 5)
    {
    page.nbPage.text = 'contenu de la page lié au bouton n°5'
    }

    Voici ce qui ce passe

    1120: Accès à la propriété non définie nbPage.
    Warning: 3590: void utilisée alors qu'une valeur booléenne est attendue. L'expression va être transtypée comme booléenne.

    Encore désolé de vous dérangez avec ceci et je vous remercie de l'aide que vous pourriez m'apporter.

    Platoon

    Plumaillon
    Ceinture jaune
    Ceinture jaune

    Messages : : 274
    Age : : 28
    Date d'inscription : 28/03/2009

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

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par Plumaillon le Mar 24 Nov - 8:39

    Alors il y a plusieurs points que tu peux arranger rapidement. Effectivement une fonction comporte des accolades, ce sont elles qui informent que des ordres sont donnés. Ensuite il n'y a pas de propriétés car tu n'as pas laissé
    Code:
    page.nbPage.text = String(nbP)
    met le juste après ta pemière accolade et juste avant la première instruction.
    Pour le :void, essaye en le supprimant Wink

    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 glissière avec effet lumineux (intermédiaire)

    Message par artkabis le Mar 24 Nov - 13:37

    La deuxième solution est la bonne, mais tu n'as pas du déclarer la variable nbPage dans le corps de ton script:
    Code:
    var nbPage:int;
    à placer en dehors de toute fonction et le plus haut possible dans ton code...


    _________________
    J'me fais de la pub et na tongue

    Platoon
    Nouveau membre
    Nouveau membre

    Messages : : 10
    Age : : 39
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?

    Flash 8 , Gimp2 et depuis peu After Effects
    Date d'inscription : 14/11/2009

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

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par Platoon le Mar 24 Nov - 14:51

    Merci de votre aide le tableau s'affiche de nouveau en entier et merci pour votre patience.


    lorenzo
    Nouveau membre
    Nouveau membre

    Messages : : 7
    Age : : 37
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 22/12/2009

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par lorenzo le Dim 10 Jan - 0:58

    salut merci déjà pour ce tuto magnifique, par-contre lol j'ai un souci
    voilà j'ai importer mes classes, mai quand je regarde l'animation Ctrl+entrée, j'ai les erreurs suivante: et j'ai les case du menu qui scintille en continue lol merci de m'aidai, parce-que se tuto et super et j'aimerais utilisé cette AS3 pour mon site merci à vous

    Emplacement=Sine.as,ligne1
    5001: Le nom de paquet 'gs.TwinMax.easing' ne reflète pas l'emplacement de ce fichier. Modifiez le nom de la définition du paquet dans ce fichier ou déplacez le fichier. C:\Users\Lorenzo\Pictures\image template joomla\test pack\galerie3D\classe_as\AS3\TwinMax\gs\easing\Sine.as

    Emplacement=Back.as,ligne1
    5001: Le nom de paquet 'gs.TwinMax.easing' ne reflète pas l'emplacement de ce fichier. Modifiez le nom de la définition du paquet dans ce fichier ou déplacez le fichier. C:\Users\Lorenzo\Pictures\image template joomla\test pack\galerie3D\classe_as\AS3\TwinMax\gs\easing\Back.as

    Emplacement=TweenLite.as,ligne1:
    5001: Le nom de paquet 'gs.TwinMax' ne reflète pas l'emplacement de ce fichier. Modifiez le nom de la définition du paquet dans ce fichier ou déplacez le fichier. C:\Users\Lorenzo\Pictures\image template joomla\test pack\galerie3D\classe_as\AS3\TwinMax\gs\TweenLite.as

    PS: pourtant je rentre pas dans le dossier gs de la classe TwinMax!! je clic juste sur le dossier TwinMax, je voi le fichier gs dedans et je clic pas dessus, tout pareille pour le rellover, j'ai intitulé cette classe rellover, donc j'ai crée un dossier (rellover) epuis bah a l'interieur on à le dossier fr donc tout pareille je prend le dossier rellover, et je ne clic pas sur le dossier fr,meme sans crée le dossier rellover, et en cliquant sur le dossier fr, le problème et le meme donc je pense que j'ai bien importer mes classes, mai sa merde lol merci à vous!!

    lorenzo
    Nouveau membre
    Nouveau membre

    Messages : : 7
    Age : : 37
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 22/12/2009

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par lorenzo le Dim 10 Jan - 17:48

    j'abandonne pour aujourd'hui en attendant d'avoir une réponse, j'y suis depuis ce matin, et je n'arrive toujours pas a importé correctement les classes, et pourtant dieu sais que j'ai regarder les deux tutos, au moins 4 fois avec des pauses etccc pfff sais la premier fois que j'arrive pas a réalisé un tuto du forum HELP ME!! lol

    lorenzo
    Nouveau membre
    Nouveau membre

    Messages : : 7
    Age : : 37
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 22/12/2009

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par lorenzo le Dim 10 Jan - 18:40

    Après quelque minute de plus j'ai changer la façon d'importer les classes, et j'ai donc vue que dans chaque tuto, les classe son importer ainsi:
    (import gs.TwinMax;) alor que moi à la place du dossier gs, j'ai com, donc j'ai remplacer le gs par le com et juste avent TwinMax j'ai mi greensock.TwinMax, mai toujour des erreurs!!! grrr

    Contenu sponsorisé

    Re: Menu glissière avec effet lumineux (intermédiaire)

    Message par Contenu sponsorisé Aujourd'hui à 19:47


      La date/heure actuelle est Mar 6 Déc - 19:47