Page 1

Creating Animated Rollover Buttons 漏 2011mkelly/robert morris university this tutorial is adapted from a tutorial at: http://www.cartoonsmart.com we'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

select

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

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 buttons backing.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 once var 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 them menu1.buttonMode = true; menu2.buttonMode = true; menu3.buttonMode = true; //the main menu items also use the gotoOver and gotoOut functions menu1.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 buttons backing2.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 submenu backing2.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; } }

Drop down menus and Rollovers in Flash  

learn to create fancy drop down menus with sound effects, animated buttons, and links to various sections of your portfolio. combine this wi...

Read more
Read more
Similar to
Popular now
Just for you