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();
		}
	}
}

今更ながら知ったのでメモ。AS2でいうenabled = falseをしたくて調べたら、AS3ではもっと使い勝手が良くなっているようだ。

mouseEnabled
これはマウスイベントを受け取るかどうかを判断するプロパティ。こいつをfalseにするとマウスイベントを受け取らなくなるので、一時的にリスナーを切りたいけどremoveEventListenerするのが面倒とか、あるタイミングだけマウスに反応させたくない時に使用する。

mouseChildren
これと合わせて覚えておきたいのがmouseChildrenだ。mouseChildrenはオブジェクトの子に対してマウスが有効かどうかを判断するプロパティ。つまり親MCにぶらさがる子MCすべてのマウスイベントの伝播を止めることができる。一括してマウスイベントを受け取りたくない時に使うとかなりの手間が省ける。

mc.mouseChildren = false;
mc.mouseEnabled = false;

こうするとmc以下のオブジェクトにマウスイベントが伝わらなくなるので便利ですよと。

AS3ではMouseEventをリスナーに登録しても標準では指アイコンに変化しない。アイコンを変える時は明示的に設定してやる必要あり。

mc.buttonMode = true;
mc.useHandCursor = true;

buttonModeをtrueにしておかないとuseHandCursorが効かないのだ。ちょっとハマったのでメモ。

いまさらだけどflashでマウスホイール検知をやってみる。マックでも動くようにとexternalInterfaceでjavascriptと連携。要はアップ方向かダウン方向にホイールが回ってるかをif文で判別してFlashに返してやればよいわけ。自作スクロールクラスに組み込むと良さげ。

http://adomas.org/javascript-mouse-wheel/