Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   Creating Your Own Flash Navigation Bar From Scratch (http://www.go4expert.com/articles/creating-flash-navigation-bar-scratch-t23165/)

ManzZup 1Sep2010 12:12

Creating Your Own Flash Navigation Bar From Scratch
 
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.

Background



This article is so old but just now i got into senses that i have not posted it yet :). Before starting please remember that the uniqueness and the quality of the navigation bar will depend on your creativity. This code is just for ONE button but of course its up to you to make the other.

The Code

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

    http://imgs.g4estatic.com/flash-navigation-bar/1.jpg

  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.

    http://imgs.g4estatic.com/flash-navigation-bar/2.jpg
  3. Right so we finish the graphic part :D not really. So lets start the work with Flash. (I‘m using Flash CS3 but others too work). First take 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.

    http://imgs.g4estatic.com/flash-navigation-bar/3.jpg

  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.

    http://imgs.g4estatic.com/flash-navigation-bar/4.jpg
  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

    http://imgs.g4estatic.com/flash-navigation-bar/5.jpg

    http://imgs.g4estatic.com/flash-navigation-bar/6.jpg
  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.
  7. 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 sure 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).

    http://imgs.g4estatic.com/flash-navigation-bar/7.jpg

  8. 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(At the properties window) 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:

    Code:

    btnReg.onRelease = function() {
      getURL("register.php");
    }

    http://imgs.g4estatic.com/flash-navigation-bar/8.jpg
  9. 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.

    **And remember that you can't navigate to external source like ("http://google.com") due to security reasons. The only way to archive that is to make a shorcut to the preferred website. (in the deshtop goto make new shortcut). Then upload it to your web site and rename the path in the Action Script code to the that file (ex: google.ink)**

    CONGRATZ!!! You have made your first Flash Navigation Bar. Now you should export it to use it in your web page.
  10. 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. Happy Flash!!!
(I have given below a completed version of the navigation bar!!)

View Completed Nav Bar

shabbir 4Oct2010 10:22

Re: Creating Your Own Flash Navigation Bar From Scratch
 
If you liked this article do nominate this article for Article of the month - Sep 2010 Before 15th of October 2010.

shabbir 17Oct2010 12:54

Re: Creating Your Own Flash Navigation Bar From Scratch
 
Article selected for voting for Article of the month - Sep 2010. Cast your vote now before October 27th, 2010

muthuis 17Oct2010 14:39

Re: Creating Your Own Flash Navigation Bar From Scratch
 
Good one.

alexsmth114 15Mar2011 11:21

Re: Creating Your Own Flash Navigation Bar From Scratch
 
Well depicted step by step procedural post, keep them coming!!..

ManzZup 15Mar2011 11:59

Re: Creating Your Own Flash Navigation Bar From Scratch
 
thank you :D
hoping have some other [when i finished the current]

Scripting 16Feb2012 12:18

Re: Creating Your Own Flash Navigation Bar From Scratch
 
Big THANKS from me! I really always wondered how do people do it :D

ManzZup 17Feb2012 20:55

Re: Creating Your Own Flash Navigation Bar From Scratch
 
pleasures mine :D


All times are GMT +5.5. The time now is 05:07.