This tutorial is a detailed guide for people new to Flex. If you already have experience with Flex but new to PQ Labs Multi-Touch SDK, we recommand a quick version for you. Click HERE.

Summary

In this tutorial, you will learn how to create a simple Multi-Touch in 90 seconds
To build this application you will need the following software:

• Adobe Flex Builder 3  http://www.adobe.com/products/flex
• PQ Labs Multi-Touch SDK for Flash/Flex/AIR http://multi-touch-screen.net/support.html

Please remember the installation location of PQ Labs Multi-Touch SDK as you may need some files from there.

Application Overview

Code Files

HelloWorld.mxml

Step by Step Tutorial

Step1 Create a new Flex application project and name it HelloWorld

1. Open Adobe Flex Builder 3
2. Create a new project. You can find this from  File > New > Flex Project, as show in figure

3. Name the project “HelloWorld”, and set Application type to Desktop application (runs in Adobe AIR). Click Finish

4. Flex Builder should create Here is the what final screen should look like.
5. 

Step 2 Create a subfolder named assets under src

1. Locate the Flex Navigator view. It is on top right of Flex Builder IDE window by default

2. right click src folder icon, then select New > Folder from the pop-up menu.

3. Name the new folder “assets”,click finish. Make sure it parent folder is HelloWorld/src, as show below

Step 3 Display an image in Flex

1. Open the sample code folder. By default it is located at C:\Program Files\PQLabs\MultiTouch SDK\flash\Tutorial\source code\Flex Builder 3(AIR Debug Ver 1.0), or you can find a quick link from Start Menu >All Programs> PQ MultiTouch SDK>Tutorial, then you can find all subfolders.

2. Just select and drag 1.png from sample code folder to assets in the Flex Builder IDE. 1.png will appear under assets in Flex Navigator.

3. In HelloWorld.mxml, add a image by entering <mx:image/> and add the id attribute with a value of image , source attribute with  a value of assets/1.png
4. Now you can click or choose Run > Run Hello. World from menu to build and run. If everything is correct, the project will build successfully. The application looks like

Step 4 Link project with PQ Labs SDK

This should be done by PQ Labs SDK installer.

Step 5 Add Multi-Touch stuffs

1. In the opening WindowedApplication tag, add an attribute creationComplete and set the value to onComplete();. You may also want to set backgroundColor to 0, which is black.

2. Before close WindowedApplicatio tag, add a Script component by entering <mx:Script>. Flex Builder completes the tag for you.

3. In the mx:Script block, enter import  pq.multitouch.*;  to import the MultiTouch class. The MultiTouch class is responsible for doing all Multi-Touch stuffs. enter import  pq.multitouch.manipulators.*;  to import the DragScaleRotate class which handles with drag, scale, rotate operation.

4. In the mx:Script block, after import statement. Add a new function named onComplete(). When the application states, it will call onComplete() handler

5. In onComplete function, add MultiTouch.init(this); , which initiates connection to PQ Multi-Touch server and initialize internal structures.

private function onComplete():void
{
	MultiTouch.init(this);		
}

6. Now you can dynamically enable any DisplayObject (Image, VideoDisplay, Canvas, … ) to support multi touch gestures defined in PQ Labs libaray. By call MultiTouch.enableGesture()

   private function onComplete():void
   {
   	MultiTouch.init(this);
   	MultiTouch.enableGesture(image, new DragScaleRotate());			
   }
   
   

7. Build and run the application.