In this tutorial you will learn how to create a simple menu using Flash, while the menu items themselves will be imported from an XML file called menu.xml.

1. Start by creating a new flash document which can be called anything you like as long as the size is set to 550 x 80 px and the frame rate to 24fps in the property panel as shown below. If you can’t see this, click anywhere on the editing area and press CTRL+F3.

2. Next, create a rounded rectangle sized 135 x 40.6px but of any radius, the one shown below is 10 px.

3. Now make two layers, the first being ‘actions’ and the second ‘content’ as shown, and then put the rounded rectangle into the contents layer.

4. Select the text tool and insert text with a label of ‘label’.

5. Set the properties of this text label so that it looks similar to the illustration. The Dynamic Text setting is used so you the label can be changed at runtime.

6. Select both text and rectangle, then press F8. You will see the following window, set the properties similar to this and give it an instance name of “old”.

7. Convert this to a symbol by pressing F8 and setting name to ‘button_’ while giving it an instance name “label” and now select “button” as shown.

8. Add two layers, one “text” and another “button” and then put text into the text layer and your button in the button layer. Convert text to a movie clip by pressing F8 and name it as text. Set the instance name to “label” and add the key frames as shown, selecting key frame 1 from the button layer and pressing F9. Add action script stop(); and then do same with layer 15.

9. Now select key frame 15 and then select the rectangle. Set the Color property to Tint, and choose whatever color you want but with an alpha percent of 50%. You will find this option at the right hand side of the color picker when collapsed.

10. Repeat step 9, but with the text label. 11. Next, you need to add some ‘motion tween’ by right clicking between the keyframe ‘1 and 15’ and ‘15 and 30’ of both layers one by one and selecting Create Motion Tween.

12. Open the Library window by pressing F11 and then right click on the ‘button_’ item. Select linkage and then set properties as given below, checking the export for ActionScript and export in first frame boxes. This helps you to access this object during runtime dynamically.


13. In the directory where you have saved this flash document, create an xml file as follows…

<xml width="80" horizontal="true">
 
  <menu>
  <name>Cover</name>
  <link>http://www.geocities.com/coolvish91</link>
  <target>_self</target>
 
  </menu>
 
  <menu>
  <name>Introduction</name>
  <link>http://www.geocities.com</link>
  <target>fr1</target>
  </menu>
 
  <menu>
  <name>Formatting</name>
  <link>http://www.yahoo.com</link>
  <target>_self</target>
 
  </menu>
 
  <menu>
  <name>Tables</name>
  <link>http://www.msn.com</link>
  <target>_blank</target>
  </menu>
 
  <menu>
  <name>Frames</name>
  <link>http://www.adobe.com</link>
  <target>_parent</target>
  </menu>
 
  <menu>
  <name>Forms</name>
  <link>http://www.microsoft.com</link>
  <target>_parent</target>
 
  </menu>
  </xml>


14. Now go back to scene one and in the actions layer first keyframe press F9 to open the action panel and then insert the following code:

/*
       SIMPLE FLASH-XML MENU
       VISHESH YADAV
       12/05/2005
  */
 
  fscommand("allowscale", "false");
 
  function xmlLoaded(loaded) {
       if (loaded) {
            now._visible = false;
            xmlNode = xmlData.firstChild;
            total = xmlNode.childNodes.length;
            name = [];
            link = [];
            Target = [];
            mcWidth = xmlNode.attributes.width;
            mcHori = xmlNode.attributes.horizontal;
            for (i=0; i<total; i++) {
                name[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
                link[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
                Target[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
                _root.createEmptyMovieClip("_button", i);
                _root._button.attachMovie("button", button+i, i);
            }
            // end of for
       } else {
            now._visible = true;
            now._width = _root._width-20
            now._height=(1/7.74)*now._width
       }
       // end if
  }
  // End of the function
  now._visible = false;
  xmlData = new XML();
  xmlData.ignoreWhite = true;
  xmlData.load("menu.xml");
  xmlData.onLoad = xmlLoaded;


15. Staying in scene 1, select ‘button_’ and then press F9 to open the action panel again and insert the following code:

onClipEvent (load) {
    deep = _parent.getDepth();
    getWidth = _parent._parent._parent.mcWidth;
    getHori = _parent._parent._parent.mcHori;
    if (getHori == "true") {
        this._width = getWidth;
        this._height = 0.300000*getWidth;
        this._x = 10+deep*(this._width+5);
        this._y = 17;
    } else {
        this._width = getWidth;
        this._height = 0.300000*getWidth;
        this._x = 10;
        this._y = 20+deep*(this._height+5);
    }
    getLink = _parent._parent._parent.link[deep];
    getlabel = _parent._parent._parent.name[deep];
    getTarget = _parent._parent._parent.Target[deep];
    this.label.label.text = getlabel;
}
on (release) {
    getURL(getLink, getTarget);
}
on (rollOver) {
    this.gotoAndPlay(2);
}
on (rollOut) {
    this.gotoAndPlay(11);
}

16. You can now delete the button if you like and it is stored in the library, available for use anytime. However, you should insert a movie clip which will be shown if your XML file is not found, with an instance name of ‘now’ – it should look something like this:


17. Finally, press CTRL+Enter and you should see your finished Flash menu output.

I'm attaching this file as an attached .zip. From now on, do that instead of pointing users to off-site files, because what inevitably happens is a few months down the line you take them off of your server for whatever reason, and then this tutorial gets broken.

It would be great to have this menu available for Actionscript 3.0!!:)

Thanks!

good tutorial thanx ...

Hi
Thanx for tha tutorial,
How to give a link from xml to a specific frame number which is designed in Flash

thank u so much 4 the good tutorial!!!!!!!!!!:)

is their any way to make sub menu from this
kindly help..i will be thankful
by the way this tutorial is very helpful.thanks

I'm a newby to flash and other active styles of web development. I have lots of years in experience with just plain HTML but now want to add more updated abilities to the sites I create.

I was looking at this tutorial and I basically use Dreamweaver MX and am wondering what program I need to download/purchase etc. to be able to do this tutorial?

I would also like to be able to have a drop down menu with this menu. Though it doesn't have to be flashy.

Any help would be appreciated.

I found your site through Dynamic Drive. I have used this site for many years for scripts but now seem to be in need of learning a lot more about basic HTML coding.

Thanks in advance for any help.

good tutorial but flash is not the best for menu because of SEO and bots having a tough time with it.

Personally I would stick with CSS/HTML for menu

Is it Possible to Add a drop down menu here ??

hi

I have a flash menu it has three files in the fla file, xml file and swf file.

how do I get for it on a website or blog.

good where my site is hosted ospedar not have as one of the two men.

how do I run it on a website or blog.

I've stayed both files the xml file and swf file on another server,
need for this menu on my site. how to do it on my site and aparese fumsionar.

I've been searching I found some codes that did not work but it appears the effects are and nothing appears.

I can help I will be grateful!?

woow woow..thanks for this post..i never tried this XML menu..i am not but into the AS .but still i want more XML driven flash tutorials...thanks once again!