Drop-down Menus


The purpose is to create a zone containing a menubar so that, while mouse is over a menuitem a corresponding scrolldown menu 'd be displayed.
When mouse is over a menuitem of the scrolldown menu, the menuitem is highlighted.
This example is quite basic inasmuch as I didn't define the actions triggered by a click on a menuitem in a scrolldown menu.
We enhance the composition of effects

⇒ see animation ⇐

Creating a menubar

1 - Set up width, height
Set up a Frame Rate equal to30. Backgroung color : #CC9900


2 - Click button Ellipse in graphic zone to create the edge of the strip. Set up name, color #996600, width, height as shown in image hereafter.

couleur bord de bande      dimensions de bande

3 - Proceed the same way to get the strip. Set up name, color #CB7A29, width, height as shown in image hereafter.

couleur de bande      dimensions de bande

4 - Creating title of Menu 1. Click button Insert Text. Enter 'Menu 1', select font, its size, color and position.

couleur      dimension

Click Modify, Convert, Convert to Button. Outline 'd look like the left image. Change the textcolor. Click Hit Rectangle Change the size of the rectangle so that it's taller than text.

outline      Hit Rectangle

5 - Proceed the same way (or copy and paste it) for Menu 2, Menu3.
Don't yet forget to increment X by 80 for every text. (X1 = 0; X2 = 80; X3 = 160;)

6 - In Outline, select all objects while maintaining SHIFT in a down state. Click Modify, Convert, Convert to Sprite. Name it MENU.

outline      outline

Creating 1st scrolldown menu

You gonna create the frame, the shadow of the scrolldown menu, as well as titles of submenus which 'll be buttons.
1 - Begin drawing a rectangle. (color #FFCC33)


2 - then the shadowed rectangle. (color #996600)


3 - In Outline, move the shadowed rectangle downwards after the rectangle of the scrolldown menu.


4 - Right now, create the text of 1st submenu as shown :

couleur      dimensions

5 - Click Modify, Convert, Convert to Button. Name it submenu11.
Change all textcolor, then click Over State.

6 - You are about to create the rectangle of the highlighted bar (color cyan), move it in Outline so that it's under the text in Over State.

barre lumineuse

7 - Change dimensions of rectangle in Hit Rectangle o that it has got same size as the highlighted bar.

Hit Rectangle

In Outline, you 'd get something like :

Outline sous-menu

Reduce tree, then hit CTRL C to copy this submenu.


8 - Proceed the same way (or by copy and paste) for other submenus but don't forget to change Y values (increment 12) as well as text labels. You 'd get

menu déroulant

9 - In Outline, SHIFT being in a down state, select all submenus as well as rectangle and shadow. Click Modify, Grouping, Group ou CTRL G. Name that group menu1.

Creating other scrolldown menus

Repeat §2 to get the 2 others, changing texts and position parameters.

Tous les menus déroulants

Creating the associated Sprites

For every group menu1, menu2, menu3, cliquez Modify, Convert, Convert to Sprite. Name them respectively popup1, popup2, popup3

Menus operating system

Reduce tree of every popup, then in Timeline, set up the Effects Stop, Place, Remove as mentioned :


Menus Actions

As soon as the mouse is over a menutitle, the corresponding scrolldown menu is displayed (Go to Frame 1) and all others are removed (Go to Frame 3). We don't worry to know which submenu was opened.
Extend the tree MENU in Outline, then click menu1 but don't extend its tree.
In the right zone, click tab Actions. Then, hitting Add Event, then Add Action, enter all that's mentioned hereafter (you could add sound if you want)


Proceed the same way for other submenus ( cyclic permutation of Target). Of course, you 'd add as much Tell Target as menus.

Et Voilà, it's over. It's up to you to define Actions while clicking submenus items ...
With SwishMax, it's more simple using a script, but you need a script, don't you?


Si vous aimez le site


Select a language if you need :

Page chargée en 0.003 sec.

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

to Google