Creating Your Own Flash Navigation Bar From Scratch

Discussion in 'Web Design, HTML And CSS' started by ManzZup, Sep 1, 2010.

  1. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:
    http://zontek.zzl.org
    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

      [​IMG]

    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.

      [​IMG]
    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.

      [​IMG]

    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.

      [​IMG]
    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

      [​IMG]

      [​IMG]
    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).

      [​IMG]

    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");
      } 
      [​IMG]
    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
     
    Last edited by a moderator: Jan 21, 2017
    Scripting, nyadav and muthuis like this.
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
  3. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
  4. muthuis

    muthuis New Member

    Joined:
    Oct 16, 2010
    Messages:
    10
    Likes Received:
    0
    Trophy Points:
    0
    Home Page:
    http://www.codersource.net
  5. alexsmth114

    alexsmth114 New Member

    Joined:
    Mar 7, 2011
    Messages:
    19
    Likes Received:
    1
    Trophy Points:
    0
    Well depicted step by step procedural post, keep them coming!!..
     
  6. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:
    http://zontek.zzl.org
    thank you :D
    hoping have some other [when i finished the current]
     
  7. Scripting

    Scripting John Hoder

    Joined:
    Jun 29, 2010
    Messages:
    421
    Likes Received:
    57
    Trophy Points:
    0
    Occupation:
    School for life
    Location:
    /root
    Big THANKS from me! I really always wondered how do people do it :D
     
  8. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:
    http://zontek.zzl.org
    pleasures mine :D
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice