5ive™.blog

よく見るインターフェイスで、マウスを動かすだけでスクロールする動きを実装してみた。すごくシンプルに考えてみるとモーション自体のスクリプトはこの3行でいける。

percent = scrollContainer.stage.mouseX / (scrollLength - 1);
pos = (scrollLength - (scrollContainer.width + _space) - _space) * percent;
scrollContainer.x = scrollContainer.x - ((scrollContainer.x - _space - pos) / _friction);

ステージの横幅に対してマウスのx座標が何％の位置にいるのかを割り出して計算させれば意外なほどあっさり実装できる。条件分岐もしなくていいし。クラスにしてみたけど、汎用的に使うにはもうちょいチューニングが必要かも。

ScrollOver.as

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

	public class ScrollOver
	{
		private var scrollContainer:DisplayObjectContainer;
		private var scrollLength:uint;
		private var vertical:Boolean;
		private var _space:uint = 0;
		private var _friction:uint = 15;

		public function set space(value:uint):void { _space = value; }
		public function set friction(value:uint):void { _friction = value; }

		//------------------------------
		//   コンストラクタ
		//------------------------------
		public function ScrollOver(mc:DisplayObjectContainer, length:uint, vertical:Boolean = false):void
		{
			scrollContainer = mc;
			scrollLength = length;
			vertical = vertical;
		}

		//------------------------------
		//   スクロールモーション
		//------------------------------
		private function onEnter(e:Event):void
		{
			var percent:Number;
			var pos:Number;

			if (vertical == false && scrollLength < scrollContainer.width)
			{
				percent = scrollContainer.stage.mouseX / (scrollLength - 1);
				pos = (scrollLength - (scrollContainer.width + _space) - _space) * percent;
				scrollContainer.x = scrollContainer.x - ((scrollContainer.x - _space - pos) / _friction);
			}
			else if(vertical == true && scrollLength < scrollContainer.height)
			{
				percent = scrollContainer.stage.mouseY / (scrollLength - 1);
				pos = (scrollLength - (scrollContainer.height + _space) - _space) * percent;
				scrollContainer.y = scrollContainer.y - ((scrollContainer.y - _space - pos) / _friction);
			}
		}

		//------------------------------
		//   スタート
		//------------------------------
		public function start():void
		{
			scrollContainer.addEventListener(Event.ENTER_FRAME, onEnter);
		}

		//------------------------------
		//   ストップ
		//------------------------------
		public function stop():void
		{
			scrollContainer.removeEventListener(Event.ENTER_FRAME, onEnter);
		}

		//------------------------------
		//   ポジションリセット
		//------------------------------
		public function positionReset():void
		{
			scrollContainer.x = _space;
		}
	}
}

ドキュメントクラスはこんな感じ。インスタンス名がboxというmcをステージに配置しておく。boxの中身は写真を横にずらっと配置させる。縦スクロールに対応させるにはnew ScrollOver()の第3引数をtrueにする。frictionは摩擦具合。spaceはスクロールの両サイド間隔。start()メソッドでモーション開始。

Main.as

package
{
	import flash.display.Sprite;
	import flash.display.MovieClip;

	import info.five.ui.ScrollOver;

	public class Main extends Sprite
	{
		public function Main():void
		{
			//-----[横スクロールの場合]
			var so:ScrollOver = new ScrollOver(box, stage.stageWidth);

			//-----[縦スクロールの場合]
			//var so:ScrollOver = new ScrollOver(box, stage.stageHeight, true);
			so.friction = 20;
			so.space = 20;
			so.start();
		}
	}
}