2010-03-03(Wed) 13:08
【AS3.0】無限ループ移動する画像

読み込んだ複数の外部画像を右から左へと無限ループで移動させるFlashを作成してみます。
画像サイズを指定したり、正方形しか使えなかったり、とかなり使い勝手の悪い感じになってます。あとステージサイズより画像の横幅の合計サイズは大きくしてください。

外部XMLはこんな感じです。


<data>
    <photo>img/img01.gif</photo>
    <photo>img/img02.gif</photo>
    ・・・・
    <photo>img/img10.gif</photo>
</data>
package
{
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.Event;
	import XMLloader;

	public class Main extends Sprite
	{
		var _loaderList:Array = new Array();
		var _XMLLoader:XMLloader;
		var _XML:XML;
		//画像URL格納する配列
		var _imgList = new Array();	

		//画像のサイズ
		var _imgSize:uint = 40;
		//スクロールスピード
		var _dx:int = 3;
		//画像の間隔
		var _interval:uint = 20;

		public function Main() {
			_XMLLoader = new XMLloader("load.xml");
			_XMLLoader.addEventListener(XMLloader.LOAD_COMPLETE, onXMLloaded);
		}
		function onXMLloaded(event:Event):void{
			//ロードしたXMLを取得
			_XML = _XMLLoader.getXML();

			for each (var item:XML in _XML.photo) {
				//XMLの画像URLを_imgListに入れる
				_imgList.push(item.text());
			}

			for (var i = 0; i < _imgList.length; i++) {
				_loaderList[i] = new Loader();
				//読み込む画像の指定
				_loaderList[i].load(new URLRequest(_imgList[i]));
				this.addChild(_loaderList[i]);
				//_intervalだけ間隔を空けて配置
				_loaderList[i].x = i * (_imgSize + _interval);
				//画面縦の中心に配置(正方形じゃなかったら_imgSizeのところを変える)
				_loaderList[i].y = (this.stage.stageHeight / 2) - (_imgSize / 2);
				//個々の画像を識別るす番号(1番から)
				_loaderList[i].name = i + 1;
				//ループイベント
				_loaderList[i].addEventListener(Event.ENTER_FRAME, enterframeTimer);
			}
		}

		//ループ処理
		public function enterframeTimer(event:Event):void {
			event.target.x -= _dx;
			//左の画面外に出たら一番右に移動
			if (event.target.x < 0 - _imgSize) {
				//画像の最後の配列のxから画像分プラス
				event.target.x = _loaderList[_loaderList.length - 1].x + (_imgSize + _interval) * event.target.name;
			}
		}
	}
}

画像のxが0以下(画面外)になったら配列の一番後ろの画像のi個の位置に移動して、再スタートさせるという感じになっています。
だいたい正方形じゃない画像がほとんでしょうから46行目の「_imgSize」は読み込む画像のHeightに変えてください。

category : ActionScript
tag :

Comments(0)Trackbacks(0)

2010-01-13(Wed) 16:56
【AS3.0】外部XMLで作るシンプルなイメージギャラリー

外部XML&イメージを使用した(若干)柔軟性のある簡単なイメージギャラリーを作成したいと思います。
完成イメージ図はこんな感じです。

左側の小さな水色の画像をクリックすると右側の大きな画像が切り替わるといういたってシンプルなつくりです。

  1. まずは表示させるべき画像を作成します。
    名称は「m1.gif」~「m9.gif」(サムネイル)と、「b1.gif」~「b9.gif」(大きい画像)にしました。
    flaファイルと同階層に「img」という名前のフォルダを作成し、そこに表示させる画像を入れます。
  2. XMLファイルも画像と同階層に作成します。
    こんな感じです。

    <?xml version="1.0" encoding="utf-8"?>  
    <data>  
        <img thum="img/m1.gif" src="img/b1.gif">画像1</img>  
        <img thum="img/m2.gif" src="img/b2.gif">画像2</img>  
        <img thum="img/m3.gif" src="img/b3.gif">画像3</img>  
        <img thum="img/m4.gif" src="img/b4.gif">画像4</img>  
        <img thum="img/m5.gif" src="img/b5.gif">画像5</img>  
        <img thum="img/m6.gif" src="img/b6.gif">画像6</img>  
        <img thum="img/m7.gif" src="img/b7.gif">画像7</img>
        <img thum="img/m8.gif" src="img/b8.gif">画像8</img>
        <img thum="img/m9.gif" src="img/b9.gif">画像9</img>
    </data>
    

    文字は表示されないのですが、あとあとのことを考えてとりあえず入れてあります。
    「load.xml」で保存します。

  3. package
    {
    	import flash.display.Loader;
    	import flash.display.LoaderInfo;
    	import flash.display.Sprite;
    	import flash.events.MouseEvent;
    	import flash.net.URLLoader;
    	import flash.net.URLRequest;
    	import flash.events.Event;   
    
    	public class Main extends Sprite
        {
    		//サムネイルの並べる数
    		var _thumNum:uint;
    		//サムネイルの間隔
    		var _thumInterval:uint;
    
            //XMLから読み込んだデータを入れる配列
            var _imgList:Array = new Array();
    		var _thumList:Array = new Array();
    
            var _urlLoader:URLLoader;
    
    		//サムネイルが入る配列
    		var _thum:Array = new Array();
    		//全部のサムネイルを入れるコンテナ
    		var _thumContainer:Sprite = new Sprite();
    		//大きい画像を入れるコンテナ
    		var _imgContainer:Sprite = new Sprite();
    		//現在選択されている画像番号
    		var _currentNum:int = -1;
    
            public function Main() {
    			//初期設定
    			_thumNum = 3;
    			_thumInterval = 10;
    			_imgContainer.x = 200;
    
    			//外部XMLファイルの指定
                _urlLoader = new URLLoader(new URLRequest("img/load.xml"));
                // 読み込み完了時に呼び出されるイベント
                _urlLoader.addEventListener (Event.COMPLETE, XMLloadComp);
    			this.addChild(_thumContainer);
    			this.addChild(_imgContainer);
            }
    
            //XMLロード完了の処理
            function XMLloadComp (event:Event):void {
                var xml : XML = new XML(_urlLoader.data);
                //XMLのデータを配列に入れる
                for each (var xmlObj:Object in xml.img) {
                    _imgList.push (xmlObj.@src);
    				_thumList.push (xmlObj.@thum);
                }
                //配列の長さだけイメージをロード
                for (var i:uint = 0; i < _imgList.length; i++ ) {
    				_thum.push(new Sprite());
    				var thumLoader:Loader = new Loader();
    				thumLoader.load (new URLRequest(_thumList[i]));
    				_thum[i].addChild(thumLoader);
    				//nameに番号を入れる
    				_thum[i].name = String(i);
    				thumLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumImgloadComp);
                }
            }
    		//サムネイルロード完了
    		function thumImgloadComp(event:Event):void {
    			//該当するサムネイルの番号を取得
    			var imgNum:int = int(event.target.loader.parent.name);
    			//_thumInterval(間隔)だけ開けてサムネイルを配置
    			event.target.loader.x = (event.target.width + _thumInterval) * (imgNum % _thumNum);
    			event.target.loader.y = (event.target.height + _thumInterval ) * (int(imgNum / _thumNum));
    			_thumContainer.addChild(event.target.loader);
    
    			event.target.loader.name = imgNum;
    			event.target.loader.addEventListener(MouseEvent.CLICK, onThumImg);
    
    		}
    		//サムネイルクリック
    		function onThumImg(event:Event):void {
    			//クリックされた番号をnumに入れる
    			var num:uint = event.target.name;
    			//現在の画像以外の場合画像をロード
    			if (num != _currentNum) {
    				var imgLoader:Loader = new Loader();
    				imgLoader.load (new URLRequest(_imgList[num]));
    				imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgloadComp);
    				_currentNum = num;
    			}
    		}
    
    		//イメージロード完了
    		function imgloadComp(event:Event):void {
    			//古い画像の削除(imgContainerの子要素を全て削除)
    			while(_imgContainer.numChildren > 0){
    				_imgContainer.removeChildAt(0);
    			}
    			//新しい画像の配置
    			_imgContainer.addChild(event.target.loader);
    		}
        }
    }
    

    【13~30行目】
    プロパティ宣言です。
    「_imgList」「_thumList」XMLから読み込んだ文字列を入れる配列。
    「_thum」はサムネイルのローダーを入れる配列。
    「_imgContainer」大きい画像は一つなのでspriteです。
    「_currentNum」はサムネイルを押したときに現在の画像の番号を入れておく変数です。
    最初は何も選択されていないので-1にしてあります。
    【62行目】
    どのサムネイルがクリックされたか判別するためにnameプロパティに配列と同じ番号を入れておきます。
    【69行目】
    62行目で入れた番号をint型で取り出します。
    【56~63行目】
    サムネイルのロードです。
    一緒にサムネイルも並べてしまった方が簡単なのですが、画像の大きさなども動的取得したかったので、LoaderInfoイベント後に並べてます。
    【71~72行目】
    ここでサムネイルを並べてます。
    サムネイルの並び順などを変更したい場合はこの辺を変えてみてください。
    【84~89行目】
    クリックされた番号が現在の番号(_currentNum)以外だったらイメージをロードします。
    最後に「_currentNum」に現在の番号を入れます。
    【93~100行目】
    新しい画像を入れる前にいったん古い画像を削除します。
    また、画像をフェードして表示するなどのアニメーションをしたい場合この辺りに処理を書けばいいのではないかと思います。

category : ActionScript
tag :

Comments(0)Trackbacks(0)

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

category : ActionScript
tag :

Comments(0)Trackbacks(0)

2009-07-17(Fri) 09:13
【AS3.0】外部XMLファイルから情報を取得

複数の画像を扱えるようになったと思うので、今回は外部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]);
                }
            }
        }
    }
    

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

category : ActionScript
tag :

Comments(0)Trackbacks(0)

2009-06-10(Wed) 13:16
[AS3.0]複数の外部画像をまとめてローディング表示

複数の外部画像を読み込んだときまとめてローディング表示させたいときは「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);
    		}
    	}
    }

category : ActionScript
tag :

Comments(0)Trackbacks(0)

Next Page »