Pas encore membre ? Enregistrez-vous ! | Identifiants égarés ?
Fermer

Menu déroulant

  • Introduction
  • Informations
Menu déroulant Vous découvrirez dans ce tutoriel une méthode pour réaliser un menu déroulant avec Les interpolations de mouvements et un peu d'ActionScript.  
Netger
  • Auteur : Netger
  • Publication : 19 févr. 2007 16:29
  • Consultations : 2948
 

1. Nouveau document

Menu déroulant image 1 Créer un nouveau document flash ou utilisez un document existant

Pour cet exemple je commencerai avec une page blanche :

2. Créer les symboles "menu" et "sousMenu"

Nous allons commencer par créer les symboles qui nous servirons de menu et de sous-menu.
Pour le tutoriel j'utiliserai de simple rectangles mais vous pouvez trés bien utiliser de belles images ;-)

Menu déroulant image 2 Cliquez sur "Insertion" et "Nouveau symbole" puis créez le MovieClip "menu" et ajoutez lui un champ de texte dynamique ayant comme nom de variable "label_menu".


Renouvelez l'opération précédente pour créez le MovieClip "sousMenu".
Ajoutez lui un champ de texte dynamique ayant comme nom de variable "label_sousmenu".


Les champs de texte dynamiques nous permettront d'afficher les titres de nos menus avec ActionScript.
Revenez maintenant à la racine de votre animation.

3. Interpolations des menus et de leurs sous-menus

Nous allons ici nous occuper des interpolations de mouvement qui animeront notre menu.

Menu déroulant image 3 Placez sur votre scène une première occurrence du bouton "menu" puis ajouter en dessous autant d'occurrences du MC "sousMenu" que vous souhaitez avoir de sous-menu.

Affectez un nom d'occurrence au MC "menu" (par exemple "menu1") ainsi qu'un nom différent pour chaque MC "sousMenu" ("sousmenu1" puis "sousmenu2, etc...) que vous placez (nommer les occurrences est trés important pour que le script fonctionne).


Il nous faut maintenant faire les interpolations : Vous pouvez ici faire un peu ce que vous voulez comme interpolations de mouvements
La partie qui suit est donc un exemple d'interpolation pour que le tutorial reste compréhensible.

Occupons nous du premier groupe de bouton :
Déplacez chaque sous-menu 10 frames plus loin et insérez une nouvelle image-clé environs 10 frames plus loin, puis recommencez 10 autres frames plus loin.


"Repliez" votre sous-menu sur la première et sur la dernière image clé puis déclarez une interpolation de mouvements pour chaque symbole.


Renouvelez cette opération autant de fois que vous souhaitez avoir de menus mais veillez bien à ce que les animations des différents menus ne se chevauchent pas.

4. Un peu d'ActionScript

Il nous faut maintenant utiliser un peu de code pour faire fonctionner correctement ce menu.
Créez un nouveau calque nommé "AS" : nous l'utiliseront pour bien séparer le script des animations.

Menu déroulant image 4 Avant de commencer et pour clarifier les choses nous allons placer des étiquettes sur notre calque "AS" : celà nous permettra aussi de replacer facilement la tête de lecture de l'animation lorsque nous en aurons besoin.

Placez une étiquette "menu1", "menu2", etc... à chaque début "d'ouverture" d'un menu.
Et une étiquette "roll1", "roll2", etc... à chaque début de "fermeture" d'un menu.
Utilisez ce screenshot pour vous repérer.


Pour commencer nous allons nous occuper des arrêts du script : placez une action stop(); à la premiere frame et une à chaque fois qu'un segment de menu est complètement déroulé.


Occupons nous maintenant des retours au début de l'animation, c'est à dire à chaque fois que le menu est revenu à sa forme d'origine : placez une action gotoAndStop(1); à la fin de l'animation de chaque menu.


Nous allons maintenant nous intéresser aux actions des boutons de notre menu ainsi qu'aux titres de nos boutons.
Utilisez le code suivant pour écrire un script qui correspond à ce que vous souhaitez faire :
Code-source actionscript
  1. _root.onEnterFrame = function()
  2. {
  3. 	// Textes affichés sur les symboles "menu"
  4. 	_level0.menu1.label_menu = "Menu1";
  5. 	_level0.menu2.label_menu = "Menu2";
  6. 	_level0.menu3.label_menu = "Menu3";
  7.  
  8. 	// Textes affichés sur les symboles "sousmenu"
  9. 	_level0.sousmenu1.label_sousmenu = "sousMenu1";
  10. 	_level0.sousmenu2.label_sousmenu = "sousMenu2";
  11. 	_level0.sousmenu3.label_sousmenu = "sousMenu3";
  12. 	_level0.sousmenu4.label_sousmenu = "sousMenu4";
  13. 	_level0.sousmenu5.label_sousmenu = "sousMenu5";
  14. 	_level0.sousmenu6.label_sousmenu = "sousMenu6";
  15. 	_level0.sousmenu7.label_sousmenu = "sousMenu7";
  16. 	_level0.sousmenu8.label_sousmenu = "sousMenu8";
  17. 	_level0.sousmenu9.label_sousmenu = "sousMenu9";
  18.  
  19. 	// Actions des menus >> affiche ou cache le sous-menu
  20. 	_level0.menu1.onRelease = function() { gotoAndPlay(etiquette_menu1); }
  21. 	_level0.menu2.onRelease = function() { gotoAndPlay(etiquette_menu2); }
  22. 	_level0.menu3.onRelease = function() { gotoAndPlay(etiquette_menu3); }
  23.  
  24. 	// Actions des sous-menus
  25. 	_level0.sousmenu1.onRelease = function() { trace("clic1"); }
  26. 	_level0.sousmenu2.onRelease = function() { trace("clic2"); }
  27. 	_level0.sousmenu3.onRelease = function() { trace("clic3"); }
  28. 	_level0.sousmenu4.onRelease = function() { trace("clic4"); }
  29. 	_level0.sousmenu5.onRelease = function() { trace("clic5"); }
  30. 	_level0.sousmenu6.onRelease = function() { trace("clic6"); }
  31. 	_level0.sousmenu7.onRelease = function() { trace("clic7"); }
  32. 	_level0.sousmenu8.onRelease = function() { trace("clic8"); }
  33. 	_level0.sousmenu9.onRelease = function() { trace("clic9"); }
  34. }
 
Placez ce code à la première frame de votre animation après l'action stop(); que nous y avons placé précédemment.


Il ne nous reste plus qu'à créer les variables qui modifieront les actions de nos symboles "menu" en cours d'animation.

Toujours sur la frame 1, déclarez les variables suivantes (en fonction du nombre de symboles "menu" que vous utilisez) entre l'action stop(); et la fonction onEnterFrame :
Code-source actionscript
  1. var etiquette_menu1 = "menu1"; // renvoi à l'étiquette "menu1"
  2. var etiquette_menu2 = "menu2"; // etc...
  3. var etiquette_menu3 = "menu3"; // ...
 

Et pour chaque menu, une frame avant l'étiquette "roll1", "roll2" etc... redéfinissez les valeurs ainsi sous l'action stop(); :
Une frame avant l'étiquette "roll1" :
Code-source actionscript
  1. etiquette_menu1 = "roll1";
  2. etiquette_menu2 = "roll1";
  3. etiquette_menu3 = "roll1";
 
Une frame avant l'étiquette "roll2" :
Code-source actionscript
  1. etiquette_menu1 = "roll2";
  2. etiquette_menu2 = "roll2";
  3. etiquette_menu3 = "roll2";
  4. etc...
 
Ce tutoriel vous apporte une méthode globale pour créer ce genre de menu.
Il ne vous reste plus qu'à personnaliser tout ça pour obtenir un joli menu pour votre site web  
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire