How to make a dropdown menu



There are many ways to make a dropdown menu using flash, some easier than others, however, the graphic of the dropdown menu can sometimes be a bit glitchy and just don't do what you want it to.
Here is a way, of making a dropdown menu, that works great, and is very functional.
We will be using the ‘_visible’ code for this dropdown menu, and it works great when making a dropdown menu in flash.
Begin by inserting an additional layer. Double click on layer 1, and rename it, ‘dropDown’. Double click on the other layer, and name it content.
On the dropDown layer, using the rectangle tool, draw out a rectangle, with a width of about ‘110’, and a height of about ‘45’. This rectangle will be used to bring down the dropdown menu. Using the ‘text tool’, draw out a text box in the rectangle, insert the text ‘tools’, and in text boxes property panel, make sure the text is set to ‘static’.
Select the whole rectangle, and right click on it, select ‘copy’, and then right click somewhere on the stage, and select ‘paste’.
ALTERNATIVE/TIP: Place the rectangle in the position that you want it to be, and select the whole thing. Now press ‘Ctrl-c, now press, Ctrl-shift-v’. This will copy the rectangle, and paste it in the exact same position. Using the down arrow key, you can move it just underneath the other rectangle, and then it’s all in place.
Copy and paste the rectangle twice, so that you are left with 3 rectangles on the stage.
On one of the rectangles, double click on the text box, and change the text to ‘FAQ’, and on the other rectangle change the text to ‘Contact’.
Now select one of the rectangles (make sure the text is selected too, hold shift to select multiple things), right click, and select ‘convert to symbol’. Select the ‘button’ radio button, and then click OK. Convert the other two rectangles in to buttons using the same method, (select whole rectangle, right click, convert to symbol, button, OK)
Now position the button that says ‘tools’ on it, in the top left hand corner of the stage, The other two buttons have to go directly underneath, (the final positioning is exactly how you want the dropdown menu to appear, the rest will be done through actionscript).
Select the button with ‘FAQ’ written on it, and change in its property’s panel, give it an instance name of ‘faq_btn’ without the quotes!!!
Now for the ‘Contact’ button, change its instance name to ‘contact_btn’, again, without the quotes!!!
Right click on frame 1 of the ‘dropDown’ layer, and select actions. Insert the following code:

stop();
contact_btn._visible = false;
faq_btn._visible = false;

This tells flash that when the flash movie starts, we want it to be stopped on frame 1, and the contact button, is not to be visible, as well as the faq button.
Now right click on the button that says ‘tools’ on it, and select actions. Insert the following code:

on (release) {
if (_root.faq_btn._visible == false, _root.contact_btn._visible == false) {
_root.faq_btn._visible = true;
_root.contact_btn._visible = true;
} else if (_root.faq_btn._visible == true, _root.contact_btn._visible == true) {
_root.faq_btn._visible = false;
_root.contact_btn._visible = false;
}
}

This tells flash that when the button is release, if the faq button, and the contact button, are not visible, make them visible, and if they are already visible, to make them not visible.
Now right click on the faq button, select actions, and insert the following code:

on (release) {
gotoAndStop(2);
}

This tells flash that when the faq button is release, go to and stop at frame 2.
Right click on the contact button, and insert the following code:

on (release) {
gotoAndStop(3);
}

This tells flash that when the button is release, to go to and stop at frame 3.
That is it for the actions now. Now insert keyframes at frames 2 and 3 on the ‘dropDown’ layer.
All we need to do now is fill in the content layer. Insert keyframes on frames 2 and 3 on this layer as well. (the content layer).
On frame 2, using the ‘text tool’ simply insert the text, FAQ, at the top of the stage, and then just make up a couple of random questions and answers.
Now on frame 3, using the ‘text tool’ again, insert the text, CONTACT, and then perhaps just a fake email, phone number etc.
Now if you hit ‘Ctrl-Enter’, you’ll be able to click the tools button, and the other two options will appear underneath, click the either of the buttons’ and you’ll be taken to the specified frame, simply click on the tool button again, to hide the menu.
And that’s how you make a fully functional dropdown menu.

No comments: