This tutorial is for people who already have experiences with Flex/Flex Builder 3 . If you are new to Flex, you can still read this tutorial, however, we recommand another version. Click HERE for a more detailed guide

Summary

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

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

Application Overview

The HelloWorld application displays a picture and allows users to drag, zoom and rotate the picture with their fingers.

Code Files

HelloWorld.mxml



       
              
       
       

Step by Step Tutorial

Step1 Create a new Flex application project and name it HelloWorld

Step 2 Create a subfolder named assets under src

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\Flex Builder 3(AIR Debug Ver 1.0)\src\assets
  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
    
    

Step 4 Link project with PQ Labs SDK

This should be done by PQ Labs SDK installer. You can do it manually

  1. In Flex Builder IDE, select Project > Properties > Flex Build Path > Library path
  2. Click Add SWC..
  3. Select PQMultiTouch.swc from SDK installation folder.  By default it is located at C:/Program Files/PQLabs/MultiTouch SDK/flash/lib/PQMultiTouch.swc
  4. Click OK to confirm and wait Flex Builder updating project settings.

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.
  6. private function onComplete():void
    {
    	MultiTouch.init(this);		
    }
    
    
  7. 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());			
    }
    
    
  8. Build and run the application.

Toubleshooting

  1. No images. When running Flex Builder 3 Windows 7, images are not copied to bin-debug by default. You can drag assets from src to bin-debug. Then build and run again,