all groups > flash actionscript > september 2005 >
You're in the

flash actionscript

group:

Button Problems


Button Problems jackcee
9/19/2005 8:30:13 PM
flash actionscript:
I created a button and on roll over want a submenu with 3 other buttons to drop
down. I created the submenu as a movie clip and placed it on the 2nd layer of
the buttons "over" frame. The submenu does drop down when you roll over the
button but when I move the arrow to click on one of the submenue buttons, the
submenu goes away before I can click on it.
How can I keep the submenu up so that I may be able to click on it? Is it a
matter of adjusting the "hit" area?
Help would be great!!!
Thanks
Re: Button Problems Nick Barling
9/19/2005 11:50:29 PM
Hi,

There is a better way of creating a pop-up menu than using the over state of a
button to generate the sub-menu buttons. I would recommend using a little
ActionScript (nothing too scary) and an invisible set of buttons to overcome
the specific problem of the sub-menu buttons disappearing as you rollout of the
main menu button.

To start, create your .fla and build a button on the stage. You can customize
the button to change appearance or color, etc, for the on, off, states as you
wish, but don't build any other buttons on the over state, as you have done
previously.

By opening the Library (F11), you will see the button symbol once you have
created it. You can then drag an instance of that button, whenever you want to
use it, onto the stage. You can of course continue to use the instance of the
button that you have already created on the stage.

You now need to build your pop-up menu inside of a movieclip. So, ensure that
your button instance is selected and hit F8. The convert to symbol dialogue
box will appear and you can name your symbol something like "popup" and select
the movieclip symbol type. Click OK. You have now nested a movieclip inside of
a symbol and the Properties panel will show the mc icon and instance of "popup".

Double click on the movieclip symbol on the stage and you will see that you
are in the movieclip timeline as the movieclip icon and the instance name will
appear on the main timeline next to Scene 1. The Properties panel will show
the button instance that created or dragged onto the stage earlier. This is
where you will build the entire pop-up menu and sub-menu buttons.

Now give the button two states. The first state, which will be in frame 1,
will be closed and the second state, which you can put on any frame (I suggest
30) will be open. You will use ActionScript to move the playhead between
frames, so any frame can be used. I suggest 30 because you can also make your
pop-up menu generic and more flexible for the purpose of editing if you use a
label instead of referencing a frame in the ActionScript.

Now select frame 30 and add a keyframe (F6). Copy and paste as many of the
main menu buttons as you need to produce your sub-menu (you want three for this
project) and position them where you want them to pop-up. Once you have done
that rename the layer that the buttons are on as "buttons" (or as you wish) and
add another layer and name it "text". Add the text that you want for the main
menu button and sub-menu buttons on this layer. This keeps the buttons generic
if you want to use them elsewhere with different names. Remember to select
frame 1 of the text layer and name the main menu button and frame 30, where you
need to add a keyframe (F6) to name the sub-menu buttons.

You now need to add another layer to carry your ActionScript. Name the layer
"actions' or something similar. Select frame 1 of the "actions" layer and hit
F9 to open the ActionScript panel. Type stop();

The stop command prevents you movie from looping. Now create a "label" layer,
place it whereever you like; I add mine under the "actions" layer. Select frame
1 of the "label" layer and look at the Properties panel. Under the frame box
you can add a label name, Enter the name "closed". This will be used by
ActionScript to control the closed state of the menu. You will see a red flag
and the closed name in the label layer at frame 1. Do the same thing for frame
30 of the labels layer after adding a keyframe and name the label "open". You
won't see the "open" name, as frame 30 is at the end of your frame timeline.
You can add frames (F5) beyond frame 30 if you want to see the label in the
timeline.

It is best here if you lock all of the layers other than the button layer.
Once locked, select frame one with the playhead and click once on the main menu
button on the stage. Open the actions panel (F9) and add the following
ActionScript:

on(rollover) {
gotoAndStop("open");
}


This will get the manu to open on rollover and reveal the sub-menu buttons.
We now need to create an invisible button to close the pop-up menu when the
user rolls out of the menu button. Make sure that you are still in the popup
movieclip and add another layer and call it "invisible button" (or whatever you
want). Select frame 30, which is the "open" labeled frame, on the "invisible
button" layer, and add a keyframe (F6). The invisible button only needs to be
active when the sub-menu is open, so that when you roll out of the sub-menu
buttons the invisible button closes the sub-menu.

Select the rectangle tool and turn off the stroke fill. Draw a rectangle on
the stage above the main menu button and slightly wider than the width of the
button, so that the rectangle overhangs both sides of the button. Hit F8 and
call the symbol "invisible". Save it as a a button symbol by clicking OK.
Double click on the invisible button to open its timeline and drag the open
state keyframe to the hit state keyframe; this makes the button invisible. Go
back to the popup movieclip, by clicking on its icon on the timeline, and you
will see a light blue semi-transparent color to the invisible button. Click
once on the button to make sure it is selected and open the Actions panel (F9).
Add the following ActionScript :

on(rollover) {
gotoAndStop("closed");
}

Reproduce the button to cover all four sides of the menu and sub-menu butons
(Att+Shift drag). You can use the Transform panel to rotate the buttons. The
ActionScript is automatically copied to each button. It does not matter if the
buttons overlap. Test movie (Control + Enter) and the movie should work?

Note: Building in a movie clip makes the symbol instance easy to drag on to
the stage anywhere you like and it is also scalable for size, giving you lots
of flexibility.

I hope this helps.

Nick

Re: Button Problems jackcee
9/20/2005 6:15:25 PM
Nick, This is great. Thanks for your help.
AddThis Social Bookmark Button