ActionScript Learning 110613

6.13.2011

四角形のMCのどの方向からマウスオーバーしたか調べる。

四角形のMCでマウスオーバーイベントを設定する際、どの方向からマウスオーバーしたか(4辺のうちどの辺を通ったか)を調べる必要があったので覚書しておく。

四角形を対角線で分けて、各斜辺とマウスの座標から内積をもとめて判別している。工夫すれば四角形以外の多角形でも応用ができると思う。

SAMPLE VIEW CODE

package {
	
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	import flash.ui.*;
	

	public class NMain extends MovieClip {
		
		//-------------------------------------------------------------------------------- Properties

		private var _this:*;
		private var _stage:Stage;
		
		
		//-------------------------------------------------------------------------------- Constractor
		
		public function NMain() {
			
			_this = this;
			_stage = stage;
			
			_stage.scaleMode = StageScaleMode.NO_SCALE;
			_stage.align = StageAlign.TOP_LEFT;
			
			Init();
		}
		
		
		//-------------------------------------------------------------------------------- Function
		 
		/**
		 * initialize
		 */
		public function Init():void {

			setup();
		}
		
		/**
		 * setup
		 */
		private var basewid:Number;
		private var basehei:Number;
		private var point_c:Point;
		private var point_lt:Point;
		private var point_rt:Point;
		private var point_rb:Point;
		private var point_lb:Point;
		
		private function setup():void {
			
			basewid = 260;
			basehei = 260;			
			
			point_c = new Point(basewid/2, basehei/2);
			point_lt = new Point(0, 0);
			point_rt = new Point(basewid, 0);
			point_rb = new Point(basewid, basehei);
			point_lb = new Point(0, basehei);
			
			setup_main();
			
			setup_triangles();
		}
		
		/**
		 * setup main
		 */
		private var _main:MovieClip;
		
		private function setup_main():void {			
	
			_main = new MovieClip();
			var _base = new MovieClip();
			var g = _base.graphics;
			g.lineStyle(2, 0xFFFFFF, 0);
			g.beginFill(0xFFFFFF, 0);
			g.drawRect(0, 0, basewid, basehei);
			g.endFill;
			
			_main.addChild(_base);
			
			_main.x = Math.round((_stage.stageWidth - basewid) / 2);
			_main.y = Math.round((_stage.stageHeight - basehei) / 2);
			
			_this.addChild(_main);
			
			_main.addEventListener(MouseEvent.MOUSE_OVER, main_mouseover);
		}
		//
		private function main_mouseover(eo:* = null):void {
			
			var enterdir = getenterdirection();
			
			//trace("enterdir:" + enterdir);
			
			var col_t = 0xFFFFFF;
			var col_r = 0xFFFFFF;
			var col_b = 0xFFFFFF;
			var col_l = 0xFFFFFF; 
			
			if(enterdir == "top") col_t = 0x66B8FF;
			if(enterdir == "right") col_r = 0xCC66FF;
			if(enterdir == "bottom") col_b = 0xFF66CC;
			if(enterdir == "left") col_l = 0xFF7A66;
			
			
			drawtriangle(_triangle_t, point_lt, point_rt, col_t);
			drawtriangle(_triangle_r, point_rt, point_rb, col_r);
			drawtriangle(_triangle_b, point_rb, point_lb, col_b);
			drawtriangle(_triangle_l, point_lb, point_lt, col_l);
		}

		
		/**
		 * setup base
		 */
		private var _triangle_t:MovieClip;
		private var _triangle_r:MovieClip;
		private var _triangle_b:MovieClip;
		private var _triangle_l:MovieClip;
		
		private function setup_triangles():void {			
			
			_triangle_t = new MovieClip();
			drawtriangle(_triangle_t, point_lt, point_rt);
			_main.addChildAt(_triangle_t, 0);
			
			_triangle_r = new MovieClip();
			drawtriangle(_triangle_r, point_rt, point_rb);
			_main.addChildAt(_triangle_r, 0);
			
			_triangle_b = new MovieClip();
			drawtriangle(_triangle_b, point_rb, point_lb);
			_main.addChildAt(_triangle_b, 0);
			
			_triangle_l = new MovieClip();
			drawtriangle(_triangle_l, point_lb, point_lt);
			_main.addChildAt(_triangle_l, 0);
		}
		//
		private function drawtriangle(tgtmc:MovieClip, pt1:Point, pt2:Point, colorfill:Number = 0xFFFFFF, colorline:Number = 0xCCCCCC):void {

			
			var g = tgtmc.graphics;
			g.clear();
			g.lineStyle(1, colorline);
			g.beginFill(colorfill);
			g.moveTo(pt1.x, pt1.y);
			g.lineTo(point_c.x, point_c.y);
			g.lineTo(pt2.x, pt2.y);
			g.lineTo(pt1.x, pt1.y);
			g.endFill();
		}
		
		/**
		 * get enter direction
		 */
		private function getenterdirection():String {
			
			var mpoint = new Point(_main.mouseX, _main.mouseY);
			
			var check_lt = scalarproduct(mpoint, point_lt, point_c);
			var check_rt = scalarproduct(mpoint, point_rt, point_c);
			var check_rb = scalarproduct(mpoint, point_rb, point_c);
			var check_lb = scalarproduct(mpoint, point_lb, point_c);
			/*
			trace("check_lt:" + check_lt);
			trace("check_rt:" + check_rt);
			trace("check_rb:" + check_rb);
			trace("check_lb:" + check_lb);
			trace("\n");
			*/
			if(check_lt && !check_rt && !check_rb && check_lb) return "top";
			
			else if(check_lt && check_rt && !check_rb && !check_lb) return "right";
			
			else if(!check_lt && check_rt && check_rb && !check_lb) return "bottom";
			
			else if(!check_lt && !check_rt && check_rb && check_lb) return "left";
			
			return null;
		}
		//
		private function scalarproduct(checkpoint:Point, pt1:Point, pt2:Point):Boolean {
			
			var vx = pt1.x - pt2.x;
			var vy = pt1.y - pt2.y;
			
			var tmpvx = vx;
			vx = -vy;
			vy = tmpvx;
			
			var dx = checkpoint.x - pt1.x;
			var dy = checkpoint.y - pt1.y;
			
			var doc = vx * dx + vy * dy;			

			if(doc > 0) return true;
			else return false;
		}

	}
}




category : ActionScript / Flash

Demonstrations

Feature Samples

Author

虹村 マキオウ (nizimura makiou)

猫と太極拳を愛する横浜在住のフリーランスクリエイターです。

logo

Demo and Sample

Category