Flash CS3 Pull-Down Menu

STEP 1.

We are only going to build ONE Pull-down menu item in this exercise.
Decide the Name of the section, and the 3 names of the subsections that correspond to that section-menu.
Convert each one of them to a functioning BUTTON.

STEP 2.

Select all the buttons and press F8 or Find MODIFY >CONVERT TO SYMBOL.
Make a Movie clip symbol, with the name of your section, press OK.STEP 3.

Once you are INSIDE the Movie clip divide the buttons, each one in their own layer:
The section name in the lower layer,
Each one of the subsection buttons, with the layer named as themselves.
Make a layer for Actions.

Move the 3 subsection keyframes to frame 5 (we don't want to see them at the very beginning)

STEP 4.

Add frames, at least to frame 15.
Actions layer: Make a Stop() action in frame 1.
Make a frame label called "Roll" on the frame where all the subsections are set to begin.


STEP 5.

As you can imagine, on rollOver of the section button, the play-head is going to come to the Frame-label Roll,

and we are going to see the 3 items appearing on screen. Later on we will make a mask for this, but right now you need to set up the animation of those submenu items, tweening from a place ON TOP of the section name, to their final placement under the section name. See the animated gif for this step:

STEP 6.

You need to insert a Stop() action at the end of your rollOver animation (Actions layer)
You need to attach the action to the section button, so when the user rolls over the section name the animation bringing the subsection menus occurs. See the action syntax below.

TEST 1

Each one of the elements is a button with rollover color, when you rollover "portfolio" the animation triggers.
The action still doesn't work really smoothly, but the action is in place.

STEP 7. - Drawing the Area

There is still a very important part of the functionality of the pull down menu that is still not in place: As you saw in the test, every time that I rollOver on the menu the animation begins again, but when I get away of the movie I am not coming back to the first position (frame 1: only section name). When I have several pull down item in place, I NEED my menu to "unroll" (to disappear) when I roll on another item.

I am going to create a button, that takes us OUT of the sub menu content if we try to move the cursor towards another menu item. For that I need to know WHERE the other sub menus are going to be placed, and in this case the other menu-items will be placed inline horizontally with portfolio.

Describing the area of this button is really a test&fix process, I am drawing it this way:
Area on both sides of the button, descending area towards the content with a bell-shape (you want to be able to move your cursor towards the content without getting out of the section, but count with indecisive users, shifting to another section halfway down the Stage)

STEP 8. - Converting to a Button

Select the area and make it a button called transparent button or similar.
It should be in it's own layer (to be able to hide it when we work on the Movie clip).

STEP 9. - Make it a Transparent Button

Delete the shape from the Up State and go directly to make a keyframe in the Hit-area.
(this is how you make a transparent button)

REMEMBER NOT TO SUPPER-IMPOSE HIT AREAS (see how we are avoiding the section's hit area)

STEP 10. - Program the Button

Add an Action to our new button. When the user rolls over the defined area (towards another section)
the movie should come back to frame1 and leave the Stage clear, so another Pull down menu displays its content.

TEST 2

Check the Menu section and try to use the Navigation in different ways (slowly, quick, abruptly) to see if the functionality responds. You might have to modify hit areas a couple of times.

STEP 11.

We define a mask with the area where the animation is taking place. You don't want to see subsection names "flying" in front of your section name.
If your subsection buttons are defined with colorful boxes this step becomes a must.
We have already learned to set masks in Flash, but you can see an animation for this specific case:



TEST

Now the art, animation and interactive buttons are under a mask and don't show up behind or in-between the letters in "portfolio".

STEP 12.

Add frames to the Section's timeline and add keyframes and Frame-labels for each one of the subsections
(in this case, frame labels "art", "animation" and "interactive").

STEP 13.

Once Add an action to each button so they go to their Frame label when pressed. Notice that we add the action underneath the stop, when the animation is finished.

STEP 14.

Add Now we are going to set keyframes in each one of the subsection layers.
Set a keyframe in the Art layer right underneath the "art" label(we want the word art on Stage to become white when we are in the art subsection, so we make a keyframe to modify the button)

Set a keyframe in the Art layer underneath the next subsection (When we are in the animation subsection, we want the art button to be active).

WARNING: If you don't follow the instructions in this part, you will end with buttons that don't work under certain subsections. This is a crucial step.



STEP 15.

Set a keyframe in the Animation layer (for the animation button) right underneath the "animation" label (we are going to change the color of the subsection that you are IN as a Navigation-help hint for the user)

Set a keyframe in the Animation layer underneath the next subsection (When we are in the "interactive subsection" we want the animation button to be active-with its action attached to it).

Finally set a keyframe in the Interactive layer, right underneath the "interactive" label.

STEP 16.

You here you can see an example of how to make an instance of a Button to behave as a Graphic symbol (you loose the script attached to it, since graphics don't contain Action Scripting).

After that you see how to set the graphic as a single frame (theoretically the button has a Timeline, so the graphic will loop between the Up, Over,Down and Hit keyframes).

Finally how to tint the name of the subsection for Navigation purposes.


STEP 17.

Follow the same process with the instance of "Animation". MAKE SURE THAT YOU ARE CHANGING THE ANIMATION BUTTON underneath the "animation Frame-label".


STEP 18.

Follow the same process with the right instance of "Art". MAKE SURE THAT YOU ARE CHANGING THE ART BUTTON underneath the "art Frame-label".


STEP 19. Add a new fresh layer for the Subsection's CONTENT.

STEP 20.

Make keyframes underneath the 3 subsection Frame-labels. Make also an extra keyframe right after, so the content for each subsection lives only in it's own specific frame (the buttons are programmed to gotoAndStop to each one of the Frame-labels). If the subsection content includes animation, you will have to place a Movie-clip in the subsection-only keyframe.

STEP 21. - FINAL

Add some content in each of the subsection's frame ( I am including an initial on each frame so we can TEST the Navigation at work)