Home / Tutorials / Flash / How to make Navigation Bar in Flash having Mouse Over Behavior

How to make Navigation Bar in Flash having Mouse Over Behavior

In this Flash Tutorial we are going to make a Navigation Bar which will be having Mouse Over behavior. When mouse will come over any item or link then some animation will run. This is very useful and important technique, by using this technique you can make animation of your own desire. So you may have better idea How to make Animated Navigation bar in Flash using Mouse Over behavior. So lets start.

1. First of all take a new file in Flash having the following size and Frame Rate etc.

2. Pick Rectangle Tool and draw a rectangle having size 140px width and 200px height, place it on the left side of the stage, no matter what color it has:

3. Run the command Window >> Color or simply press Shift+F9 key to open color palette and make the following gradient and apply it on black strip from bottom to top:

You may get this:

4. Select the red button and press F8 key to convert it into Symbol, write its name “home-button-bg” and select Movie Clip from Type list box and hit ok, now double click on it to go inside it and write the text “Home” on new layer as shown below:

5. Select the gradient layer, click on Frame 10 and hit F5 key to make frames, then right click over it and select Create Classic Tween and then hit F6 key, then select Frame 20 and hit F6 key. You will get Gradient Layer in Timeline as:

6. Click on Frame 1 of Gradient Layer, goto Property Panel and write -100 in Ease box, then hit Frame 10 and goto Property Panel and write 100 in Ease box. Now hit Frame 10 and click on Red Gradient rectangle, goto Property Panel and under Color Effect select Brightness from Style list and write -40%. So that gradient would become darker in Frame 10.

7. Now do the same with Text Layer, but in Frame 10 of Text Layer, move the text a little bit down and give Tint with Yellow color to text. Here I’m going to write again in detail what kind of commands I’ve applied on Text and Red Gradient BG layers:

8. Here is the detail of Red Gradient BG and Text in Frame 1, 10 and 20 so you will get better idea what kind of result these two objects will have:

9. Now take new layer in between these two layers, make a rectangle of size 140px x 50 px. Fill it with Strong red color. Select its Frame 10, hit F5 key and right click over it and select Create Classic Tween, hit F6 key. Now select its Frame 1, give it Ease as -100, hit Rectangle and give Alpha as -25 from Property Panel. Now hit Frame 10 and click on Rectangle, then change the height of the rectangle to 75px and give Alpha as 0%. So you will have small animation from Frame 1 to Frame 10, the size and Alpha of the newly rectangle will come from 25% to 0%, so on mouse over it will vanish.

10. Select Frame 1 of any layer, hit F9 key to open ActionScript Panel and write the following ActionScript in it:

stop();

11. Now select Frame 10 of any layer, hit F9 key to open ActionScript Panel and write the following Action Script in it:

stop();

12. By using same commands and techniques, I’ve made other three buttons as:

13. Now select each Movie Clip (Home, Services, About us, Contact) one by one and goto Property Panel and write name “homeButton” (without quote) for Home, “servicesButton” for Services, “aboutusButton” for About Us and “contactButton” for Contact in Instance Name box.

14. Create new Layer and press Ctrl+F8 key to insert New Symbol. Write “mouse-behvior-button” in Name box, select Button from Type list box. It will give you a Symbol Button and will take you inside it. Select frame under Hit and press F6 key. Now draw a rectangle of size 140px x 50px and place it in middle of the stage. No worries about what color it has, because it will not show you any color and it will be invisible. We will be using it only for ActionScript. Come back to Scene and take new layer and place this button just over the Home movie clip from Layer Panel. Select this invisible button and goto ActionScript panel by pressing F9 Key and write the following code:

on (rollOver){
    tellTarget(“homeButton”){
        gotoAndPlay(2);
    }
}
on (rollOut){
    tellTarget(“homeButton”){
        gotoAndPlay(26);
    }
}
on (release){
    getURL(“http://www.stunningmesh.com”);
}

15. Paste Invisible Button once again on Scene and place it over Services Movie clip and write the following code in ActionScript Panel:

on (rollOver){
    tellTarget(“servicesButton”){
        gotoAndPlay(2);
    }
}
on (rollOut){
    tellTarget(“servicesButton”){
        gotoAndPlay(26);
    }
}
on (release){
    getURL(“http://www.stunningmesh.com/category/tutorials/”);
}

16. Again Paste Invisible Button from Layer Panel to Scene and place it just over the About Us movie clip and write the following Code in ActionScript Panel:

on (rollOver){
    tellTarget(“aboutusButton”){
        gotoAndPlay(2);
    }
}
on (rollOut){
    tellTarget(“aboutusButton”){
        gotoAndPlay(26);
    }
}
on (release){
    getURL(“http://www.stunningmesh.com/category/articles/”);
}

17. For one more last time, paste the Invisible Button from Layer Panel to Scene and place it just over the Contact movie clip and write the following code in ActionScript Panel:

on (rollOver){
    tellTarget(“contactButton”){
        gotoAndPlay(2);
    }
}
on (rollOut){
    tellTarget(“contactButton”){
        gotoAndPlay(26);
    }
}
on (release){
    getURL(“http://www.stunningmesh.com/contact/”);
}

18. I’ve given some Drop Shadow to each Movie Clips to separate these from each other. Now press Ctrl+Enter to run it in Flash Player and see this final result. Simply move your mouse pointer over any Button so you will see the animation. I’ve pasted a nice background to make it attractive:

About Wijdan Rohail

A professional Web/Graphic Designer, working as Freelancer since 2000. Designing is my passion, blogging is my hobby.

Check Also

Cold Blooded Text Effect in Photoshop - Thumbnail

Cold Blooded Text Effect in Photoshop

A Bit Scary, today we are going to work on Photoshop Tutorial about Text Effect. …

10 comments

  1. Hi,
    I am new in flash, i couldn,t understand the 14th point. i don’t know where to paste the actionscript. help me.

  2. Since the admin of this website is working, no uncertainty
    very rapidly it will be renowned, due to
    its quality contents.

  3. Hi! Thanks for this tutorial. Very nice and helpful! But I just want to ask, how do I make the content of the page show up when I click the navigation? Can you help me? 🙁

  4. Thank you for your example. I have a question. I am looking for how people do main menu with a Flash and I am curious little-bit why it is most of the time so complicated when frame by frame; cs5 button and code snippets is enough to do primitive in construction but really looking not so primitive by normal view. At example you used easing. Do you think complication worth of the external effect?
    Thanks in advance for your opinion.

  5. i’ve been trying to respond to your email several times,it seems did not go thru. anyway, i want to thank you for your time, i will try to figure out myself. thanks again.

  6. thank you so much for your help, it helped and now i’m stuck with the code. i copied your code and paste it in Action Panel it gave me an error, saying that there is an extra character in line 1. sorry for bothering you again if you don’t mind can you plse help me to solve this problem. thanks a lot.

  7. thank you so much for the tutorial. very beatiful buttons, really stunning. this is what i was looking for, but i can’t get it done to the end cuz i don’t understand from section #14 where is says “Come back to Scene and take new layer and place this button just over the Home movie clip from Layer Panel. Select this invisible button and goto ActionScript panel by pressing F9 Key and write the following code:”
    plse if it not difficult for you to explain it, it is killing me, i want to complete these buttons, because i really need for the web site that i’m working right now and fell in love with these buttons. plse help.

    • When you are creating Buttons, you will be watching four Mouse Behaviors in Time line of Button, i.e. UP, OVER, DOWN, HIT. When you made any object in HIT behavior so it will not be visible. So as we have made an invisible button and it is in Library, so we have to paste it on the stage, just over the HOME, SERVICE, ABOUT US, CONTACT links, so in Step 14 it is saying that you have to paste this Button from Library to Stage and then after selecting the button, press F9 to open Action Panel and write the code inside it. Hopefully you got it now, if not then you can ask me again.

  8. Thanks for the tutorial. It’s very helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *