ONE OP IXEL

前回は読み込んだ複数の画像を左方向に永遠と移動するということをやってみましたが、
今回はFlashらしくマウスの位置によって画像の動きをコントロールできるようにしてみたいと思います。

完成イメージはこんな感じです。
[demo]

で、ソースコードです。
ちなみにXMLファイルと画像ファイルは前回のものを流用します。

package
{
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.events.TimerEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.Event;
	import flash.utils.Timer;
	import XMLloader;

	public class Main extends Sprite
	{
		//画像のサイズ
		var _imgSize:uint = 40;
		//スクロールスピード
		var _dx:Number = 15;
		//画像の間隔
		var _interval:uint = 20;
		//ステージサイズ
		var _stageW:uint;
		//ステージの中心
		var _stageCenter:Number;
		//外部読み込みの関係
		var _loaderList:Array = new Array();
		var _XMLLoader:XMLloader;
		var _XML:XML;
		//画像URL格納する配列
		var _imgList = new Array();

		public function Main() {
			//XMLを読み込む
			_XMLLoader = new XMLloader("load.xml");
			_XMLLoader.addEventListener(XMLloader.LOAD_COMPLETE, onXMLloaded);
		}

		function onXMLloaded(event:Event):void {
			//ステージサイズを入れる
			_stageW = this.stage.stageWidth;
			//ステージの中心までのサイズ
			_stageCenter = _stageW / 2;

			//ロードしたXMLを取得
			_XML = _XMLLoader.getXML();
			//XMLの画像URLを_imgListに入れる
			for each (var item:XML in _XML.photo) {
				_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);
			}

			//ループ用タイマー
			var timer:Timer = new Timer(33);
			timer.addEventListener(TimerEvent.TIMER, loop);
			timer.start();  //タイマー開始
		}

		//ループ処理
		public function loop(event:Event):void {
			//xvec（移動する方向）マウスがステージの中心より左だったらマイナス、右だったらプラス
			var xvec:Number =  (_stageCenter - mouseX) / _dx;

			//画像の数分繰り返し
			for (var i:uint = 0; i < _loaderList.length; i++) {
				//xvec方向に移動
				_loaderList[i].x += xvec;

				//左の画面外に出たら一番右に移動
				if (_loaderList[i].x < -(_imgSize + _interval) && xvec < 0) {
					_loaderList[i].x += (_imgSize + _interval) * _loaderList.length;
				}

				//右の画面外に出たら一番左に移動
				if (_loaderList[i].x >= (_imgSize + _interval) * (_loaderList.length - 1) && xvec >= 0) {
					_loaderList[i].x -= (_imgSize + _interval) * _loaderList.length;
				}
			}
		}
	}
}

【14～29行目】
画像サイズとか間隔とかをここで指定してます。
ちなみにスクロールスピードは小さいほど速くなります。

【38～41行目】
ステージサイズの取得と半分にしてステージの中心を取得しています。
コンストラクタでやるとIEではなぜか取得できないのでXMLの読み込み後に取得しています。

【70行目】
ここで移動方向とスピードを決めてます。
ステージの中心から現在のマウスの位置を引けば、プラスかマイナスが出ますね。
そのままでは速すぎるので適当な数字で割ってます。

【78～80行目】
画面左から外に出たら配列の一番後ろに移動させています。
0にすると画像が見えている状態で消えてしまうので-（画像サイズ+間隔）で完全にステージから出たら処理するようにします。
またこのままだと、右画面に出たときのの処理とバッティングしておかしな動作になってしまうので
「xvec」がマイナス（左方向）だった場合のみ動作するようにします。

【83～85行目】
今度は右方向です。
これは逆にするだけですね。
ただ左は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) {
				//画像の最後の配列のｘから画像分プラス
				event.target.x = _loaderList[_loaderList.length - 1].x + (_imgSize + _interval) * event.target.name;
			}
		}
	}
}

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