Support & Tutorials » Multitouch Tap Tutorial

Tutorial: Multitouch Tap

Introduction

Learn how to create touchable buttons using the Touch Tap event. In this tutorial, you will learn to create a custom application using the TouchSprite class, which allows you to create objects in Flash that respond to Touch Tap 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”. This tells Flash which script to include when extending “Main”.

Importing Flash Libraries

Since we are going to be working with sound, we need to import Flash media sound assets. This allows Flash to correctly reference and retrieve all the object resources that will be needed to load and control sounds.

3 4	import flash.media.sound; import flash.media.soundChannel;

As with other loader classes in flash, the sound loader class uses the URLRequest class so the library files for that class must be imported.

5	import flash.net.URLRequest;

Importing GestureWorks Libraries

In this example, we are going to be using touch events, so we will need to import the TouchEvent class into our file. As with importing other packages, importing the TouchEvent package provides a reference to all available touch analysis modules via their class name.

7	import gl.events.TouchEvent;

Importing the “Application” package instantiates libraries 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”.

8	import id.core.Application;

In this example, we will be placing an image on stage. To do this, we import the TouchSprite class libraries. TouchSprite builds multitouch onto the Sprite class, which is a display-level 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.

9	import id.core.TouchSprite;

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.

11	public class Main extends Application {

In this example, we are going to play a short mp3 file to make a snare sound each time our container object is tapped. To do this we must first assign the sound to a SoundChannel so that we can monitor and control the sound dynamically.

12	private var channel:SoundChannel;

We then declare a new sound object. Using private vars in this way allows access to the sound object by functions outside of the root constructor “Main()“.

13	private var mysound:Sound;

The document class should be defined as public so that it can be called (and instances created) from outside the package.

15	public function Main() {

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.

16	var container = new TouchSprite();

Next we’ill nest an instance of the library object “snare” inside the container TouchSprite so that it becomes “touchable”. An alternative method to nesting is to “extend” TouchSpirte directly.

17	container.addChild(snarepad);

Attach a TouchEvent listener to your TouchSprite() object. This calls the function “snare_Tap()” each time a Touch_TAP event is detected on “container”.

18	container.addEventListener(TouchEvent.TOUCH_TAP, snare_Tap);

Add the touchSprite object to the stage (adding the “container” to the “Main” class automatically adds the object to the display hierarchy).

19	addChild(container);

Then we are going to load the mp3 file into the sound object. Since we are using a very short sound, the mp3 file will load quickly. Once the file has loaded, it is held in memory and can be played repeatedly without having to reload it.

21
22

mysound = new Sound(new URLRequest("snare.mp3"));
}

We want the short mp3 file to play each time the hit area is tapped. To do this we construct a new function, which is called each time a TOUCH_TAP event is dispatched from the “container” TouchSprite.

24
25

private function snare_Tap(event:TouchEvent):void
{

Inside our snare_Tap() function, we can use the sound channel to control how the sound object is played. In this example, the mp3 file is played from the beginning each time (when no parameters are entered into the play() method, the start time is set to zero by default).

26
27

channel = mysound.play();
}

Note: This method of playing simple sounds each time a hit area is tapped can be used to create multiple buttons. These buttons can react to play multiple independent sounds or play the same sound as each event uses a new channel. In this way a simple multiuser drum machine can be made.

Complete Example Code

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

package {

import flash.media.sound;
import flash.media.soundChannel;
import flash.net.URLRequest;

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

public class Main extends Application {
private var channel:SoundChannel;
private var mysound:Sound

public function Main() {
var container = new TouchSprite();
container.addChild(snarepad);
container.addEventListener(TouchEvent.TOUCH_TAP,snare_Tap);
addChild(container);

mysound = new Sound(new URLRequest("snare.mp3"));
}

private function snare_Tap(event:TouchEvent):void
{
channel = mysound.play();
}

}
}

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.

Tap

Tap is the equivalent of a mouse click event. To register a tap event, a finger must touch down on the screen and then lift up again within a limited time period and a limited spatial area on the surface. This ensures that the touch registered is actually a tap.