Menus deroulants.

 On se propose de créer une zone contenant une barre de menus telle que, lorsque la souris
 passe sur un titre de menu, le menu déroulant correspondant s'affiche.
 Lorsque la souris se déplace sur un élément du menu déroulant, une barre lumineuse apparaît.

 Cet exemple est basique dans la mesure où je n'ai pas développé ici les actions engendrées par
 une action sur un élément quelconque d'un menu déroulant
 Il met en évidence la composition d'effets ( Sprite).

 Les différentes étapes vont être décrites maintenant.

1 - Création de la barre de menu :

1 - Définissez les dimensions générales ainsi que la couleur du fond. Prenez un Frame Rate égal à 30 La couleur du fond est #CC9900
2 - Cliquez sur le bouton de la zone graphique pour créer le bord de bande Indiquez le nom, la couleur #996600, les dimensions comme sur l'image ci-aprés.
3 - Procédez de la même façon pour la bande Indiquez le nom, la couleur #CB7A29, les dimensions comme sur l'image ci-aprés.
4 - Création du titre du Menu 1 Cliquez sur le bouton Entrer 'Menu 1', choisissez la police, la taille, la couleur indiquée ainsi que la position.
Cliquez Modify, Convert, Convert to Button. Outline doit ressembler à l'image gauche. Modifiez les couleurs des textes. Cliquez sur Hit Rectangle et modifiez la taille du rectangle pour qu'elle soit plus grande que le texte
5 - Procédez de la même façon (ou par copie) pour Menu 2 et Menu3. N'oubliez pas cependant d'incrémenter X de 80 pour chaque texte. ( X1 = 0; X2 = 80; X3 = 160; .... )
6 - Dans Outline, sélectionnez tous les éléments en maintenant la touche MAJ enfoncée. Cliquez Modify, Convert, Convert to Sprite. Nommez MENU.

2 - Création du premier menu déroulant :

Vous allez créer le cadre du menu déroulant, son ombre ainsi que les titres des sous-menus qui seront des boutons.

1 - Commencez par tracer un rectangle. (couleur #FFCC33)	2 - puis le rectangle de l'ombre. (couleur #996600)
3 - Dans Outline, déplacez le rectangle de l'ombre vers le bas pour être sous le rectangle du menu déroulant.
4 - Maintenant, créez le texte du premier sous-menu tel que l'indiquent les images.
5 - Cliquez Modify, Convert, Convert to Button. Nommez le bouton submenu11. Changez les couleurs des textes puis cliquez sur Over State.
6 - Il s'agit de créer maintenant le rectangle de la barre lumineuse (couleur bleu clair), que vous déplacerez ensuite dans Outline pour être sous le texte dans Over State.	7 - Modifiez les dimensions du rectangle dans Hit Rectangle pour qu'il ait les mêmes dimensions que la barre lumineuse.
Dans Outline, vous devez avoir quelquechose qui ressemble à	Réduisez l'arborescence, puis faites CTRL C pour copier ce sous-menu.

8 - Procédez de la même façon (ou par copie) pour les autres sous-menus en pensant à modifier
les valeurs des Y (incrément 12) ainsi que les textes.
Vous devez avoir
				
9 - Dans Outline, la touche MAJ demeurant enfoncée, sélectionnez tous les sous-menus ainsi que
le rectangle et l'ombre. Cliquez Modify, Grouping, Group ou  CTRL G
Nommez le groupe menu1.

3 - Création des autres menus déroulants :

Répétez le §2 pour obtenir les 2 autres menus déroulants, en modifiant les textes et les paramêtres de position.
				

4 - Création des Sprites associés :

Pour chaque groupe menu1, menu2, menu3, cliquez Modify, Convert, Convert to Sprite.
Nommez les respectivement popup1, popup2, popup3

5 - Fonctionnement des menus :

Réduire l'arborescence de chaque popup, puis dans Timeline, mettre les Effets Stop, Place, Remove comme indiqué  :
				

6 - Actions des menus :

Dés que la souris passe sur un titre de menu,  le sous-menu correspondant est affiché (Go to Frame 1)
 et tous les autres sous-menus sont fermés (Go to Frame 3).
On ne se préoccupe pas de savoir lequel est déjà ouvert.

Développer la branche MENU dans Outline, puis cliquer menu1 sans développer sa branche.
Dans la zone droite de l'écran, cliquez l'onglet Actions.
Puis, en appuyant successivement sur Add Event, puis Add Action, entrez ce qui est indiqué ci-aprés (son facultatif)				
			

Procédez de même pour les autres menus ( permutation circulaire des cibles/Target)

Naturellement, il faudrait ajouter autant de Tell Target que de menus.

Voilà, c'est terminé. Pour compléter, vous devrez vous préoccuper des actions associées aux sous-menus 
ainsi que de l'appel éventuel d'autres sous-sous-menus.

( Avec SwishMax, c'est un peu plus simple mais il faut un script : voir ICI ) 

Dernière Modification : Lun 29 Avril 2013 19:53
Copyright © 1999-2013 Jean-Paul Molina Tous droits réservés.