Créer un menu déroulant basique

Créer un menu déroulant basique - Flash/ActionScript - Programmation

Marsh Posté le 31-03-2010 à 09:19:53    

Bonjour,
 
je cherche à réaliser une menu déroulant au clique très basique dans son fonctionnement.
J'ai pour cela trouvé une vidéo de l'exemple apparemment parfait :
 
http://www.youtube.com/watch?v=dir93pWsuk8
 
Effectivement tout marche parfaitement quand on reproduit l'exemple de la vidéo : le menu est cliquable et se déroule bien. Tout est masqué quand il le faut et visible quand il le faut.
Là où ça se gâte c'est quand je duplique cet exemple pour continuer à construire mon menu les sous menu restent visibles dès le départ et plus rien ne fonctionne j'ai pourtant pensé à changer le nom des fonctions en dupliquant :
 

Code :
  1. menu_mc.visible = false ;
  2. menu_mc.actu_btn.addEventListener(MouseEvent.CLICK, clickItem);
  4. notregroupe_btn.addEventListener(MouseEvent.MOUSE_DOWN, clickButton);
  6. function clickButton(event:MouseEvent):void
  7. {
  8. if (menu_mc.visible == true)
  9. {
  10.  menu_mc.visible = false;
  11. } else if (menu_mc.visible == false)
  12. {
  13.  menu_mc.visible = true;
  14. }
  15. }
  17. function clickItem(event:MouseEvent):void
  18. {
  19. trace("YES!" );
  20. }
  22. menu_mc2.visible = false ;
  23. menu_mc2.approv_btn.addEventListener(MouseEvent.CLICK, clickItem2);
  25. ethique_btn.addEventListener(MouseEvent.MOUSE_DOWN, clickButton2);
  27. function clickButton2(event:MouseEvent):void
  28. {
  29. if (menu_mc2.visible == true)
  30. {
  31.  menu_mc2.visible = false;
  32. } else if (menu_mc2.visible == false)
  33. {
  34.  menu_mc2.visible = true;
  35. }
  36. }
  38. function clickItem2(event:MouseEvent):void
  39. {
  40.  trace("YES" );
  41. }


 
Tant que j'y suis je n'arrive pas à insérer un lien html à la place du trace("test" ) quand je mets getURL("#" ) ça renvoie une erreur, comment faire?
 
 
Merci.

Reply

Marsh Posté le 31-03-2010 à 09:19:53   

Reply

Marsh Posté le 31-03-2010 à 10:26:45    

getURL() c'est de l'AS2... En AS3, c'est navigateToURL() ayant pour argument une URLRequest (et non l'url directement). Ça donne donc navigateToURL(new URLRequest("http://www.google.fr" ));

 

Ensuite, je chipote mais dans les parenthèses d'un if(), on met une condition à vérifier si elle est "true"... if(menu_mc2.visible == true) revient donc à "Si (menu_mc2.visible = true) est true... Bref, un if(menu_mc2.visible) suffit...
avec un ! avant si tu veux que la condition soit fausse, soit if(!menu_mc2.visible)

 

Pour le reste du problème, je ne vois pas d'erreur à 1ere vue... est tu sûre que chacune de tes occurrences aient bien les mêmes noms ?
Ça te retourne quoi si tu fais :
trace("verification menu_mc => "+menu_mc);
trace("verification menu_mc2 => "+menu_mc2);

 

Et encore une autre critique, dans l'état actuel de ton code, tu vas devoir dupliquer ton code pour chaques menus et créer une fonction pour chaque sous menu, ça peut paraitre lourd...
Je te conseille de créer des sous fonction, par exemple :

 
Code :
  1. function changeVisibility(monOccurence:*):void
  2. {
  3.     monOccurence.visible ? monOccurence.visible=false : monOccurence.visible=true;
  4.     // C'est un raccourci d'un if/else, la syntaxe est la suivante :
  5.     // [Condition] ? [ si true, fais ci ] : [ si false, fais ça ]
  6. }

Ainsi, en faisant changeVisibility(menu_mc), ça te cachera menu_mc si il etait visible, et inversement, ça te le rendra visible si il était cacher...
Tu peux aussi faire une unique fonction pour tous tes menus :

Code :
  1. menu_mc.addEventListener(MouseEvent.CLICK, clickItem);
  2. menu_mc2.addEventListener(MouseEvent.CLICK, clickItem);
  3.  
  4. function clickItem(event:MouseEvent):void
  5. {
  6.     switch(event.target.name){
  7.             case "menu_mc" :
  8.                 changeVisibility(menu_mc)
  9.                 break;
  10.             case "menu_mc2" :
  11.                 changeVisibility(menu_mc2)
  12.                 break;
  13.         }
  14. }


Message édité par abais le 31-03-2010 à 10:29:54

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 31-03-2010 à 12:22:14    

Merci de ta réponse surtout pour le navigateToURL
 
Tu fais bien de parler des pb liés à la répétitivité de mes menus. En effet, je suis confronté à un problème, au 1er clic le menu1 s'ouvre et au 2e clic il se referme. Le probleme c'est qu'on doit manuellement refermé chaque menu ouvert sous peine de se retrouver avec des sous menus les uns sur les autres.
Y'a-t-il un moyen de dire au clic ouvre le menu -et referme ceux déjà ouvert-? J'ai un peu de mal à appréhender la syntaxe.
 
 
Merci

Reply

Marsh Posté le 31-03-2010 à 12:57:22    

J'était pas reveillé ce matin, la fonction clickItem aurais pu etre 10X plus simple :

Code :
  1. function clickItem(event:MouseEvent):void
  2. {
  3.       changeVisibility(event.target);
  4.       // event.target retourne le clip sue lequel t'as cliqué...
  5. }


Pour fermer un menu deja ouvert, il faut en laisser la trace dans une variable au moment de l'ouverture de celui-ci...
Si au clique d'un menu, cette variable contient quelque chose, ça veut dire qu'un menu à été ouvert auparavant...
Sans oublier de verifier que le dernier menu ouvert ne soit pas le même que celui sur lequel on clique !

Code :
  1. menu_mc.addEventListener(MouseEvent.CLICK, clickItem);
  2. menu_mc2.addEventListener(MouseEvent.CLICK, clickItem);
  3.  
  4. var lastMenuOpened:movieClip; // On declare notre variable sans lui donner de valeur
  5.  
  6. function clickItem(event:MouseEvent):void
  7. {
  8.     if(lastMenuOpened) // si la variable contient qqchose (qu'un menu est deja ouvert) :
  9.     {
  10.          if(lastMenuOpened == e.target) // Si ce menu deja ouvert est le meme que celui sur lequel on clique :
  11.          {
  12.              changeVisibility(e.target); // On cache ce dernier
  13.              lastMenuOpened = null; // On signal que désormais aucun menu est ouvert...
  14.          }
  15.          else // Si c'est un autre menu qui est ouvert
  16.          {
  17.              changeVisibility(lastMenuOpened); // On cache ce dernier menu...
  18.              changeVisibility(e.target); // On affiche celui sur lequel on a cliqué
  19.              lastMenuOpened = e.target; // Puis on attribut ce dernier à notre variable
  20.          }
  21.     }
  22.     else // Sinon (si aucun autre menu est ouvert) :
  23.     {
  24.         changeVisibility(event.target); // On s'occupe juste de celui qui a été cliqué
  25.         lastMenuOpened = e.target; // Puis on signal quel menu vient d'être ouvert à notre variable
  26.     }
  27. }


Pigé ?  :D C'est un jeu de logique...


Message édité par abais le 31-03-2010 à 13:14:27

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 01-04-2010 à 02:21:28    

Merci de cette réponse je suis en train d'essayer de l'appliquer :
 
malheureusement telle que je le place dans le code, tous les menus restent ouverts :
 

Code :
  1. menu_mc.visible = false ;
  2. menu_mc.actu_btn.addEventListener(MouseEvent.CLICK, clickItem);
  3. menu_mc.mc_presentation_btn.addEventListener(MouseEvent.CLICK, clickItem);
  4. menu_mc.nossites_btn.addEventListener(MouseEvent.CLICK, clickItem);
  5. menu_mc.innov_btn.addEventListener(MouseEvent.CLICK, clickItem);
  6. menu_mc.invest_btn.addEventListener(MouseEvent.CLICK, clickItem);
  7. menu_mc.presse_btn.addEventListener(MouseEvent.CLICK, clickItem);
  8. menu_mc.media_btn.addEventListener(MouseEvent.CLICK, clickItem);
  9. menu_mc.carriere_btn.addEventListener(MouseEvent.CLICK, clickItem);
  11. notregroupe_btn.addEventListener(MouseEvent.MOUSE_DOWN, clickButton);
  13. function clickButton(event:MouseEvent):void
  14. {
  15. if (menu_mc.visible == true)
  16. {
  17.  menu_mc.visible = false;
  18. } else if (menu_mc.visible == false)
  19. {
  20.  menu_mc.visible = true;
  21. }
  22. }
  24. function clickItem(event:MouseEvent):void
  25. {
  26. navigateToURL(new URLRequest("#" ), '_self');
  27. }
  29. menu_mc2.visible = false ;
  30. menu_mc2.approv_btn.addEventListener(MouseEvent.CLICK, clickItem2);
  32. ethique_btn.addEventListener(MouseEvent.MOUSE_DOWN, clickButton2);
  34. function clickButton2(event:MouseEvent):void
  35. {
  36. if (menu_mc2.visible == true)
  37. {
  38.  menu_mc2.visible = false;
  39. } else if (menu_mc2.visible == false)
  40. {
  41.  menu_mc2.visible = true;
  42. }
  43. }
  45. function clickItem2(event:MouseEvent):void
  46. {
  47.   navigateToURL(new URLRequest("#" ), '_self');
  48. }
  50. menu_mc3.visible = false ;
  51. menu_mc3.provence_btn.addEventListener(MouseEvent.CLICK, clickItem3);
  53. culture_btn.addEventListener(MouseEvent.MOUSE_DOWN, clickButton3);
  55. function clickButton3(event:MouseEvent):void
  56. {
  57. if (menu_mc3.visible == true)
  58. {
  59.  menu_mc3.visible = false;
  60. } else if (menu_mc3.visible == false)
  61. {
  62.  menu_mc3.visible = true;
  63. }
  64. }
  66. function clickItem3(event:MouseEvent):void
  67. {
  68.   navigateToURL(new URLRequest("#" ), '_self');
  69. }
  73. menu_mc4.visible = false ;
  74. menu_mc4.plantes_btn.addEventListener(MouseEvent.CLICK, clickItem4);
  76. univers_btn.addEventListener(MouseEvent.MOUSE_DOWN, clickButton4);
  78. function clickButton4(event:MouseEvent):void
  79. {
  80. if (menu_mc4.visible == true)
  81. {
  82.  menu_mc4.visible = false;
  83. } else if (menu_mc4.visible == false)
  84. {
  85.  menu_mc4.visible = true;
  86. }
  87. }
  89. function clickItem4(event:MouseEvent):void
  90. {
  91.   navigateToURL(new URLRequest("#" ), '_self');
  92. }
  96. menu_mc5.visible = false ;
  97. menu_mc5.parfine_btn.addEventListener(MouseEvent.CLICK, clickItem5);
  99. activite_btn.addEventListener(MouseEvent.MOUSE_DOWN, clickButton5);
  101. function clickButton5(event:MouseEvent):void
  102. {
  103. if (menu_mc5.visible == true)
  104. {
  105.  menu_mc5.visible = false;
  106. } else if (menu_mc5.visible == false)
  107. {
  108.  menu_mc5.visible = true;
  109. }
  110. }
  112. function clickItem5(event:MouseEvent):void
  113. {
  114.   navigateToURL(new URLRequest("#" ), '_self');
  115. }
  118. menu_mc6.visible = false ;
  119. menu_mc6.matieres_btn.addEventListener(MouseEvent.CLICK, clickItem6);
  121. metiers_btn.addEventListener(MouseEvent.MOUSE_DOWN, clickButton6);
  123. function clickButton6(event:MouseEvent):void
  124. {
  125. if (menu_mc6.visible == true)
  126. {
  127.  menu_mc6.visible = false;
  128. } else if (menu_mc6.visible == false)
  129. {
  130.  menu_mc6.visible = true;
  131. }
  132. }
  134. function clickItem6(event:MouseEvent):void
  135. {
  136.   navigateToURL(new URLRequest("#" ), '_self');
  137. }
  141. menu_mc.addEventListener(MouseEvent.CLICK, clickItem);
  143. menu_mc2.addEventListener(MouseEvent.CLICK, clickItem2);
  145.   menu_mc3.addEventListener(MouseEvent.CLICK, clickItem3);
  146.  
  147.    menu_mc4.addEventListener(MouseEvent.CLICK, clickItem4);
  148.  
  149.     menu_mc5.addEventListener(MouseEvent.CLICK, clickItem5);
  151.  menu_mc6.addEventListener(MouseEvent.CLICK, clickItem6);
  155. var lastMenuOpened:movieClip; // On declare notre variable sans lui donner de valeur
  156.  
  158. function clickItem(event:MouseEvent):void
  159. {
  161. if(lastMenuOpened) // si la variable contient qqchose (qu'un menu est deja ouvert) :
  163. {
  165. if(lastMenuOpened == e.target) // Si ce menu deja ouvert est le meme que celui sur lequel on clique :
  166. {
  167. changeVisibility(e.target); // On cache ce dernier
  168. lastMenuOpened = null; // On signal que désormais aucun menu est ouvert...
  169. }
  170. else // Si c'est un autre menu qui est ouvert
  171. {
  172. changeVisibility(lastMenuOpened); // On cache ce dernier menu...
  173. changeVisibility(e.target); // On affiche celui sur lequel on a cliqué
  174. lastMenuOpened = e.target; // Puis on attribut ce dernier à notre variable
  175. }
  176. }
  177. else // Sinon (si aucun autre menu est ouvert) :
  178. {
  179. changeVisibility(event.target); // On s'occupe juste de celui qui a été cliqué
  180. lastMenuOpened = e.target; // Puis on signal quel menu vient d'être ouvert à notre variable
  181. }
  182. }


 
JE comprends que ce code fais doublon avec celui que j'avais deja, mais je ne comprends pas bien quoi enlever...


Message édité par shinji3rd le 01-04-2010 à 02:24:17
Reply

Marsh Posté le 01-04-2010 à 10:16:59    

deja un truc bete, utilise les balise [code=actionscript ] [ /code ] (sans les espaces)
Sinon, quand tu doubleclic dans le champs de code (toujours sur le forum), ça retire la numérotation des lignes, ce qui ne te fais pas de surplus quand tu copies/colles...

 

Ensuite, à 1ere vue :

 

1) la fonction clickItem (celle que j'ai fais), c'est pour tes menu_mc#, et non pour tes sous-menus !!!

 

2) Du coups, t'as 2 fonctions "clikItem" déclaré là, non non non !

 

3) Tu as oublié de mettre la fonction changeVisibility

 

Utilise la touche Tab pour indenter ton code, c'est pas très lisible là...
Je ne peux pas t'apprendre les bases de l'AS3, vas sur Yazo.net pour reviser un peu, jusqu'à ce que tu comprenne ligne par ligne ce que je t'ai mis...

 

Enfin, je ne te garantie pas que mon code va marcher, je ne l'ai pas testé, il m'arrive donc parfois d'oublier des conneries hein !


Message édité par abais le 01-04-2010 à 10:18:20

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed