In this tutorial, we're going to create a menu with a bar underneath it that moves left and right based on which button the user is hovering over. This tutorial is created with Flash CS3 and ActionScript 3. Here's what it will look like when you're done:
Notice that as you hover over each button, the red bar under the menu moves to the button your mouse cursor is hovering over. Let's get started:
1. Create your graphics. For the background of the menu, I simply created a rectangle that was the same width as the stage and gave it a black-to-dark-gray gradient fill. Leave this on a layer by itself.
Create a new layer and type in the text for all your buttons in separate static text fields. Name this layer Buttons. Select each of your text fields and hit F8 to convert them to symbols. Choose Movie Clip and set the registration point of each of these movie clips to the center, as shown below:
The registration must be set to the center, otherwise this effect won't work. When we move the red bar around with ActionScript, we want it to end up centered underneath the appropriate button. This will work best if we set all of our buttons' registration points to center, as well as the registration point of the red bar.
Give each of your movie clip buttons an instance name. The instance names I used are home_mc, about_mc, products_mc, and contact_mc. We will point to our movie clip buttons in our ActionScript using these instance names.
Create a new layer above the Buttons layer and call it Reflection. In this layer, I drew another rectangle that covered up the top half of the background rectangle. For this new rectangle, I used a linear gradient that faded from white at 70% opacity to white at 0% opacity (check the source file for details).
Create another layer that contains a small, red rectangle. The one I created was 80 pixels wide and 3 pixels tall. Place this rectangle directly under the menu. Then select it, hit F8 to convert it to a symbol, and (as mentioned before) set its registration point to the center. Give this rectangle an instance name of bar_mc. Place this bar under the home button by default.
2. Create your ActionScript layer. Create a new layer on your timeline, lock it, and name it Actions. We will attach all ActionScript to this layer.
3. Enter your code. Click on frame 1 of the Actions layer, hit Opt+F9 (or just F9 on PC) to open up your Actions Panel, and enter the following code:
import fl.transitions.Tween; import fl.transitions.easing.*; home_mc.buttonMode = true; about_mc.buttonMode = true; products_mc.buttonMode = true; contact_mc.buttonMode = true; home_mc.addEventListener(MouseEvent.ROLL_OVER, hover); about_mc.addEventListener(MouseEvent.ROLL_OVER, hover); products_mc.addEventListener(MouseEvent.ROLL_OVER, hover); contact_mc.addEventListener(MouseEvent.ROLL_OVER, hover); function hover(e:MouseEvent):void { new Tween(bar_mc,"x",Strong.easeOut,bar_mc.x,e.currentTarget.x,1,true); }
In lines 1 and 2, we're importing the classes we need in order to use the Tween class. The Tween class and the associated easing classes will allow us to animate our sliding bar.
Lines 4-7 are simply turning on buttonMode for all of our movie clip buttons. Since our buttons are actually movie clips, we need this code in order to make sure that the mouse cursor turns into a hand cursor when hovering over the buttons.
In lines 9-12, we're adding the usual ROLL_OVER event listeners to each of our buttons. When we hover over our buttons, we're going to call on the hover function, which we created in lines 14-17. On line 16, we're creating a Tween that causes the bar_mc movie clip to animate from its current position (wherever it may be at the time) to the same x coordinate as the movie clip that triggered the hover function (indicated by e.currentTarget).
Hope this made sense! ENJOY!
Source file: menubar.zip
Angel Romero
Nice! Hey Craig, are you in favor of the tween within Flash CS3? If not, which 3rd party tween do you see the most potential in? Thanks?
David Stewart
Does this works in AS 2.0 and in Flash 8?
Dave
that was an excellent tutorial, now how can i add links to these buttons? thanks for your help
siri
ya its nice .can we place the red box on the top not at bottom
Dave
yes you can do it, the place of the red bar does not affect the script, i did it and it worked, you can work not only with a thin red bar but with different shapes,hope that helps
Dave
PS. i only know animation in flash im not a web designer but i know a little bit of action script thats why im asking about the links
Dave
anybody can help me with my question? i really need to lnow how to add links to these buttons , thanks
Steve
I’m new to Flash CS3 and I’m not to sure on how to add the links to the addEventListener/function of this menu bar. I use frame labels for the different pages of the site I’m working on page1, page2, page3, page4, page5 Can you help ?
Steve
I got it
just addEventListener.CLICK, xxx
Dave
like this?
doc1_mc.addEventListener(click.newpage.html)
Dave
i finally did it!!! and by myself , it cost me hours without sleep and a lot of coffee
but i did it, if anybody needs to know how to add links just let me know, aah now i feel relaxed 
Juan
hey dave, I am so glad you figured out the most difficult part –adding links that actually work! I am in the same boat you were, having a nice animation with a bunch of buttons in AS3.0 and not having a clue on how to link them to my website pages. Help please! –Juan
Max
Hey,
all power to you. I tried not to sleep and a lots of coffee, and yet no result.
any advice?
Thanks
Max
tob
me too. the buttons looks wonderful – but i cant get the link to work. please post the solution…;)
Dave
sure , but both of you guys give me your email addresses and ill send you a small tutorial of how to add links to this buttons my email darkstarxsi@aim.com
Dave
well since i been very busy lately ill post the help here, first of all you guys have to create an extra layer for your buttons and call it for example “mybutton_action”, good now let’s add the script to that new layer created. press F9 to bring the action panel.
mybutton_mc.addEventListener(MouseEvent.CLICK,onMouseClick);
function onMouseClick(e:MouseEvent):void
{
var request:URLRequest=new URLRequest(“http://www.website.com/section”);
navigateToURL(request,”_blank”);
}
**where mybutton_mc is the instance name of the button
**onMouseClick is the action, you click in the button and automatically you go to the other section or website, since flash is going to give you a problem every time your going to add link to a button in this way simply add a number to the action for example if you have onMouseEvent in your first button, the way you should describe the event for the next button is onMouseEvent2 and so on, you have to do it this way because flash does not allow repeated actions
**var request:URLRequest=new tells the script that is requesting for a new website(at least thats my understanding)
**URLRequest(“http://www.website.com/section”); the website or part of the website you want to go
**navigateToURL(request,”_blank”); if you want to open the page in a new window(_blank) or in the same page (_self)
hope this helps as i said before im not a flash guru so if you guys have problems with this please let me know
Dave
sorry in my previous comment i said about adding the number to the event well i write wrong is in the onMOuseClick that you have to add the number because this is the action no the onMouseEvent sorry guys
Dave
now there is another way to create links and is this one
import flash.net.navigateToURL;
import flash.net.URLRequest;
navigateToURL(new URLRequest(“http://www.example.com”),”_blank”);
i bought a book describing this code but so far i haven’t tried it ,im sticking with the one i posted because is more easy and i already saved it on my brain
, AS3 sure looks different now but i thinks is for good , you can do more stuff than with AS2, i been learning AS3 for two months an so far i have good results and i can even build nice websites
Sylvain
Hi everybody,
thanks for this tutorial, but i have some problems.
I’ll try to explains you my problems. Well, i did all like explain here, but when i test it, only 3 of my 8 buton work.
They don’t seems to be consider like button or somethings else.
Have anyone any idea.
great thanks.
PS: Excuse me for my english, but i’m form Belgium.
Dave
Hi Sylvian
First you buttons have to be movie clips, second always
assing a blank layer for the actions of your buttons
and finally can you please post what code are you using? so
i can help you in a better way something i did not understand
was if every time you test the movie your buttons dont work?
or does flash throw you a error message saying there cant be
repeated actions?
Rosa
I’m super new to flash. I followed Vinyard tutorial on how to build a simple website and when I play it.. it just flashes all the pages quickly one at a time. Anyone know what I am doing wrong?
rie
I made a flyout menu from the learnflash toturial, , and I have an Image (a movieclip on the stag. And on rollover a submenu appears with other moviclip with links. It works fine… BUT, I can´t unterstand wath he says about (he don´t show it only tell´s), how I get some were with the bnt. (sorry but I am dänish);-) that the action in he´s video.
import mx.transitions.Tween;
import mx.transitions.easing.*;
var startY:Number = productsSub_mc._y;
var myTween:Tween;
var myTween2:Tween;
productsSub_mc.videos_btn.enabled = false;
products_btn.onRollOver = function (){
if(productsSub_mc._alpha == 0){
productsSub_mc.videos_btn.enabled = true;
myTween =new Tween (productsSub_mc,”alpha”,Regular.easeOut,0,100,12,false);
myTween2 =new Tween (productsSub2_mc,”y”,Regular.easeOut,startY,startY-10,12,false);
}
}
services_btn.onRollOver = function(){// I have total ( 7btn)
if(productsSub_mc._alpha > 0){
myTween.stop();
myTween2.stop();
productsSub_mc.services_btn.enabled = false;
productsSub_mc._alpha = 0;
productsSub_mc._y = startY;
}
}
———-
// I hear this, but it don’t work?,
productsSub_mc.video_btn.
on(release){
gotoAndStop(“videos”, 1); // a new Szene with that name
}
Is someone here abel to help, with the actions, how it has to beJ, and were I have to place it?
can you help with my Flyout Menu (Craig Campbell), I can´t hear
how I get some were with the bnt. (sorry I am dänish);-) pleas writh the actions, how it have to beJ
rie
I have found out an It works fine now
Dave
Rosa, check you Action Script Code, if you need help please contact me at darkstarxsi@aim.com
Megha
Hi, the script is awesome.
My problem is I added 4 more buttons and made a total of 8 buttons but when I publish I get an error. My script is:
import fl.transitions.Tween;
import fl.transitions.easing.*;
home_mc.buttonMode = true;
about_mc.buttonMode = true;
products_mc.buttonMode = true;
contact_mc.buttonMode = true;
plan_mc.buttonMode = true;
hotel_mc.buttonMode = true;
gallery_mc.buttonMode = true;
contactus_mc.buttonMode = true;
home_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
about_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
products_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
contact_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
plan_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
hotel_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
gallery_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
contactus_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
function hover(e:MouseEvent):void
{
new Tween(bar_mc,”x”,Strong.easeOut,bar_mc.x,e.currentTarget.x,1,true);
}
Tudi
Hey megha, what error do you get? We can’t figure out the problem without knowing what the problem is
Did you instantiate the names of the new buttons with hotel_mc, gallery_mc, etc? Do you have duplicate instances of the same name? (for example having gallery_mc on 2 or more movieclips).
Cameron
Does anybody know if this can be done in Actionscript 2?
chris
How could you get this to work with a onrelease of the button instead or for both.
Danielle
Hello all,
For those looking to add URL navigation check out this link. I’ve looked almost every where and this page really helped. It explains the changes between AS2 and AS3. Its in proper easy to read English…
http://schoolofflash.com/2008/04/actionscript-3-tutorial-what-happened-to-geturl/
Ammie
does anyone know how to load external SWFs using this menu? it’s easy enough to do a URL link but if i wanted to load/unload external SWFs on click, i’m not sure how to do it in AS3.
AS2 is no problem, however, once you convert the AS3 file to AS3 we not surprisingly lose functionality of the ‘red slider’.
Nirv
Hello Dave,
The tutorial is awesome and you did a great job explaining it. Thank you very much.
The tutorial in the first section worked, but since I am totally new at Flash with Action Scripting, I don’t get how to give the buttons their links. I did as it was described by you in the second section, but it just does not work. I created 4 buttons like you did, only named: “More Info”, “Inquire”, “Send To Friend” & “Replay”.
Now, to make the buttons link, I need to make the “More Info” button go to a website. The “Inquire” & “Send To Friend” I need it to link and open up a email box. For “Replay” I need it to replay the movie that I placed in the flash file. How do I do all of that separately as the code you gave in the latter part of the for linking “mybutton_mc” does not do this for my buttons. Do I have to create another button over the existing buttons? I am not clear on this at all. Is there a step by step way for you to show it to me. I will be happy to email my files over to you if you let me know what your email address is. Please help me. Sorry for sounding stupid. I am a beginner.
Thanks a lot
Mike
I’ve made the menu and it all works great, but when I try to add the exported swf to another .fla project the slider doesn’t work – should I be doing something else to get it working or should it work by simply importing to the stage?
Thanks in advance
a
thanks for the source code, really saves a lot of time
Daniel
Hi,
Just went through the tutorial but i’m having a problem with the code. I’m using Flash CS5 with AS 3.0 and I recieve the following compiler errors:
The class or interface ‘MouseEvent’ could not be loaded.
The class or interface ‘fl.transitions.Tween’ could not be loaded.
Any ideas?
Daniel
I have managed to solve the errors, however nothing is working. No scroll, no button effect…
I have four instances of text converted to movie clips.
and a scroll bar underneath converted to a movie clip.
all symbols have the correct regisration.
all in the correct layers. with a blank layer called actions i have pasted your code and corrected the errors. Nothing’s working?
any ideas?
cheers