Getting Started with MultiTouch ActionScript 3.0 Programming in FlashDevelop

Hello everyone , as I have said I have a lot of interest in programming for MultiTouch applications . Thats why i got started off with ActionScript 3.0 programming and also with python (PyMT framework). Both are really sweet . But as i know java and javascript I am a little biased towards ActionScript now 😛 . I have started programming in both. If you are also new to this and want to get a kick start then nuigroup.com/forums would be the best place for you(check all the sticky posts).

In this post I will be writing about the ActionScript 3.0 programming . If you have a flash IDE(CS3 or CS4) and want to get started off then check this. There check all the sticky posts , they surely will be very helpful. Also you may be interested in the wiki entry where it is well explained step-by-step.

Well as professionals suggest to start with Flash Develop and everyone will not be able to use flash CS4 or CS4(looking at its cost) I have got started with FlashDevelop .This post by Christian Moore got me started with Flash-Develop’s environment .But I was not able to start with the touchlib’s programming . After some issues and changes It all works fine for me now. So i decided to post a tutorial on this, so that other newbies like me do not get into same trouble .

So to get the touchlib’s AS3 library for multi-touch go to this page and download the /AS3 folder to your computer as per the steps mentioned there. Let us called the folder MTProject. So now my MTProject folder will have the folders named “ext“,”int” and “src” and a file called flashapp.flp . Then start a new AS3 project in flashDevelop and give the location as the MTProject folder. Now check that your project contains all the folders(i.e ext,int,src and some extra made by FLashDevelop).So now right-click on the src folder.Add a new class and give it a name “MyTouchApp”.Now go to project->properties->Add Classpaths and then add the “int” and “ext” folders. This is the step 7 in this post. Now you can paste the codesnippets in the post and change the package statement i.e make the statement package app.demo.MyTouchApp as only package. Now right click on the file and select “Always Compile” . Now if out of curiosity if you run the project , you will find it working fine but not reacting to the touch events (i.e circles will not appear in the very first code). This is where i got stuck.Then i found out that we have not done the step 14,15 and 16.So to solve the problem you have to create a new Sprite which is same as the rectangle drawn in flash. The code snippet for adding a rectangle is


var rect:Sprite    = new Sprite();
rect.graphics.beginFill(0x000000,1);
rect.graphics.drawRect(0,0,1024,768);
this.addChild(rect);

Now if you run the program it should run fine. Now if you also want to follow the step 4 of the original post you can use the code

[SWF(width="1024", height="768", frameRate="31", backgroundColor="#FFFFFF")]

Now you should have no problem with the FlashDevelop . So i will conclude by posting the full code of the MyTouchApp.as .

package { //adds a circle where you touch (no resize)

import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.geom.*;

[SWF(width="1024", height="768", frameRate="31", backgroundColor="#FFFFFF")]

public class MyTouchApp extends Sprite {

public function MyTouchApp() {

//--------connect to TUIO-----------------
TUIO.init(this,'localhost',3000,'',true);
trace("MyTouchApp Initialized");
//----------------------------------------

var bg:Sprite    = new Sprite();
bg.graphics.beginFill(0x000000,1);
bg.graphics.drawRect(0,0,1024,768);
this.addChild(bg);

addEventListener(TouchEvent.MOUSE_DOWN, touchDown); //run touchdown, when touched
}

public function touchDown(e:TouchEvent):void{

var curPt:Point = parent.globalToLocal(new Point(e.stageX, e.stageY)); //convert touch points to x,y

var circle:Sprite = new Sprite(); //create a new sprite

circle.graphics.lineStyle(10, 0xff0000); //set line width to 10px and red
circle.graphics.drawCircle(0,0,40); // draw a 40px circle
circle.x = curPt.x; //put it where touch is (x cord)
circle.y = curPt.y; //put it where touch is (y cord)

addChild(circle); //add the circle where touch happened

}
}
}

Please suggest to improve and if any problems in following the post ,feel free to ask . Thanks Everybody.Even i am a newbie and I need suggestion . 😉

13 thoughts on “Getting Started with MultiTouch ActionScript 3.0 Programming in FlashDevelop

  1. I’ve always wondered about the use of
    var curPt:Point = parent.globalToLocal(new Point(e.stageX, e.stageY));

    On specific object, it makes sense, but if you are technically already touching a square that takes up the whole area of the stage, stageX,stageY and the conversion to local x and y would be the exact same value, wouldn’t they? Is globalToLocal then just taking up extra processing?

    1. Hello cyancdesign . I just copied and pasted the code as given in the original link , so that it will not be difficult to follow for the newcomers . By the way we also can write the code as

                  circle.graphics.lineStyle(10, 0xff0000); //set line width to 10px and red
                  circle.graphics.drawCircle(0,0,40); // draw a 40px circle
                  circle.x = e.stageX; //put it where touch is (x cord)
                  circle.y = e.stageY; //put it where touch is (y cord)
      

      I feel the conversion of the point is to show the people about the existance so that it will be helpful when they are making some widget type of things . Then the
      function globalToLocal will really be significant at least to understand the code.

  2. I am new to Multitouch programming. I a just wondering how to handle simultaneous touch movements on screen. How to get coordinates of 2 different touch points simultaneously. Can anyone throw light on this??

    1. I would suggest you to go through the code of RotatbleScalable.as. there all the function are there to process the touch points, to rotate and move. Thatw why when we have to make a Sprite multitouch enabled, we just extend it to the RotatbleScalable class and all calculations are handled inside the class. You need not worry about that. And if you want to get the touch points yourself , that also you can do.

  3. hello
    i got some problem at line –
    TUIO.init(this,’localhost’,3000,”,true);
    ERROR:- 1120: Access of undefined property TUIO.

    i m using Flash CS5 . I am also saw TUIOsimulator. I run Flosc.jar and Simulator.jar work nicely but how I can use it in my AS3 applications. how compile my code sucessfully.

    plz help me I am newbie on this.

    thanks…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s