Detecting mouse gestures in Flash with AS3

In computing, a pointing device gesture or mouse gesture is a way of combining pointing device movements and clicks which the software recognizes as a specific command.

Pointing device gestures can provide quick access to common functions of a program. They can also be useful for people who have difficulties typing on a keyboard.

For example, in a web browser, the user could navigate to the previously viewed page by pressing the right pointing device button, moving the pointing device briefly to the left, then releasing the button.

(Source: Wikipedia)

What I am try to do is a quick and simple AS3 script able to recognize mouse gestures.

I always start describing the idea and the script, then showing the result.

Today, I’ll start from the result:

As you can see the movie contains four quadrants.

Upper left quadrant: This is the quadrant where you should draw with the mouse: press mouse button and draw while keeping the mouse pressed. As you can see, the blue line represent your mouse movements

Upper right quadrant: The red line represents your filtered mouse movement. I don’t want to keep track of every short movement, so I am showing only movements larger than 20 pixels

Lower left quadrant: The green line represents the evolution of the filtered mouse movement, limiting the possible directions to eight: up, down, left, right and the diagonals

Lower right quadrant: A textual representation of the green line, removing duplicate movements. I mean something like “left left left right” will became “left right”.

Now you can see the code… without comments as it’s just some canvas drawings and I need to add some features during next days.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.text.TextField;
	public class gesture extends Sprite {
		public var drawing:Boolean=false;
		public var freemouse:Sprite=new Sprite();
		public var stepmouse:Sprite=new Sprite();
		public var dirmouse:Sprite=new Sprite();
		public var the_grid:grid=new grid();
		public var px,py,px2,py2:int;
		public var directions:TextField=new TextField();
		public var latest_direction:Number;
		public function gesture():void {
			addChild(the_grid);
			addChild(freemouse);
			addChild(stepmouse);
			addChild(dirmouse);
			addChild(directions);
			stepmouse.x=250;
			dirmouse.y=200;
			directions.x=250;
			directions.y=200;
			directions.height=200;
			addEventListener(Event.ENTER_FRAME,on_enter_frame);
			stage.addEventListener(MouseEvent.MOUSE_DOWN,on_mouse_down);
			stage.addEventListener(MouseEvent.MOUSE_UP,on_mouse_up);
		}
		public function on_mouse_down(e:MouseEvent):void {
			if (! drawing) {
				directions.text="";
				latest_direction=-1;
				drawing=true;
				freemouse.graphics.clear();
				freemouse.graphics.lineStyle(1,0x0000ff);
				freemouse.graphics.moveTo(mouseX,mouseY);
				stepmouse.graphics.clear();
				stepmouse.graphics.lineStyle(1,0xff0000);
				stepmouse.graphics.moveTo(mouseX,mouseY);
				dirmouse.graphics.clear();
				dirmouse.graphics.lineStyle(1,0x00ff00);
				dirmouse.graphics.moveTo(mouseX,mouseY);
				px=px2=mouseX;
				py=py2=mouseY;
			}
		}
		public function on_mouse_up(e:MouseEvent):void {
			drawing=false;
		}
		public function on_enter_frame(e:Event):void {
			if (drawing) {
				freemouse.graphics.lineTo(mouseX,mouseY);
				var dx=px-mouseX;
				var dy=py-mouseY;
				var distance:Number=dx*dx+dy*dy;
				if (distance>400) {
					stepmouse.graphics.lineTo(mouseX,mouseY);
					var angle:Number=Math.atan2(dy,dx)*57.2957795;
					var refined_angle:Number;
					var string_dir:String;
					if (angle>=22*-1&&angle<23) {
						refined_angle=0;
						string_dir="Left\n";
					}
					if (angle>=23&&angle<68) {
						refined_angle=Math.PI/4;
						string_dir="Up Left\n";
					}
					if (angle>=68&&angle<113) {
						refined_angle=Math.PI/2;
						string_dir="Up\n";
					}
					if (angle>=113&&angle<158) {
						refined_angle=Math.PI/4*3;
						string_dir="Up Right\n";
					}
					if (angle>=135||angle<157*-1) {
						refined_angle=Math.PI;
						string_dir="Right\n";
					}
					if (angle>=157*-1&&angle<112*-1) {
						refined_angle=- Math.PI/4*3;
						string_dir="Down Right\n";
					}
					if (angle>=112*-1&&angle<67*-1) {
						refined_angle=- Math.PI/2;
						string_dir="Down\n";
					}
					if (angle>=67*-1&&angle<22*-1) {
						refined_angle=- Math.PI/4;
						string_dir="Down Left\n";
					}
					px2-=Math.sqrt(distance)*Math.cos(refined_angle);
					py2-=Math.sqrt(distance)*Math.sin(refined_angle);
					if (refined_angle!=latest_direction) {
						directions.appendText(string_dir);
						latest_direction=refined_angle;
					}
					dirmouse.graphics.lineTo(px2,py2);
					px=mouseX;
					py=mouseY;
				}
			}
		}
	}
}

Now you are almost ready to use mouse gestures in your code… you just should add some Levenshtein distance adjustment and you’re done… I’ll show you how to do this next time. Do you already have a clue?

Download the source code.

Rate this post: (6 votes, average: 5.00 out of 5)

 Loading ...

If you found this post useful, please consider a small donation.

11 Responses

1. Pool Building Block | abc kids games says:

   July 5, 2010 at 5:29 pm

   [...] Detecting mouse gestures in Flash with AS3 – Emanuele Feronato [...]

   Reply
2. AL says:

   July 5, 2010 at 6:10 pm

   Thanks for the simple and yet very useful demonstration, Emanuele.
   I’ve been trying to find a good way to code for mouse direction detection for some time now, so this is very timely.

   Reply
3. Wilson Silva says:

   July 5, 2010 at 6:51 pm

   No way! You’re are the master!

   Reply
   • Nathan says:

     July 5, 2010 at 8:35 pm

     But your grammar isn’t.

     Reply
4. Mike says:

   July 5, 2010 at 7:26 pm

   Awesome post, will be closely looking forward to the next part.

   Reply
5. Pedram says:

   July 5, 2010 at 11:20 pm

   very nice.
   thanks for this good point.

   Reply
6. phil says:

   July 6, 2010 at 1:18 am

   very nice, i wonder if its possible to use 10.1 multitouch support to detect mouse gestures. http://theflashblog.com/?p=2118

   Reply
7. MC says:

   July 6, 2010 at 1:38 am

   it looks useful for iphone apps

   Reply
8. Monkios says:

   July 6, 2010 at 9:36 pm

   Nice !

   When will a clone of the magics in Black and White come out ?

   Reply
9. Josué Palma Blog » Detectar gestos del mouse en Actionscript 3 says:

   July 13, 2010 at 11:19 am

   [...] http://www.emanueleferonato.com/2010/07/05/detecting-mouse-gestures-in-flash-with-as3/ [...]

   Reply
10. jose says:

    July 24, 2010 at 8:24 pm

    incredible post maybe now i can make my like black and white game lol already working in a like age of empires game. Love your blog i would like to make one of my own can you give me some tips on how to.

    Reply