Creating Animated Rollover Buttons © 2011mkelly/robert morris university

this tutorial is adapted from a tutorial at: http://www.cartoonsmart.comwe're going to create animated buttons that function inside of drop down menus and will look like this when weʼre done:

student example:

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 below. 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 Classic, Static text and not selectable: .

F6 a new keyframe in frame 2. and in frame 3.

in frame 2, with the text box selected...

change the color to black in the Property Panel:

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

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 with 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 or type in 115 for width in the Properties Panel.

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

right/control click inside the frame and choose 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...

we'll need to reveal the menu item again after we roll out with the mouse so we need a Bizarro World (opposite) animation...

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...

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 new instance so that we can change it to a Resume button. we have to Duplicate it so that we can change the text. otherwise, Portfolio also becomes Resume.

name it.

double-click it to enter its timeline.

grab on the Text layer and type in .

option drag frame 1 over frame 2. change the text color to black. option drag frame 1 over frame 3.

back in Scene 1, 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 , on the same layer, 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 Portfolio as a base for our upcoming first drop down menu button, Photography.

select and:

/ .

with it still selected, .

name it. you can use double underscores this time: __. or you could name it SubMenu_1 just as easily.

give it an instance name:

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

change its text to:

change the color of the BG layer to:

to get:

you'll need to duplicate both of the highlight animations so you can change their fill colors to:

add the other buttons by Duplicating Photography until you get:

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

draw a rectangle that covers the area above. it will be used to tell the mouse when it has rolled off of the submenu buttons so they will go away...

F8 it: and then double-click on it to get inside its timeline:

lower its alpha to 50% so you can see the submenu button area:

draw a selection that's just outside the button like above.

delete.

back in Scene 1, with backing2 selected, choose Alpha and:

the script on following pages goes into frame 1 in a new actions layer you should create like below:

you can copy and paste it from here if you're working from the .rtfd version (TextEdit) but not from the pdf due to paragraph formatting errors that occur when this is saved as a PDF.

stop();

//black background behind the individual buttonsbacking.visible = false;

//larger background movieclip for rollover detection to hide the submenu buttons when you roll the mouse of of its boundaries...backing2.visible = false;

//create a variable (info container) so we can talk to (in this case) seven buttons at oncevar i:Number;

//create a variable (info container) to hold the name of the movieclip we're rolling over...var t:String;

//"for" loops determine conditions for a pre-determined number of objects, in this case, 7 buttons with the name "submenu" that you can see onstage under the main Portfolio menu item. the ++ means it continuously adds another 1 to the value of i starting with the initial i value of 1 until it gets to 7 and then starts over at 1)

// if you have 6 buttons in your submenu, change the 7 to 6, 5? 7 to 5, etc.,

for (i = 1; i <= 7; i++){

//getChildByName looks for movieclips with specific instance names. once it gets there it adds the listeners and proerties below:

MovieClip(getChildByName("submenu" + i)).addEventListener(MouseEvent.ROLL_OVER,gotoOver);

MovieClip(getChildByName("submenu" + i)).addEventListener(MouseEvent.ROLL_OUT,gotoOut);

MovieClip(getChildByName("submenu" + i)).addEventListener(MouseEvent.CLICK,gotoSection);

MovieClip(getChildByName("submenu" + i)).buttonMode = true;MovieClip(getChildByName("submenu" + i)).visible = false;

}

//these are the three top menu items; they now give us the finger when we roll over themmenu1.buttonMode = true;menu2.buttonMode = true;menu3.buttonMode = true;

//the main menu items also use the gotoOver and gotoOut functionsmenu1.addEventListener(MouseEvent.ROLL_OVER,gotoOver);

menu2.addEventListener(MouseEvent.ROLL_OVER,gotoOver);menu3.addEventListener(MouseEvent.ROLL_OVER,gotoOver);

menu1.addEventListener(MouseEvent.ROLL_OUT,gotoOut);menu2.addEventListener(MouseEvent.ROLL_OUT,gotoOut);menu3.addEventListener(MouseEvent.ROLL_OUT,gotoOut);

menu1.addEventListener(MouseEvent.CLICK,gotoSection);menu2.addEventListener(MouseEvent.CLICK,gotoSection);menu3.addEventListener(MouseEvent.CLICK,gotoSection);

//with the gotoOver function below, all button movieclips go to frame 2. in frame 2 there is another movie clip that's animated to expand and stop at the end of its expansion. "event.target" just means whatever button we happen to be rolling over...;function gotoOver(event:MouseEvent):void{

event.target.gotoAndStop(2);//embedding the name of the movieclip we are rolling over;t = event.target.name;//trace(t);

}

//with the gotoOut function below, all button movieclips go to frame 3 inside their timelines where there is a movieclip similar to the one in frame 2 except that it contracts. the playhead goes to the end of the button's timeline and then goes back to frame 1 where it started to return button to its original state.;function gotoOut(event:MouseEvent ):void{

event.target.gotoAndPlay(3);}

function gotoSection(event:MouseEvent ):void{

switch (t){

case "menu1" :gotoAndStop("Home");break;

case "menu2" :

gotoAndStop("Resume");break;

case "menu3" :gotoAndStop("Contact");

break;

case "submenu1" ://trace("sub");gotoAndStop("Photography");break;

case "submenu2" :gotoAndStop("GraphicDesign");break;

case "submenu3" :gotoAndStop("DigitalImaging");break;

case "submenu4" :gotoAndStop("Illustration");break;

case "submenu5" :gotoAndStop("Animation");break;

case "submenu6" :gotoAndStop("FineArt");break;//if you have 6 buttons, kill this one:

case "submenu7" :gotoAndStop("Video");break;

}}

// makes the submenu visible;menu1.addEventListener(MouseEvent.MOUSE_OVER,revealSubMenu);

function revealSubMenu(event:MouseEvent):void{

backing.visible = true;//now that backing2 is visible Flash detects its presence so it can be used for

hideSubMenu when your mouse enters it outside of the area of the submenu buttonsbacking2.visible = true;//another "for" loop to make all of the submenu buttons visible// if you have 6 buttons in your submenu, change the 7 to 6, 5? 7 to 5, etc.,

for (i = 1; i <= 7; i++){

MovieClip(getChildByName("submenu" + i)).visible = true;}

}

// hides the submenubacking2.addEventListener(MouseEvent.MOUSE_OVER,hideSubMenu);

function hideSubMenu(event:MouseEvent):void{

backing.visible = false;backing2.visible = false;//another "for" loop to make all of the submenu buttons invisible when your mouse

enters it outside of the submenu button area// if you have 6 buttons in your submenu, change the 7 to 6, 5? 7 to 5, etc., for (i = 1; i <= 7; i++){

MovieClip(getChildByName("submenu" + i)).visible = false;}

}