Emanuele Feronato

Talking about Actionscript 3 and Flash.

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.

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.