XMLファイルを使ったナビゲーションメニュー 【後編】

navigation_menu



XMLファイルを使ったナビゲーションメニューの作り方の後編です
【前編】はこちら




まずは、文字とリンク先を設定するXMLファイルを作ります
メモ帳などを開き下記を記述

<menu>
 
  <buttons>
 
    <button>
        <label>Google</label>
        <linkTo>http://www.google.co.jp/</linkTo>
    </button>
    <button>
        <label>Yahoo! JAPAN</label>
        <linkTo>http://www.yahoo.co.jp/</linkTo>
    </button>
    <button>
        <label>MSN Japan</label>
        <linkTo>http://jp.msn.com/</linkTo>
    </button>
     <button>
        <label>goo</label>
        <linkTo>http://www.goo.ne.jp/</linkTo>
    </button>
    <button>
        <label>Infoseek</label>
        <linkTo>http://www.infoseek.co.jp/</linkTo>
    </button>

  </buttons>
 
</menu>


これを拡張子を.xmlにして保存


Flashに戻って、前回記述したActionScriptに追加

//TweenMaxをインポート
import gs.*;
import gs.easing.*;

//XMLファイルへのパス
var xmlPath:String = "〜.xml";
//読み込んだXMLファイルを変数に
var xml:XML;

//XMLファイルを読み込んで読み込み終わったらxmlLoaded()起動
var loader = new URLLoader();
loader.load(new URLRequest(xmlPath));
loader.addEventListener(Event.COMPLETE, xmlLoaded);


function xmlLoaded(e:Event):void {
    //XMLファイルの存在を確認したら
    if ((e.target as URLLoader) != null ) {
        //読み込んだXMLファイルを変数xmlに
        xml = new XML(loader.data);
        //createMenu()起動
        createMenu();
    }
}

var i:uint = 0;    //カウンター


function createMenu():void {
    //XMLファイルの中にあるbuttonの数だけ繰り返す
    for each (var button:XML in xml.buttons.button) {
        var menuItem:MenuItem = new MenuItem();    //menuItem作成

        //ボタンのテキストをXMLファイルのlabelに
        menuItem.menuLabel.text = button.label.toString();
        //ボタンのリンクをXMLファイルのlinkToに
        menuItem.linkTo = button.linkTo.toString();

        //ボタン配置
        menuItem.x = 50;
        menuItem.y = 65 + i*35;

        menuItem.buttonMode = true;    //カーソルを指の形に
        menuItem.mouseChildren = false;    //子要素(この場合文字)に反応しないように

        //マウスオーバー時の動作
        menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
        //マウスアウト時の動作
        menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
        //クリック時の動作
        menuItem.addEventListener(MouseEvent.CLICK, clickHandler);

        addChild(menuItem);    //menuItem追加
        i++;    //1回りするたびにカウンター増加

    }
}

//マウスオーバー時の設定
function mouseOverHandler(e:Event):void {
    //1秒間で幅2倍に、バウンド動作のイージング
    TweenMax.to(e.target, 1,{
    scaleX:2,
    ease:Bounce.easeOut
    });
}

//マウスアウト時の設定
function mouseOutHandler(e:Event):void {
    //1秒間で幅をもとの大きさに、バウンド動作のイージング
    TweenMax.to(e.target, 1,{
    scaleX:1,
    ease:Bounce.easeOut
    });
}

//クリック時の設定
function clickHandler(e:Event):void {

    //リンク設定
    var request:URLRequest = new URLRequest(e.target.linkTo);
    navigateToURL(request);
}

前回はforで繰り返し設定していたところをfor each in で設定しています
そのほうがxmlファイルをいじったときでも編集がしやすいと思うので


これでムービープレビューすると以下のようになってるかと思います



セキュリティ関連で引っかかる場合はこちらを参照


以上XMLファイルを使ったナビゲーションメニューの作り方でした