Wednesday, December 9, 2009

Easy Flash Navigation Bar

I have seen many requesting of a tutorial of making a navigation bar with flash which in case so simple. I myself too read many posts before writing my own one. The immediate reason for this tutorial is for a request by one of my friends SO thank you Hasara. And this is my first post so please apologize me for my bad explaining if any. Feel free to contact me of any errors. So without any other blahh we’ll get going.

1) Before anything you should have a sketch of your own navigation bar. Thankx for our graphic designer that I had a sketch readily

2) So now we have the sketch. Next we need the buttons readied for the process. Preparing things at first make things easier. So I’ll be showing of the making of only the register button so here I’ve got the pictures of the button for its three events: Normal, Hover, Pressed. (Again thankx for the graphic designer Dark X :DD)

3) Right so we finish the graphic part :D not really. So lets start the work with Flash. (‘m using Flash CS3 but others too may work). First takk a blank Action Script 2 Flash Page. Then Adjust the size of it using the Size button at the bottom. (I’ve used width: 1100, Height: 155). Then add 3 layers to the project as show in the figure below and name them as Action, Buttons, Content respectively.

4) You may wonder why I have used a size of this much. But you’ll see this size useful when you are making a complete navigation bar. For now its only one button. OK, now goto Insert menu  New Symbol (or press ctrl+F8) So the new symbol window appears, now change the name to btnRegister (the case sensitivity is important as action script is case sensitive) and select Button option from the Type and press OK.

5) You’ll get another window now, while being in that window minimize flash and go o the folder where you have the pictures of the three events of the button (Normal, Hover, Pressed) and then drag them to the Library. (The panel at the right) Once they are there First select the white box under the UP label in the flash window, right click it and Slect Insert Blank Keyframe. Then while the Up box is blacked place your picture (for the normal event on the space under it as show in the figure. Q

6) Now Select the Over box  Add Blank Keyframe  And put the Hover picture in the space below so that the positions of the first and the second are the same. Continue this with the Pressed button too. After you are done Press the label named Scene 1 At the bottom to return. (or press the blue arrow button). When you are back on the Scene you’ll see a new button called btnRegister in you Library. Now select the First frame of the Button Layer from the Timeline. Then Drag it and drop on the Canvas (The white area). (Make sire the first frame of the Buttons Layer is selected). Then select the 10th frame of the same layer and right click  slect insert frame. So we have now successfully created the first button. (You can create other buttons too according to your will in the same mannar).

7) Now press CTRL+Enter and test the movie. Make sure the hover and pressed instances work correctly. If not repeat the steps carefully until you make it clearly. Now we are going to add some action to the scene because unless its useless its not going to navigate you anywhere :D. First select the button in the canvas and search for the Instance name property at the bottom and rename it to btnReg . (The case sensitivity is important) then select the first frame of the Action Layer and right click it  select Actions. Now the Script window opens. In that write the following code:

btnReg.onRelease = function () {



8) In the following code the meaning is to navigate the browser to the given link if the button is pressed and released. So change the register.php to anyother name or link according to your will. It is important that you write all the commas, quotation marks etc. just as given. CONGRATZ!!! You have made your first Flash Navigation Bar. Now you should export it to use it in your web page. Goto File  Publish Settings. In the type list check html and flash, Under the HTML tab in the Window Mode list Select the Transparent Windowless property to remove the background white color of the scene. NOW PRESS PUBLISH !!

Keep in mind that Flash Navigation bars may be a harmful thing to your site as it will make the whole site down if the end user don’t have the flash active installed. So always keep in mind at least to use a link with a non flash navigation bar in case of such user. There are scripts to check the availability of flash and redirect them to the corrent page WHICH WILL BE WRITTEN Later as I have to play CS now. Happy Flash!!!
(I have given below a completed version of the navigation bar!!)


  1. gud work dude... really appreciate it...keep up da gud work... :)