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: 1 Star2 Stars3 Stars4 Stars5 Stars (13 votes, average: 5.00 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 18 comments

  1. Pool Building Block | abc kids games

    on July 5, 2010 at 5:29 pm

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

  2. AL

    on 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.

  3. Wilson Silva

    on July 5, 2010 at 6:51 pm

    No way! You’re are the master!

  4. Mike

    on July 5, 2010 at 7:26 pm

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

  5. Nathan

    on July 5, 2010 at 8:35 pm

    But your grammar isn’t.

  6. Pedram

    on July 5, 2010 at 11:20 pm

    very nice.
    thanks for this good point.

  7. phil

    on 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

  8. MC

    on July 6, 2010 at 1:38 am

    it looks useful for iphone apps

  9. Monkios

    on July 6, 2010 at 9:36 pm

    Nice !

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

  10. Josué Palma Blog » Detectar gestos del mouse en Actionscript 3

    on July 13, 2010 at 11:19 am

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

  11. jose

    on 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.

  12. kazarus

    on November 9, 2010 at 3:36 am

    thanks

  13. chinnabbai

    on December 22, 2010 at 3:00 pm

    i am using flex builder 4 . How to run in web application. please help me

  14. Dallas

    on December 22, 2010 at 6:29 pm

    great stuff!

    I am no where near an expert so you can trash my comment if needed.

    Would it be better to start the onEnterFrame listener after the mousedown is detected? Would this save memory?

  15. kem

    on January 23, 2011 at 4:09 pm

    Oh… It have 8 types of moving? It’s bad for me

  16. kunal

    on February 7, 2011 at 6:30 am

    Hi,

    i was just thinking that can we make a page like when we swipe our mouse cursor right to left the pages slides & changes to the next…i m only thinking this kind of stuff cuz i’m not the master of AS 3.0…:(

  17. joyce

    on May 3, 2011 at 1:15 am

    instead of drawing in real time, is there a way to save the coordinates of the mouse movements as an array and to draw them later? what kind of code would do that?

  18. Arulmurugan

    on October 24, 2011 at 7:12 am

    Hi Emanuele,

    Great post.

    Thanks,
    Arul