First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing!
Search tutorials
Author: Oleg Lazarenko | Website: http://www.metamorphozis.com
Dropdown Menu in Flash MX 2004

Before using this tutorial it is strongly recommended to read "Creating basic buttons in Flash MX 2004" lesson as many things about buttons in this tutorial are not explained as good as they explained there.

a. Launch Flash MX 2004

b. Create new Flash file. Click File > New...
Screenshot

c. Select Flash Document in a new window
Screenshot

d. With the "Rectangle Tool" draw a simple shape

e. Click with a left mouse button on the shape to select it then click the right mouse button to open a menu. Select "Convert to Symbol" option
Screenshot

f. Convert it to Movie Clip and name it "button"
Screenshot
Double click the "button" movie to enter it. Convert first layer to button. (see "Creating basic buttons in Flash MX 2004"). Rename first layer "Layer 1" to "Menu" and create 2 keyframes of that layer.

Screenshot

g. Add another blank layer and call it "rollout". Create 2 blank keyframes in that layer. Important Note! The layer called "rollout" MUST be under the "menu" layer!
Screenshot

h. Select the second frame of the "menu" layer and draw a couple of other rectangle buttons using different colors. Set "Hit" area to the button size and "Over" frame so that on rollover buttons changed color.
Screenshot

i. Select the second frame of the "rollout" layer and draw the rectangle shape. Note the shape must be bigger then anything drawn in the second frame of "menu" layer. Color of the shape does not matter.
Screenshot

j. Now convert shape from the second frame of "rollout" movie to button and then make only keyframe in the "Hit" area and delete the rest from the button. We need to get invisible button after that. The purpose of such buttons is that we can treat it as a button but it will not be visible to users.
Screenshot

k. We are done with the drawings. The only thing left is to put some ActionScript coding. Select the first frame of the "menu" movie and add the following line in "Actions Panel"
stop();
Screenshot

l. Select a button from the first frame of the "menu" movie and write this code:
on (rollOver) {
    gotoAndStop(2);
}
Screenshot

m. m. Select an invisible button from the second frame of “rollout” layer and add ActionScript code:
on (rollOver) {
    gotoAndStop(1);
}
Screenshot
Now the dropdown menu is ready to use. Press "Ctrl+Enter" and enjoy the dropdown menu you just created.

Click here to download source fla file.

About the Author: Oleg Lazarenko
Production manager of
Metamorphosis Website Design Studio -
Custom design, Website Templates,
Web design Articles and Tutorials.

You may reprint this tutorial for free as long as the content, About the Author sections and all links remain unchanged.

» Level Basic

Added: 2004-11-26
Rating: 6.08 Votes: 53
(10 being the highest)
» Author

About the Author: Oleg Lazarenko
Production manager of
Metamorphosis Website Design Studio -
Custom design, Website Templates,
Web design Articles and Tutorials.

» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.