XMLファイルを使ったナビゲーションメニュー 【後編】
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ファイルを使ったナビゲーションメニューの作り方でした