2009-12-09(Wed) 15:02
【AS3.0】外部XMLからナビゲーションメニューを作成

外部XMLから文字列を取得してナビゲーションメニューのようなものを作成する方法です。
見た目的にはXMLで画像ボタンを読み込んだ方が良いと思いますが、今回はテキスト情報のみを指定したいと思います。

  1. まずは読み込むXMLファイルを作成します。
    今回はテキストの羅列なので単純な構造です。

    
    
    	会社概要
    	業務実績
    	採用情報
    	商品案内
    
    

    flaファイルと同じ階層に「xml」という名前のフォルダを作成し、その中に保存します。

  2. 次にFlashで基本のボタンとなるムービークリップを作成します。
    テキストも仮に入れます。テキストの種類は「ダイナミックテキスト」インスタンス名に「btn_label」を指定してください。
    完成したらリンケージプロパティで「btn_mc」というクラス名をつけます。
    ナビゲーションボタンプロパティ設定
  3. ASファイルの記述です。
    外部XMLファイルの読み込みは、「外部XMLファイルから情報を取得 」の記事を参考にしても良いですが、今回は「WpXMLloader」というライブラリを使用してみます。
    ダウンロード&使用方法は下記アドレスを参考にしてください。
    WpXMLloader
  4. インポートするクラスです。
    ダウンロードしたWpXMLloaderを忘れずに読み込みます。

    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import whirlpower.wploader.WpXMLloader;
    
  5. 外部XMLの読み込みの部分です。
    基本的にWpXMLloadeの使い方をそのまま使ってます。
    XMLのファイルパスだけ指定して、最後に配列で使いたいのでXMLListに代入します。

    function Main() {
    	WpXMLloader.addUrl( "navi_list", "xml/navi_list.xml" );
    	WpXMLloader.load( complete );
    }
    private function complete():void
    {
    	var naviXML:XML = WpXMLloader.getXmlByName( "navi_list" );
    	var naviXMLList:XMLList = naviXML.navi;
    }
    
  6. ボタンの生成から配置までfor文で行います。

    for (var i:uint = 0; i < naviXMLList.length(); i++) {
    	var btnMC:btn_mc = new btn_mc();
    	//XMLリストをボタンラベルに入れる
    	btnMC.btn_label.text = naviXMLList[i];
    	//ボタンの大きさ分ずらして配置
    	btnMC.y = i * (btnMC.height - 1);
    	//指マークON
    	btnMC.buttonMode = true;
    	//文字(子要素)は無視
    	btnMC.mouseChildren = false;
    	//ステージに配置
    	this.addChild(btnMC);
    	//マウスクリックイベント
    	btnMC.addEventListener(MouseEvent.CLICK, onClick);
    }
    

    デザインによって、btnMC.yの部分の間隔などを空けたりしてみてください。
    今回は四角に1pxのラインがあるボタンだったのでheightにマイナス1してます。

  7. 最後にクリックされた後の処理をonClickメソッドに記述していきます。
    今回はボタンのラベルを表示するだけの簡単なものにしてみました。

    function onClick(e:Event):void {
    	trace(e.target.btn_label.text + "をクリックしました。");
    }
    
  8. 最終的にはこんな感じ。

    package
    {
    	import flash.display.Sprite;
    	import flash.events.Event;
    	import flash.events.MouseEvent;
    	import whirlpower.wploader.WpXMLloader;
    
    	public class Main extends Sprite
    	{
    		function Main() {
    			WpXMLloader.addUrl( "navi_list", "xml/navi_list.xml" );
    			WpXMLloader.load( complete );
    		}
    		private function complete():void
    		{
    			var naviXML:XML = WpXMLloader.getXmlByName( "navi_list" );
    			var naviXMLList:XMLList = naviXML.navi;
    
    			for (var i:uint = 0; i < naviXMLList.length(); i++) {
    				var btnMC:btn_mc = new btn_mc();
    				//XMLリストをボタンラベルに入れる
    				btnMC.btn_label.text = naviXMLList[i];
    				//ボタンの大きさ分ずらして配置
    				btnMC.y = i * (btnMC.height - 1);
    				//指マークON
    				btnMC.buttonMode = true;
    				//文字(子要素)は無視
    				btnMC.mouseChildren = false;
    				//ステージに配置
    				this.addChild(btnMC);
    
    				//マウスクリックイベント
    				btnMC.addEventListener(MouseEvent.CLICK, onClick);
    			}
    		}
    
    		//マウスクリック時の処理
    		function onClick(e:Event):void {
    			trace(e.target.btn_label.text + "をクリックしました。");
    		}
    	}
    }
    

Comment Form
Name
E-mail
URL
Comment

TrackBack URL