New! Unlimited audio, video & web asset downloads! Unlimited audio, video & web assets! From $16.50/m
Advertisement
  1. Code
  2. ActionScript
Code

How to Add Mouse Gesture Control to Your Flash Projects: Single-Stroke Gestures

by
Difficulty:IntermediateLength:LongLanguages:

I recently bought my first Bamboo, a Wacom tablet that recognises letters from shapes drawn with the stylus. It tickled memories of my first experience with gesture-controlled application: using mouse gestures, web browsers such as Maxthon (and later Opera) allowed users to quickly move back and forth through webpages in the history, switch between different tabs, and so on. I was facinated by its neat user interface, as it takes away traditional mouse clicks. Of course, sophisticated gesture-controlled devices such as the Kinect, iPad and iPhone are now available - but it all started with the good old PC. In this tutorial, you'll learn how to develop a photo gallery that recognises singular mouse gestures.


Final Result Preview

Let's take a look at the final result we will be working towards. To pan the photo galley in the four main directions, click and drag the mouse in the relevant direction. To scale a photo, drag the mouse South-East to scale up and drag the mouse North-West to scale back to the default size.

(Note: this doesn't snap to center the photo when panning; it's sensitive to the length of the line that you draw.)


Step 1: Tutorial Flow

Here's what you'll learn in this tutorial, and the order in which you'll learn it:

  • Vector interpretation of mouse gestures
  • Hard coded implementation of mouse gestures
  • Class to detect singular mouse gestures
  • Sample application (photo gallery) using mentioned class

Step 2: Gesture Detection: Vector Analysis

Image showing 8 main directions for mouse to detect.

It is important to understand the vector math involved in detecting mouse gestures. Having understood detection of a single direction, one can easily extend the understanding to apply to all eight directions.

The Flash presentation below shows steps of detecting a single mouse gesture to due right. To scroll through frames in the Flash presentation below, (mouse down - mouse move - mouse up) in any of the following directions:

  • Eastward to scroll frame forward
  • Westward to scroll frame backward
  • Northward to jump to last frame
  • Southward to jump to first frame

Step 3: Gesture Detection: Angle Alleviations

Implementing Step 2 will be easy. However, chances are 90% that users' gestures will fail. Diagram below shows commonly commited gestures (middle); they seldom comply with a rigid Vector pointing to due right (left). Thus, it's better to give alleviation for gesture inaccuracies (right).

Concept of angle alleviation for gesture detection.

For example, we can give an alleviation of 30° on both sides of the Vector pointing due right so that angle of any gesture's Vector that falls within that range will be accepted and interpreted as a gesture to due right.

Implementation of angle alleviation for gesture detection.

Step 4: Gesture Detection: Sample Implementation

Below is an implementation of gesture detection to due right. Press down on mouse, move mouse to the right, and release mouse within the Flash presentation below. Try to gesture a little off the absolute right to check out the implementation of alleviation.


Step 5: Variables

Lets look at the variables on our hard-coded implementation in Step 4. I've highlighted the important Vector2D variables. Take note of comments I've placed at the end of each variable.


Step 6: Hard-Coded Implementation

I assume you already know the basics of putting a TextField into your project so I shall focus on the ActionScript implementation of mouse gesture. The implementation as indicated below is heavily commented. Important Vector calculations are highlighted as well. I encourage readers to examine these comments, especially those highlighted, to understand operations at different events at runtime.

(The Vector2D class is the same one I've used in previous tutorials, like this one.)


Step 7: Summary

For clarification purposes, here's a summmary of the hard-coded implementation:

  1. Upon mouse down, begin gesture detection.
  2. On mouse move, update the latest location of mouse pointer.
  3. On mouse up, evaluate the whole gesture since (1).

Step 8: Gesture Angle Alleviations

Making an accurate gesture using a mouse is hard. It's hard to make straight lines (East, South, West, North) but it's even harder to make diagonal lines (South-East, South-West, North-West, North-East) because we have to estimate that extra 45°. So I have given diagonal lines more alleviations than straight lines. Notice the larger grayed angle for diagonal Vector compared to that of the straight Vector.

Alleviations for error on diagonals larger than straights.

Step 9: Gesture Sensitivity

 I'd to point out another issue - sensitive gestures. Sensitive gestures identifies gesture directions when mouse pointer makes the slightest shifts in location, even to adjacent pixels. Diagram below illustrate scenarios of sensitive gestures.

Sensitive mouse gestures.

If the user changes his mind after mouse press and mouse releases immediately, a gesture will still be detected if his pointer makes a slightest move to the adjacent pixels. We should allow users to undo gesture detection. In this tutorial, I've enforced a minimum magnitude the Vector of current gesture must exceed to be valid. I've included a diagram as below.

Minimum magnitude enforced on valid gesture.

Step 10: Class Variables

In order to detect singular mouse gestures I have implemented MGesture. Do download and examine this ActionScript file. I shall go through its class variables first, then the class methods.

Variable Datatype Purpose
mainBox DisplayObjectContainer Container from which gestures are detected
directions Vector. Vectors of standard directions
_deviationFromMains Number Angle alleviation allowed of gesture Vector from 4 main directions (0~3 in directions)
_deviationFromDiagonals Number Angle alleviation allowed of gesture Vector from 4 diagonal directions (4~7 in directions)
_minDist Number Minimum magnitude on current gesture Vector to be valid
_earlier Vector2D Location of first click
_latter Vector2D Continuous pointer location after first click

Below is the code implementation of class variables. I've allowed a deviation of 10° from main directions. For example, -10°-10° is considered due East, -80°-100° is considered due South, etc. I've also allowed a deviation of 30° from diagonal directions. So a Vector with orientation between 15°-75° will be considered due South-East, and so on. Also, the minimum magnitude to exceed is 10px.


Step 11: Numbering Directions

You may have guessed it already from reference to code implementation of directions. For clarification, here are the main directions' integer representations.

Direction numbering.

Step 12: Class Methods & Property

Below are class methods for MGesture.

Methods Input Output Description
MGesture Container in which gestures are detected void Class initiation, setting container from which gestures are detected
start void void Variables for gesture detection (_earlier, _latter) initiates
update void Current gesture's Vector (without considering _minDist), Vector2D Updates _latter and returns current gesture Vector (_earlier to _latter)
validMagnitude void Current gesture's Vector (fulfills minimum magnitude of _minDist), Vector2D Checks if current gesture's magnitude is more than _minDist
evalDirections void Integer indicating direction, int Evaluates current gesture by comparing its Vector to those in directions

Step 13: Methods

The essential methods tabled in Step 12 are all documented here. Do read through the comments.


Step 14: Photo Gallery

Now that the MGesture class is set, we shall proceed with an demo application (photo gallery) of it. I have included a source file here. Do download and follow along. First of all, get all images into the "lib" folder in your existing project. Images I've used here are courtesy of my wife and daughter.

Placing images into lib folder in project.

Step 15: Embed Images

Create a new Actionscript class and name it PhotoView. We shall use these images to construct our gallery.

  1. Generate embed code of images. They will be recognised as a generic Class object.
  2. Cast Class into Bitmap objects so that we can manipulate it further.
  3. Put all these Bitmap objects in a Vector array for easy selection later.
Generate embed code in PhotoView.

Step 16: Display List Management

It is important to clarify here the management of PhotoView's display list. I've included a Flash presentation here. To use it, make a gesture to right or left. For further details, refer to Step 2.


Step 17: Positioning Image

In the PhotoView's constructor, we initiate all necessary display objects and position them into place. Plus, we initiate MGesture and attach events listeners to start gesture detection. I've highlighted the event listeners. Their details are explained over the next two steps.


Step 18: Selecting Image to Scale

Line 99 highlighted is not related to detection of gesture, but merely to select image for scaling & placing it on top of all other images.


Step 19: Start, End and Evaluate Mouse Gesture

First function below is executed upon mouse down. The second is executed upon mouse up. I've highlighted start() and evalGesture() as well as evant listeners.


Step 20: Animating the Panel and Images

Once the directions has been detected, animation will begin. Depending on the gesture made, the whole panel may move in four directions or one single image may enlarge or shrink.


Step 21: Publish PhotoView

Now all is set. You may finally publish your work by pressing Ctrl + Enter on FlashDevelop. Again. here's a piece of the final product.


Conclusion

This is not the end of it. In the next part, we shall look at detection of a gesture sequence, which will be even more interesting than this part (which really just showed the basics). Do drop comments and let me know if MGesture had been useful to you, as well as any bugs, if you encountered any. Finally, terima kasih for the time reading. I'm hoping to entertain my fellow readers in Part 2.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.