Creating Basic Flash Menu

1. Before we begin creating the whole navigation system were going to have to create a new document depending on how many links you need. In this tutorial I will be making a vertical menu.

2. Now go to "Modify", "Document ", and give the document these settings:

image 1

3. Now that we have the size and fps (frames per second) set right, go to "Window", "Library" and a small window should pop up in the lower right corner. Voila its the library! It will look like this:

image 2

4. Go to the library and click on this button:

image 3

5. A window should pop up asking your what type of symbol you would like to create. We are going to create a button, so select button and I just named it button:

image 4

6. Your timeline will change and you should see up, over, down, and hit. Like below:

image 5

7. Before we create anything I'm going to explain what each frame does.

Up - the buttons up-state, when the cursor is not over or pressing the button
Over - what the button will look like when the cursor is over the button
Down - the appearance it will have once you click on the button
Hit - the area in which the button is clickable (usaully left blank)

8. Now that we have all that explained we are going to create a square in the "Up" frame. Like so:

image 6

9. We will do the "Over" frame now, to do this just insert a keyframe and you will see the shape you just created in the "Up" state. Now just change the fill color and/or stroke color. Example:

image 7

10. For this frame just do the same and change the colors, or you can leave it blank and it won't change once you click on it, it will just look as if it were in the "Over" state. I did change the colors for an example:

image 8

11. Now that we have the button created click the arrow in the upper left corner to go back to the main stage:

image 9

Now look at the library and you should see the button you just created. Drag it onto the stage and place it where you want it to be in the menu.

Example:

image 10

12. For the rest of the buttons just copy it and then paste as many as you need, then modify the documents size to fit your button quantity and size:

image 11

13. Now create a new layer in the timeline and name it text, make sure it is above the layer you have the buttons on. Make sure you create all of your text on that layer. Now you can place your text over each button like so:

image 12

14. Amost done!, now we have to add links to the buttons using actionscript. To add actionscript to a button you must first select it. Now open your actionscript window and place this code in each button:

"on (release) {
getURL("YOUR LINK");
}

*Replace "YOUR LINK" with the what your hyperlinking to (index.php, or http://www.alteredconcept.com), and remember you must SELECT a button to add actionscript to it.

Download Source File

Final Result:

(without actionscript)

All Done! Woah that was a long one.


Close    To Top
  • Prev Article-Flash:
  • Next Article-Flash:
  • Now: Tutorial for Web and Software Design > Flash > Basic > Flash Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction