GestureEvent Listeners - Multiple Listeners

From GestureWorks Tutorials
Jump to: navigation, search

Logo open exhibits.png

 

Contents

Introduction

As3 2.jpeg

Method 1: Manual GestureEvent Control Using AS3 & GML

In this example tutorial we are going to use actionscript to add a series of (GML defined) multitouch gestures to a touch object and manage gesture events using the traditional event listener/handler model.

This tutorial requires the Open Exhibits SDK.

Download Tutorial Files


 

How to Add Multiple GML Defined Gesture Listeners with ActionScript

As in previously shown examples TouchSprites can be constructed and display properties set in much the same way as a Sprite or MovieClip. For example:

  1. var ts1:TouchSprite = new TouchSprite()
  2.     var Loader1:Loader = new Loader();
  3.         Loader1.load(new URLRequest("library/assets/lizzard1.jpg"));
  4.         Loader1.contentLoaderInfo.addEventListener(Event.COMPLETE, onloadComplete);
  5.     ts1.addChild(Loader1);
  6.                
  7.     ts1.x = 100;
  8.     ts1.y = 200;
  9.     ts1.rotation = -20;
  10.     ts1.scaleX = 0.8;
  11.     ts1.scaleY = 0.8;

This creates a new TouchSprite called “ts1” then positions, rotates and scales it on stage. Once the bitmap is loaded it is added to the touchSprite re-positioned using the width and height so that it’s registration point is now in the middle of the TouchSprite.

  1. private function onloadComplete(event:Event):void
  2. {
  3.     event.target.loader.x = -event.target.width / 2;
  4.     event.target.loader.y = -event.target.height / 2;
  5. }

The first step in adding touch interaction to touch object is the local activation of all required gestures. To do this we add the gesture (as identified by the “gesture_id” in the GML root document) to the gestureList property associated with the touch object. For example (using the in-line method for adding items to an object list):

  1. ts1.gestureList = { "n-drag":true, "n-scale":true, "n-rotate":true };

This adds the “n-drag”, “n-scale” and the “n-rotate” gestures** to the touch object effectively activating matching, analysis and processing for the three gestures. These gestures are uniquely defined in the root GML document “my_gestures.gml” located in the bin folder of the application. An example GML description of the gestures in this tutorial can be found at GestureML.

This enables gestureEvents to be continually* dispatched when a gesture is recognized on the touch object. At this stage if listeners and handlers are not added to the touch object nothing is done with the gestureEvents. To actively monitor gestureEvents on the touch object we will need to add event listeners.

  1. ts1.addEventListener(GWGestureEvent.DRAG, gestureDragHandler);
  2. ts1.addEventListener(GWGestureEvent.ROTATE, gestureRotateHandler);
  3. ts1.addEventListener(GWGestureEvent.SCALE, gestureScaleHandler);

In this example we will animate the touch object so that it appears to be “physically” manipulated when touched. When groups of touch points are placed on a touch object they are analysed as a group or “cluster” for geometric properties. These cluster properties are then processed and changes in the values returned as “deltas”. For example when two or more touch points rotate around a common center the change in orientation “rotate_dtheta” is calculated, processed and returned in the form of a “ROTATE” gesture event.

When a GWGestureEvent.ROTATE event is detected the function “gestureRotateHandler” is called .This directly controls what is done with the event. For example:

  1. private function gestureRotateHandler(event:GWGestureEvent):void
  2. {
  3.     event.target.rotation += event.value.rotate_dtheta;
  4. }

Each time the gesture rotate handler is called it adds the event value “rotate_dtheta” to the current value of the touch object rotation. This has the effect of dynamically rotating the touch object as the touch point cluster rotates.

A handler is also added to manage what happens when a “SCALE” gesture is detected:

  1. private function gestureScaleHandler(event:GWGestureEvent):void
  2. {
  3.     event.target.scaleX += event.value.scale_dsx;
  4.     event.target.scaleY += event.value.scale_dsy;
  5. }

This multiplies the current scale of the touch object by the deltas “scale_dsx” and “scale_dsy” which represent the change in the separation of the touch point cluster in the x and y direction.

Additionally a handler is added to manage the “DRAG” gesture event:

  1. private function gestureDragHandler(event:GWGestureEvent):void
  2. {
  3.     event.target.x += event.value.drag_dx;
  4.     event.target.y += event.value.drag_dy;
  5. }

This handler adds the change in the position of the touch point cluster “drag_dx” and “drag_dy” to the current position of the touch object.

In this example three gestures are attached to the touch object “ts1”, each one can dispatch independent events in the same frame. If all gesture events are detected at the same time it results in a blended interaction that allows the object to be dragged, rotated and scaled simultaneously. Since the registration point of the TouchSprite is in the center, all transformations occur around the center of the image**.

One of the powerful new features in GestureWorks is the ability of the “gesture analysis engine” to actively fold multiple property calculations into a single compressed operation. This means that when multiple gestures are added to a touch object, multiple cluster properties can be acquired in parallel while avoiding redundant calculations. The result is that all CPU resources used for managing gesture analysis and display object transformations are fully optimized within a flexible architecture.

  • GestureEvents are continually dispatched if the match conditions are continually met. If no touch points are detected on a touch object no gesture events are fired. This ensures dormant touch objects do not require unnecessary processing.
  • To learn more about transformations about a user defined point see: Using Affine Transformations for Manipulation Gestures.


NOTE: In addition to the actionscript methods used in this tutorial there are new “Native” (CML) methods which allow the construction of new touch objects using a secondary external XML document in addition to the GML document.


Other Tutorials In The "How to add a GestureEvent Listener" Series

These tutorials cover setting up TouchObjects with GestureEvent Control:

Method 1, Part 1: Simple Manual GestureEvent Control Using AS3 & GML
Method 1, Part 2: Complex Manual GestureEvent Control Using AS3 and GML
Method 1, Part 3: Manual TouchObject & GestureEvent Control Using AS3 and GML

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox