Creating Animated Rollover Buttons 04.11.2011

we're going to create animated buttons that function inside of dropdown menus and will look like this when weʼre done:

did you notice how the buttons unfold in sequence when you roll over them quickly?

when weʼre done, you should be able to adapt and apply the process to make your own unique animated rollover buttons.

create a new document with the above parameters.

to begin the button:

name it:

our Library now has the new movieclip and a preloaded sound.

create five layers inside the new movieclip named like those above. BG = background:

select frame 1 of Actions:

we don't want our button highlighting continuously so...

select frame 1 of BG and draw a black rectangle on the stage.

the rectangleʼs exact Properties:

add the sound to a blank keyframe in frame 2:

the sound should have these Properties:

select frame 1 of the Text layer:

Type in Portfolio:

it should be static text and not selectable:

select the text box:

F8 it.

name it like above.

extend Text and all other layers to frame 14...

lock Text and BG to make it easier to select Highlight layer.

select frame 2 of the Highlight layer and insert a blank keyframe (F7).

grab the rectangle tool. choose a white fill and no stroke.

draw a little white box in the center of the black box.

F8 it.

name it.

double-click on it to enter its timeline.

select the box by clicking once.

F8 it so we can animate it.

name it.

insert a keyframe in frame 9.

expand only its width to cover the width of the black box.

select it in frame 1 and change its alpha to 11%... we can leave movieclip in the last frame alone since itʼs already 100%.

select all the frames

classic...

insert a blank keyframe in frame 9 on the Actions layer. why?

if you said weʼll need a stop action there, you are correct!

get back to Menu_1:

select frame 2 on the Highlight layer...

option drag it to frame 3 to duplicate it.

select the highlight movieclip on the stage and right click or use the menu item above to Duplicate it.

name it... or you could call it reverse_highlight.

double-click it:

select the tween.

right click and .

add a frame to the Actions layer and a blank keyframe to the tween layer so the highlight disappears completely at the end.

go back to . if Portfolio button is not there, drag it from the Library.

select and option drag it to create a new instance of it:

Duplicate the duplicate so we can change it to a Resume button..

name it.

double-click it to enter its timeline.

grab on the Text layer:

hereʼs another way to Duplicate a symbol, but first we have to Duplicate it so we can change the text; otherwise, Portfolio also becomes Resume so with the text box selected, look for Swap in the Properties Panel:

this opens:

if you click on on the left...

...this panel appears. change the name to the above.

there it is...

now we can change its text:

line ʻem up.

instance name for Portfolio:

instance name for Resume:

on your own, create a button for Contact Info...

weʼll need a black backing for our dropdown buttons.

so back in , create a black shape with this width and height:

convert it to a movieclip and give it an instance name so we can tell it to get lost later:

place it somewhere around here:

option drag a new instance of it as a base for our upcoming first drop down menu button.

select and:

/

with it still selected, .

name it. I used double underscores: __. or you could call it Submenu1.

give it an instance name:

double-click it to get to the Text layer on its timeline:

swap/duplicate Portfolio for a new symbol called submenu_text1 and change to:

change the color of the BG layer:

to get:

add the other buttons by Duplicating Photography until you get:

note that a little spacing is used to simulate borders.

make sure each is a unique instance with a unique instance name such as:

draw a rectangle in the menu layer; F8 it. call it backing.

its purpose is to give us a rollover shape that causes us the drop down menu to disappear — such as when we roll over Resume or roll outside the submenu buttons anywhere else.

weʼll create it in pretty much the same way that we created the cover for the organ movie clips in the game creation finale...

double-click on it to get here.

create a box that covers all the space above. a script will tell the submenu to disappear whenever the mouse touches this box. we'll add the same script to the resume button.submenu menu from this backing box. youʼll see what I mean in a second...

back to ...

give it an instance name so we wonʼt waste our typing when we try to talk to it...

in the Properties pane, change its Blending.

now weʼre ready to begin scripting. refer to the dropdown_finished2.fla document for coding and comments.