ONE OP IXEL

外部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 + "をクリックしました。");
   		}
   	}
   }
   

フル画面でフラッシュを表示さる場合画面のサイズによってコンテンツのサイズや位置などを変更する必要があります。
そこで今回はウィンドウリサイズ時のステージサイズを取得してみます。

package
{
	import flash.display.Sprite;
	import flash.events.Event;

	public class Main extends Sprite
	{
		function Main() {
			this.stage.addEventListener(Event.RESIZE, onResize);
		}
		//リサイズ時に呼び出されるイベント
		function onResize(event:Event):void {
			trace("W:" + this.stage.stageWidth + "　H:"  + this.stage.stageHeight );
		}
	}
}

といってもこれだけです。
数値の取得だけなら簡単ですね。
onResizeに変更後の処理を記述していくことになります。

SimpleButtonクラスを使用することで簡単に「ロールオーバー」や「ロールダウン」のビジュアルを簡単に設定することができます。

1. まずはSimpleButtonクラスをインポートします。
   import flash.display.SimpleButton;
2. 次に「upState（通常時）」「overState（ロールオーバー）」「downStat（クリック）」それぞれのプロパティにDisplayObjectを設定します。
   今回はLoaderで読み込んだ外部画像でロールオーバーの設定をします。

   var btn:SimpleButton = new SimpleButton();
   //通常の状態
   btn.upState = mekaButton(_imgLoader);
   //ロールオーバー
   btn.overState = mekaButton(_imgLoader_o);
   //クリック時
   btn.hitTestState = btn.upState;
   

3. mekaButtoではLoaderをaddChildしているだけですが、DisplayObjectを返す必要があります。

   private function mekaButton(load:Loader):Sprite {
   	var mySprite:Sprite = new Sprite();
   	mySprite.addChild(load);
   	return mySprite;
   }
   

4. 最終的なコードです。

   package
   {
   import flash.display.SimpleButton;
   import flash.display.Sprite;
   import flash.net.URLLoader;
   import flash.net.URLRequest;
   import flash.display.Loader;   
   
   	public class Main extends Sprite
   	{
   		var _imgLoader:Loader = new Loader();
   		var _imgLoader_o:Loader = new Loader();
   
   		public function Main() {
   			_imgLoader.load(new URLRequest("img/btn01.jpg"));
   			_imgLoader_o.load(new URLRequest("img/btn01_o.jpg"));
   
   			var btn:SimpleButton = new SimpleButton();
   			//通常の状態
   			btn.upState = mekaButton(_imgLoader);
   			//ロールオーバー
   			btn.overState = mekaButton(_imgLoader_o);
   			//クリック時
   			btn.hitTestState = btn.upState;
   
   			addChild(btn);
   		}
   
   		private function mekaButton(load:Loader):Sprite {
   			var mySprite:Sprite = new Sprite();
   			mySprite.addChild(load);
   			return mySprite;
   		}
   	}
   }
   

とりあえずボタンの変化しかしませんが、動作の設定は通常通りイベントリスナーで設定します。

複数の画像を扱えるようになったと思うので、今回は外部XMLファイルを使用した画像の指定です。
外部XMLを使用することで再ビルドすることなく更新できるのでメンテナンス性が向上します。

1. XMLファイルの準備。
   今回は画像のファイルパスと画像の名前を記述した構造にしました。

   
   
   	画像1
   	画像2
   	画像3
   	画像4
   
   

   ファイル名をload.xmlとして保存
   （全て小文字にしてください）

2. ASファイルからload.xmlファイルを読み込みます。

   package
   {
   import flash.display.Sprite;
   import flash.net.URLLoader;
   import flash.net.URLRequest;
   import flash.events.Event;   
   
       public class Main extends Sprite
       {
           var pathXml:String = "load.xml";
           //XMLから読み込んだデータを入れる配列
           var name_list:Array = new Array();
           var path_list:Array = new Array();
           var url_loader:URLLoader ;   
   
           public function Main() {
               url_loader = new URLLoader(new URLRequest(pathXml));
               // 読み込み完了時に呼び出されるイベント
               url_loader.addEventListener (Event.COMPLETE,loadComplete);
           }   
   
           //XMLロード完了の処理
           function loadComplete (event : Event) {
               var xml : XML = new XML(url_loader.data);
               //データを配列に入れる
               for each (var xmlObj:Object in xml.img) {
                   name_list.push (xmlObj.text());
                   path_list.push (xmlObj.@src);
               }
               //ちゃんとに読み込まれたか確認
               for (var i:uint = 0; i < name_list.length; i++ ) {
                   trace(name_list[i]);
                   trace(path_list[i]);
               }
           }
       }
   }
   

   とりあえずこれで文字だけは表示できるはずです。

複数の外部画像を読み込んだときまとめてローディング表示させたいときは「bulk-loader 」というライブラリ使うと便利らしいのでメモ。

1. まずはflaファイルと同階層にライブラリを入れてインポート

   import br.com.stimuli.loading.BulkLoader;
   import br.com.stimuli.loading.BulkProgressEvent;
   

2. 読み込むファイルを指定します。
   今回は画像ファイルを読み込みました。

   loader = new BulkLoader("main");
   //読み込む画像パスの指定
   loader.add("img/img01.gif");
   loader.add("img/img02.gif");
   loader.add("img/img03.gif");
   

3. プログレスイベントとロード完了後のイベントの追加

   loader.addEventListener(BulkLoader.PROGRESS, onProgress);
   loader.addEventListener(BulkLoader.COMPLETE, onComplete);
   loader.start();// ロード開始
   

4. percentLoadedで現在のローディングの経過を取得します。

   private function onProgress(e:BulkProgressEvent) : void
   {
   	trace(e.percentLoaded);
   }
   

5. ローディング完了後の処理。
   今回はgetBitmapで取得しました。

   private function onComplete(e:Event) : void
   {
   	var _bitmap1:Bitmap = loader.getBitmap("img/img01.gif");
   	var _bitmap2:Bitmap = loader.getBitmap("img/img02.gif");
   	var _bitmap3:Bitmap = loader.getBitmap("img/img03.gif");
   }
   

6. 最終的にとりあえずこんな感じです。

   package
   {
   	import flash.display.Bitmap;
   	import flash.display.Sprite;
   	import flash.events.Event;
   	import br.com.stimuli.loading.BulkLoader;
   	import br.com.stimuli.loading.BulkProgressEvent;
   
   	public class Main extends Sprite
   	{
   		//BulkLoaderの宣言
   		private var loader:BulkLoader ;
   
   		public function Main ():void {
   			loader = new BulkLoader("main");
   			//読み込む画像パスの指定
   			loader.add("img/img01.gif");
   			loader.add("img/img02.gif");
   			loader.add("img/img03.gif");
   
   			// ロード経過イベント
   			loader.addEventListener(BulkLoader.PROGRESS, onProgress);
   			// ロード完了イベント
   			loader.addEventListener(BulkLoader.COMPLETE, onComplete);
   			loader.start();// ロード開始
   		}
   		// ロード経過
   		private function onProgress(e:BulkProgressEvent) : void
   		{
   			trace(e.percentLoaded);
   		}
   		// ロード完了
   		private function onComplete(e:Event) : void
   		{
   		    var _bitmap1:Bitmap = loader.getBitmap("img/img01.gif");
   			var _bitmap2:Bitmap = loader.getBitmap("img/img02.gif");
   			var _bitmap3:Bitmap = loader.getBitmap("img/img03.gif");
   
   			//画像の大きさ分ずらして配置
   			_bitmap2.x = 60;
   			_bitmap3.x = 120;
   			addChild(_bitmap1);
   			addChild(_bitmap2);
   			addChild(_bitmap3);
   		}
   	}
   }