Menus déroulants

 

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.

⇒ voir l'animation ⇐

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

dimensions

2 - Cliquez sur le bouton Ellipse 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.

couleur bord de bande      dimensions de bande

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.

couleur de bande      dimensions de bande

4 - Création du titre du Menu 1. Cliquez sur le bouton Insert Text. Entrer 'Menu 1', choisissez la police, la taille, la couleur indiquée ainsi que la position.

couleur      dimension

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.

outline      Hit Rectangle

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.

outline      outline

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)

dimensions

2 - puis le rectangle de l'ombre. (couleur #996600)

dimensions

3 - Dans Outline, déplacez le rectangle de l'ombre vers le bas pour être sous le rectangle du menu déroulant.

outline

4 - Maintenant, créez le texte du premier sous-menu tel que l'indiquent les images.

couleur      dimensions

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.

barre lumineuse

7 - Modifiez les dimensions du rectangle dans Hit Rectangle pour qu'il ait les mêmes dimensions que la barre lumineuse.

Hit Rectangle

Dans Outline, vous devez avoir quelquechose qui ressemble à

Outline sous-menu

Réduisez l'arborescence, puis faites CTRL C pour copier ce sous-menu.

Outline

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

menu déroulant

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.

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.

Tous les menus déroulants

Création des Sprites associés

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

Fonctionnement des menus

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

Timeline

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)

Actions

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 cette rubrique.

 


Si vous aimez le site

 

Select a language if you need :


Page chargée en 0.004 sec.

Dernière Modification : Mer 25 Janvier 2017 8:56
Copyright © 1999-2017 Jean-Paul Molina Tous droits réservés.

vers Google