Support & Tutorials » Multitouch Drag Tutorial

Tutorial: Multitouch Drag

Introduction

Learn how to create a simple application that enables multi-user multitouch dragging using Touch Up and Touch Down events. In this tutorial, you will learn how to attach TOUCH_DOWN and TOUCH_UP event listeners on display objects and control their position using dynamic output from captured events. This tutorial requires Adobe Flash CS4 and GestureWorks (download a free trial).

Creating Your Document Class

The document class also known as the “Application” class is the root object class for your application. The primary purpose of the document class is to extend the main timeline; it does this in the form of a custom MovieClip. This means that all other objects in your application are placed within it.

To set the document class for your application, open mainApp.fla. Then, in the main menu, go to File > Publish Settings. In the Flash tab, select the Script “settings” button. Then, in the “Advanced Actionscript 3 Settings” window, set the “Document Class” to “Main“. Press the “OK” button and apply the changes to publishing settings.

In the main menu go to: File > New. Then in the “New Document” window, select “Actionscript File” and press the “OK” button. Save the file as “Main.as” and make sure it is saved in the same folder as your application file.

In the first line of your ActionScript file, add the following code to open a new package structure:

package {

This defines the beginning of the root package which defines the code used in your root class “Main”. It tells Flash what script to include when extending “Main”.

Importing Flash Libraries

The next thing we are going to do is import the Flash display package into the package of our root class. Essentially this allows Flash to correctly reference and retrieve all the object resources you may need to use in the display objects on stage. In this case we will only need the MovieClip class as we will be using MovieClips from the library.

2	import flash.display.MovieClip;

Importing GestureWorks Libraries:

Since we are going to be using touch events and gesture events, we will need to import these classes into our file. As with importing other packages, importing the GestureEvents package provides a reference to all available gesture analysis modules via their class name.

4	import id.core.Application;

A display level class must be set up to be used for stage objects. To do this, we import the TouchSprite class libraries. TouchSprite builds multitouch onto the Sprite class. This means that TouchSprite inherits all the properties of Sprite and adds new event targeting features that act systematically to determine multitouch event ownership at the object level.

5	import id.core.TouchSprite;

Importing the “Application” package instantises libraries for and builds a framework of control structures for managing multitouch events and methods for object tracking within Flash. To edit these settings, open “How to Customize Application.xml.”

6	import gl.events.TouchEvent;

Creating Your App:

In order to build our multitouch application, we are going to create what is essentially a custom class in Flash. We begin this process by extending the “Application” class & setting up our new class to automatically inherit a multitouch framework that will manage touch events behind the scenes.

8	public class Main extends Application {

The document class should be defined as public so that it can be called from outside the package.

10	public function Main() {

In our drag application we are going to create multiple objects that can be moved around the stage at the same time.This makes the application true multi-user multitouch. To do this we need to create an interactive touch object and loop through the process multiple times. In this example we will use a simple “for” loop to build four objects on stage.

12	for (var i=0; i<4; i++) {

The next step is to create a new TouchSprite object to hold your Sprite. To ensure that multitouch events are tracked correctly through all display levels of our applications, we must make sure that the parents of any touchable objects are of a touch class. We can use either TouchMovieClip() or TouchSprite() as the parent for any object we create. Since we won’t be using any timeline methods in this example, we can use the TouchSprite class. This instantizes a new object “container” of type TouchSprite.

14	var container = new TouchSprite();

Next we are going to create a new instance of a “coin” library object and place it inside the “container” TouchSprite.

15
16

var gw_coin = new coin();
container.addChild(gw_coin);

Set the x and y position of the container so that it is randomly placed in the stage area.

18
19

container.x = Math.random()*stage.stageWidth/2;
container.y = Math.random()*stage.stageHeight/2;

To make sure that all touch points placed over the container object are explicitly associated with that object we need to set the “blobContainerEnabled” property to true.

21	container.blobContainerEnabled = true;

Attach the TouchEvent listeners to your touchSprite() object. The first listener calls the function “startDrag_Press()” each time a TOUCH_DOWN event is detected and the second calls “stopDrag_Release()” when a TOUCH_UP event is detected.

23
24

container.addEventListener(TouchEvent.TOUCH_DOWN, startDrag_Press);
container.addEventListener(TouchEvent.TOUCH_UP, stopDrag_Release);

Add the TouchSprite to the stage.

26	addChild(container);

When TOUCH_DOWN is dispatched we want to begin dragging our object on stage. To do this we enable startTouchDrag(). This method behaves in a similar way to the startDrag() method however this touch method works by updating the position of the object every time the touch point above it moves.

30
31
32

private function startDrag_Press(e:TouchEvent):void {
e.target.startTouchDrag();
}

Now the object is being dragged around the stage we need to release the object when TOUCH_UP is dispatched. To do this we use stopTouchDrag.

34
35
36

private function stopDrag_Release(e:TouchEvent):void {
e.target.stopTouchDrag();
}

Here is the completed code for our document class. The custom class creates a series of TouchSprites each with an object from the library nested inside then randomly placed on the stage. Once placed on stage each TouchSprite can be independently dragged and dropped by up to four users.

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

package {
import flash.display.MovieClip;

import id.core.Application;
import id.core.TouchSprite;
import gl.events.TouchEvent;

public class Main extends Application {

public function Main() {

for (var i=0; i<4; i++) {

var container = new TouchSprite();
var gw_coin = new coin();
container.addChild(gw_coin);

container.x = Math.random()*stage.stageWidth/2;
container.y = Math.random()*stage.stageHeight/2;

container.blobContainerEnabled = true;

container.addEventListener(TouchEvent.TOUCH_DOWN, startDrag_Press);
container.addEventListener(TouchEvent.TOUCH_UP, stopDrag_Release);

addChild(container);
}
}

private function startDrag_Press(e:TouchEvent):void {
e.target.startTouchDrag();
}

private function stopDrag_Release(e:TouchEvent):void {
e.target.stopTouchDrag();
}
}
}

Testing Your Application

There are various ways to test your multitouch application. If you have a multitouch imput device, events can be directly streamed to your Flash application via TUIO. If you do not have a device that can output multitouch events, you can use the built-in simulator in GestureWorks. To test your app in the main menu, go to Control > Test Movie or press “Ctrl + Enter” on the keyboard. Alternatively, you can publish your application as a self-contained executable by following these steps:

In your open Flash application “myApp.fla”, go to File > Publish Settings.
Then in the Formats tab, select “Windows Projector” or “Macintosh Projector,” then press the “Publish” button.
The application will be published to your app folder; from there, you can simply double click on myApp.exe (Windows) or myApp.app (Mac) and run your multitouch application.

NOTE - To build and test these tutorials on a computer without a touchscreen display, pressing “Shift” or “Control” while clicking on an object with the mouse will create additional touch points within the simulator. To remove touch points, simply click them.