UStream Not Live

cyancdesign: blog

Super Simple Multi-Touch Flash Drag

-- Perhaps Too Simple

I was looking through all the TUIO files when I came across something interesting. In TouchEvents.as, there is a variable called 'relatedObject,' what did that mean I thought. So I opened up a new file and figured out how to run a trace on it. Low and behold, relatedObject will return whatever object it is touching. I knew this also when I touched the screen and the normal full sized black square I put on my files immediately followed my touch.

2 Lines of code! dragging accomplished, what?! Well, a little more than 2 lines (^_^), you need all the other code to hook in TUIO and add an event listener. So i tried putting just a bunch of random movie clips (not just shapes because they would be all created on the same level) on the stage. Each MovieClip could be moved independently, it's activated when the touch point moves and it'll snap the MovieClip's anchor point to the center of the touch point, but it's not without its issues. A few times when i dragged a MovieClip over another movie clip it'll connect to the one at the highest level. But it was something I stumbled across I though was worth sharing.

Name your AS file: SimpleDrag.as
Put into this folder structure: app/demo/MyTouchApp
In flash, set your Document Class to: app.demo.MyTouchApp.SimpleDrag

  1. package app.demo.MyTouchApp{
  2.  
  3. import flash.events.TUIO;// allows to connect to touchlib/tbeta
  4. import flash.events.TouchEvent;// allows to use TouchEvent Event Listeners
  5. import flash.display.*;
  6.  
  7. public class SimpleDrag extends Sprite {
  8.  
  9. public function SimpleDrag():void {
  10. //--------connect to TUIO-----------------
  11. TUIO.init(this,'127.0.0.1',3000,'',true);
  12. addEventListener(TouchEvent.MOUSE_MOVE, moveUpdate);//run moveUpdate, when any touching point is moved
  13.  
  14. }
  15. public function moveUpdate(e:TouchEvent):void {
  16. trace("moved: "+e.ID+" related to: "+e.relatedObject.name);
  17. e.relatedObject.x = e.localX;
  18. e.relatedObject.y = e.localY;
  19. }
  20. }
  21. }

Updated in my Google Code SVN page as well.

Happy Experimenting.

Tags: , ,

6 Responses to “Super Simple Multi-Touch Flash Drag”

  1. Marziya says:

    Hey, thanks for this – I’ve really new to the whole Multi-touch scene but I’ve been trying to develop something that uses drag-and-drop and your solution really helped! One thing I’ve noticed that if the rate at which the touchcursor moves is relatively fast (I’m using the TUIOSimulator so using the mouse to simulate the touches)the cursor tends to drop the object – almost as if it’s too fast for the MovieClip to keep up. Have you noticed this on the actual surface? Or do you think it may just be a simulator issue?

    thank you once again, and best of luck with your experiments – I’ll be watching this blog for sure!

  2. Marziya says:

    Just an addendum to my last comment: I found that using your solution allowed me to drag MovieClips but often ended up leaving parts of the clip behind (the clips I was trying to drag were animated and were arranged in layers). I used ‘currentTarget’ instead of ‘relatedObject’ though and that seemed to solve the issue of keeping my clips intact!

  3. Chris Yanc says:

    Marziya, thanks for the comment and for the new name to try. Did that also fix the fast touch movement bug you mentioned too? I never really implemented this in anything else I worked on because I’ve always seemed to have needed to keep better track of what was being touched.

  4. Marziya says:

    Unfortunately I’m still having trouble with the fast dragging movement. Now I’m trying to use RotatableScalable to allow the objects to be dragged anyway but it doesn’t seem to be working either – lots of debugging and such to go, alas!

  5. Ricardo says:

    Hi, first of all thanks for sharing your samples, they’ve been helping me a lot in my work. This Simple Flash Drag works quite well, but since I’m a newbie to TUIO, I was wondering how can I get the instance name of the object I’m currently touching? All I can get is its internal name, like instance1, instace2, instace3, but never the actuall instance name I gave it in the main FLA. I need this to happen so certain MC’s dispatch different actions. Any tips on how I can acheive this? Thank you :)

  6. madiha says:

    hello……my final year project is devolping a maze game for multi touch screen…..
    what multi touch progamming….or any code which is helpfull

Leave a Reply

You must be logged in to post a comment.