階層構造を持つシンプルなメニューを作成していきたいと思います。
今回の記事で↓こんな感じになります。


このままではシンプルすぎてつまらないのですが、これを基に、エフェクトやマークを付けるとそれなりに見えてくると思います。今後付け足していきます。


【ファイル構造】
menu.xml メニュー設定データ
menu_list.swfFlash本体
（メニュー設定データを読み込みメニューを作成）


【menu.xmlのデータ構造】
<?xml version="1.0" encoding="UTF-8"?>
<whole 属性></whole>
<itemdata>
　<item 属性>
　　<item 属性></item>
　　<item 属性>
　　　<item 属性></item>
　　</item>
　</item>
　<item 属性></item>
　<item 属性></item>
</itemdata>
↑こんな感じで階層構造になります。

具体例
<?xml version="1.0" encoding="UTF-8"?>
<whole iwidth="100" isize="14" swidth="400" sheight="70"></whole>
<itemdata>
　<item iurl="http://wa.otesei.com/" ititle="webapp" icolor="0x00aa00" ibgcolor="0xeeeeff">
　　<item iurl="http://wa.otesei.com/category/3" ititle="ncleus" icolor="0xbb0000" ibgcolor="0xeeeeff"></item>
　　<item iurl="http://wa.otesei.com/category/4" ititle="flash" icolor="0x00aaaa" ibgcolor="0xeeeeff">
　　　<item iurl="http://wa.otesei.com/category/4" ititle="ms" icolor="0xddcc00" ibgcolor="0xeeeeff"></item>
　　</item>
　</item>
　<item iurl="http://as.otesei.com/" ititle="as" icolor="0x0000ff" ibgcolor="0xeeeeff"></item>
　<item iurl="http://php.otesei.com/" ititle="php" icolor="0xff0000" ibgcolor="0xeeeeff"></item>
</itemdata>

階層構造にしたかったため、XMLを使用していますが、入子の構造とその属性のみ使用しています。変な使い方です。
最初のタグ（whole）の属性で全体に関する設定を行います。
iwidthメニューの横幅
isizeメニューのフォントサイズ
swidthステージの横幅
sheightステージの高さ

２番目（最後）のタグ（itemdata）の中にメニューを定義します。
itemタグの入子が、そのままメニューの階層になります。itemタグの属性は以下の通り
iurlリンク先URL
ititleメニューの項目名
icolor項目名の色
ibgcolor項目名の背景の色

手順１


ライブラリに新規ムービークリップシンボルを追加する。
名前・識別子・AS2.0を「menu_list」とする。
タイムライン1フレーム目に以下のコードを記述する。
xml_data = new XML();
XML.prototype.ignoreWhite = true;
//menu.xmlの場所
_root.xml_path = (_root.xml_path) ? _root.xml_path : "menu.xml";
xml_data.load(_root.xml_path);
xml_data.onLoad = function (loaded) {
  if (loaded) {
    //xml読み込み完了後の処理
    var fc = xml_data.firstChild;
    Stage.scaleMode = "noScale";
    Stage.width  = sx = Number(fc.attributes["swidth"]);
    Stage.height = sy = Number(fc.attributes["sheight"]);
    _root._x += (300 - sx)/2;
    _root._y += (400 - sy)/2;
    iw = Number(fc.attributes["iwidth"]);
    is = Number(fc.attributes["isize"]);
    attachMovie("menu_list", "root_menu", 1, { xml_data:xml_data.lastChild, x:0, y:0, iwidth:iw, isize:is });
  } else {
    _root.createTextField("ititle", 65535, 0, 0, 200, 20);
    _root["ititle"].text = "xmlが読み込めませんでした。"+_root.xml_path;
  }
}
this.stop();
解説付きコードはこちらです→手順１のコード解説

手順２


テキストファイル「menu_list.as」に以下のコードを記述する。（UTF-8）
class menu_list extends MovieClip {
  var xml_data   :Object;
  var x:Number, y:Number, iwidth:Number, isize:Number;
  //====================================================================
  //コンストラクタ（xml_dataの子供の分だけcreate_itemを呼び出す。）
  //====================================================================
  function menu_list(){
    for(var i in xml_data.childNodes){
      this.create_item(i, xml_data.childNodes[i], x, y+(i*(isize+5)), iwidth, isize);
    }
  }
  //====================================================================
  //メソッド（アイテムのタイトルと背景の四角を作成する。イベントを設定する。）
  //====================================================================
  function create_item(id:Number, node:Object, ix:Number, iy:Number, w:Number, s:Number){
    var item_mc = this.createEmptyMovieClip("l"+id, id*2);
    item_mc.createTextField("ititle", 1, ix+5, iy-2, w, s+5);
    item_mc["ititle"].text = node.attributes["ititle"];
    //テキストフォーマット
    var tf = new TextFormat();
    tf.size = s;
    tf.color = node.attributes["icolor"];
    item_mc["ititle"].setTextFormat(tf);

    //塗四角作画
    item_mc.beginFill(node.attributes["ibgcolor"], 100);
    item_mc.moveTo(ix  , iy); item_mc.lineTo(ix  , iy+s+2);
    item_mc.lineTo(ix+w, iy+s+2); item_mc.lineTo(ix+w, iy);
    item_mc.endFill();
    //******************************
    //onRollOverイベント
    //******************************
    item_mc.onRollOver = function(){
      _parent.attachMovie("menu_list", "menu", 100, { xml_data:node, x:ix+w+3, y:iy, iwidth:w, isize:s });
    }
    //******************************
    //onPressイベント
    //******************************
    item_mc.onPress = function(){ getURL(node.attributes["iurl"]); }
  }
}
単純に子ノード分、ムービークリップを作って背景と文字を書いているだけです。
そのムービークリップごとにイベントを定義しています。
ロールオーバーイベントでは更にその子ノードのメニューを作成して、
クリックイベントでは設定したURLを開くようにしています。

設定ファイルを作る


上記構造にて、menu.xmlを作成する。

以上です。
menu.xmlは、Flash本体と同じ場所に置いてください。
冒頭のサンプルのようなメニューの出来上がりです。

階層の分だけ横幅をとりますので、背景を透明にしてレイヤーとして使用すると良いと思います。
環境によっては、menu.xmlのurlを指定しなければならないようです。

次回は、マウスを乗せた項目の色を変えたり、ちょっとしたエフェクトを付けてみたいと思います。