Adobe Photoshop Tutorials | Flash Tutorials | 3D Studio Max Tutorials
 
Home Photoshop | Flash | 3D | Tools | Articles | Directory | Links Link to Us | Contact Us
 
- Flash Tutorials - Drop Down Menu Tutorial - By: Chad Freiling
Page 2
So we need to Edit the inside of our Menu MC. To do this select the MC then right click and select 'Edit in Place'. By selecting Edit in place we can see the actual stage that our viewers will see. This way we do not make the Menu open up to big so it goes off stage.
Edit
Edit in Place
Now, We're going to create 5 new layers. Create them and Name them as follows:

Actions and Labels (Top Layer): Actions will be placed on this Layer, Along with Labels for frames.
Text (2nd layer): Text is place here for the Menu title and menu items.
Outlines (3rd Layer): Outlines of the boxes for the Titles of the Items.
Menu action rect (4th Layer): We set a roll over button here and place actions on the button.
Item action rects (5th Layer): Item buttons are placed here along with the item buttons' script.
Rolloff action rect (Bottom Layer): This is a button that has the actionscript for Rolloff and goto.

*All the Layers and their definitions will be explained more as we go on through this tutorial.

There is a layer that already has something in it. This layer needs to be named 'Menu action rect'. This layer holds our base color and outline of our button. Below is what the Layers should look like so far.

Again, Go ahead and Save. Remeber to Save often!

Next step is to start adding actions, labels, text and outlines. We'll start out at the Top layer. First Select the 'Actions and Labels' layer and place a Stop action in frame 1. Then select Frame 6 and insert a Key Frame. To do this right click on Frame 6 and choose: Insert > KeyFrame. And then select frame 10 and insert a frame on 10. After you finish this layer Lock it, this way you won't add anything to this layer on accident.

Select Frame 6 (of Actions and Labels layer) and give it a label name of: up
Set <Frame Label> to up
Second Step is to set up the Text layer. Here we'll give a Label to the Menu Button. We'll need to add text. Using the text tool. Create a 'Static Text' field. and type in 'Menu'. set the Font to Arial, and size 28. And Place the text field you just created over the blue box. After your finished placing the text field, right click on 'Frame 5' and 'Insert > KeyFrame'. Now, Lock this layer then go to the 'Outline' layer.
Text properties
On the 'Outline' layer, Lets create an arrow next to the text 'Menu'. To do this will use the Line tool. Create three lines that form a pyramid and fill it in with a black color. Select the arrow (pyramid) and Group it. To do this go to: 'Modify > Group'. Now, if it is not pointing downward rotate it so it is. If you need to Size it down or up so that it fits in next to the text 'Menu'.

And you will need to Create a Outline the size of the blue box. And you will also need to select Frame 5 and 'Insert a frame'.

- Advertisement
So, on to creating our first button for the Menu. Here we'll select the 'Menu action rect' layer. We're gonna make the Blue box we made earlier in the tutorial into a Button,

Now, select 'Menu action rect' layer and right click on the blue box and Convert it to a button, name it: 'Popup Menu 2'.

Now we can add our first part of some actionscript. Select The Menu button. And add the Following script:

on (rollOver) {
gotoAndStop("up");
}

This makes it so when you Roll the mouse over it goes to the label up. and acts like the menu has opened.

Lock this layer. Select both 'Item action rects' layer & Rolloff action rect layers and Insert a Frame on Frame 5.

Save.

So far so Good? Yes or No. Just to let you know from here on it may get a little harder. I am going to stop showing you on how to create certain things. I am asuming you are aware on how to do them. It is going to start geting more tedious (drawn out) so, I am leaving these parts out. I will still explain how to do them but not as much as I have in these first two pages.

 
Continue on the to the next page...
Pages: 01 | 02 | 03
Advertisement
 
Home Copyright © 2003 - 2005, Tutorials Network. All Rights Reserved. | Advertise | Privacy Policy