In an attempt to help you get started with Multi-Touch Actionscript coding, I've put together a zip of base files that are setup in the same structure that I use when I work on my files. If you don't want to write out everything and hook up everything from scratch, this is good a place as any to start. The link will be available within all posts at the top of the left column, along with other downloads I've made available before.
I received a request on my Blob Lines Tutorial from Simplex
I just want to put a Movieclip under each blob, move each Movieclip when blobs move AND remove the Movieclip when blob is away
Simple, right? Well not at first for me. This is something I've been trying to work out for a while. What is a clean solution to pull a MovieClip from the library dynamically onto the stage...keep tracking that MovieClip with the one specific blob...then remove it when that blob is removed. And I must say, I was scratching my head on this one for a while. I would get to the point of removing the MC, and it would all fall apart from the way I thought I should work. Read the rest of this entry »
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
package app.demo.MyTouchApp{ import flash.events.TUIO;// allows to connect to touchlib/tbeta import flash.events.TouchEvent;// allows to use TouchEvent Event Listeners import flash.display.*; public class SimpleDrag extends Sprite { public function SimpleDrag():void { //--------connect to TUIO----------------- TUIO.init(this,'127.0.0.1',3000,'',true); addEventListener(TouchEvent.MOUSE_MOVE, moveUpdate);//run moveUpdate, when any touching point is moved } public function moveUpdate(e:TouchEvent):void { trace("moved: "+e.ID+" related to: "+e.relatedObject.name); e.relatedObject.x = e.localX; e.relatedObject.y = e.localY; } } }
Updated in my Google Code SVN page as well.
Happy Experimenting.
There are many APIs out there to work with. If you start searching around Google, there are many people dedicated to helping people like you and me tie in different information and resources into Flash. It can take quite a long time just understanding a full API and be able to use ALL of it's capabilities. But that idea is way down the road. If you are like me, it's nice to find something to help you get off the ground. Read the rest of this entry »
There are two ways to work with multiple touch point that come to mind when developing multi-touch applications. One is to attach TouchEvents to the objects which are applied to the stage. The other is to use the array of blobs to build interaction between the blob points. In this tutorial I'd like to go over a basic setup you can use to communicate through the blob array, by drawing lines through all of the blobs that a activated on the stage. This app is built using the Touchlib classes for multi-touch communication with tBeta or Touchlib via FLOSC.
If you do not have the needed Touchlib files, you can find them here: http://code.google.com/p/touchlib/
by downloading touchlib-src-win32-20071106.zip from the download page, or downloading the source code via SVN in the Source section.
So begin with creating a new folder, i named mine "blobLines" and create a new Flash file, which I've named blogLines.fla
Then create another folder named "BlobsFunction" (this is case sensitive) in the "blobLines" folder, this will contain the AS file of the application.
Find the folder labeled "flash" from the Touchlib files, normally found in /AS3/int/
And copy this folder to your "blobLines" folder. This contains the TUIO classes needed for Flash to communicate with tBeta and Touchlib via FLOSC.
So now your "blobLines" folder should have: blogLines.fla, a folder labeled "flash" and a folder labeled "BlobsFunction"
Open the Flash file and set size setting to you screen's resolution, I use a 1024x768 size display, and change your framerate to 30fps.
Now open a new file, and create a new Actionscript file. Save as... BlobLines.as (this is case sensitive) Read the rest of this entry »
Building an array in a new AS file is redundant when the TUIO.as file already contains an array of all the TUIOobjects constantly updated everytime the XML from FLOSC is updated for tBeta or Touchlib. So I planned on figuring out how to access that information directly from TUIO.as
I started with converting some variables to public. It worked well, but after talking with a co-worker/developer, I realized that I should keep that var in the TUIO.as file private. So I needed a new way to gather the information. My first thought was to use some type of set/get to pull the information. After a few attempts, and getting no where. I realized there were already public functions that pass data from the TUIO.as file. So I simply added a new function that returns OBJECT_ARRAY.
public static function returnBlobs():Array{ return OBJECT_ARRAY; }
Then, in the new AS file I'm creating, all i have to use it TUIO.returnBlobs() and the returned value is already an array, ready to use, and every time TUIO.returnBlobs() is called, it is already up to date with the proper number to TUIOobjects in the array.
Download example Multi-touch Flash apps at: http://code.google.com/p/multitouchas3experiments/
http://code.google.com/p/multitouchas3experiments/
Here's the link, it's the whee hours of morning now. But it has been quite an eventful saturday.
And now I just realizied I lost another hour today...Daylight savings time. At least I can actually say that there just weren't enough hour(s) today and mean it.
Well, I plan to keep the SVN files in the googlecode page up to date as much as possible. So grab em' learn from them, I plan on explaining my thoughts and why I did thing and how and why they work and now I'm using a lot of ands. Ok, may be it's time to get a little sleep.
(-_-) ZZZ zzz ...
I've been working with the Touchlib library of multi-touch apps using Actionscript 3.0 to develop some of my own apps. This driving force behind what I've been doing is to get a general idea of how to start thinking about the code, and try to discern what works well and what does not. I began with making a simple interface to select an app to be dynamically loaded into the main flash movie. The buttons and information is built dynamically and after an app is selected a trigger is placed in the bottom right corner the user will need to hold down to being back the menu. I've used that menu to build a small collections of apps i have been experimenting with:
At the end of the video, I just wanted to give my thanks to NUIGroup, everyone there help me tremendously with getting my multi-touch hardware up and running. I hope to offer value by doing these experiments and letting the community use them as needed.
Multi-touch Flash Experiments from Chris Yanc on Vimeo.
Here are some thoughts I normally have when coming up with experiments like this. How can this be different than just something you can do with just a mouse? It's one thing to get one touch point working and build an application around that. But how does it change when you can pretend there are 2 mouse cursors you can work with? Then 3? Then 4? What is the best way to optimize the code for these applications? How can I take this and build something useful for a business? Is a gaming environment the best option for thinking of commercialization opportunities?
I feel this technology has opened some interesting windows of opportunity.
And once again, I'd like to offer all my source code for the video above to anyone who'd like to dissect it.
I've been wanting to use physics and multi-touch together. But physics calculations + ME = Years and years and years. But, there are already solutions that I can use to create physics based applications in Flash, but there are many to choose from. So I slowly started sifting through all the choices to find one I understood and work with.
It took a little while, but I began to make sense to me, at least the intial tutorial did, and the additional tutorials that I could find online. Emanuele Feronato » italian geek and PROgrammer IS MY FLASH PHYSICS HERO!
I took built an enclosed area around the outside of the projected screen with 4 walls. Then started with just building a regular flash app which the mouse clicks on a circle, you can drag the circle around and the other circles react to it, just using the normal MouseEvent.MOUSE_DOWN. Done, next. Next I changed the MouseEvent to a TouchEvent, changed the rest of the code as needed to work with just 1 touchpoint. That took a little while to hammer out, and got a bit frustrating here and there. Till I acutally understood everything that was going on in the code when it came to Mouse/Item interaction. Touch and empty part of the stage, new circle, touch a circle, it follows the touchpoint. Done Again.
Finally, get it to understand different touchpoints at the same time. A lot to think about in that one. My solution in a nutshell is that any and all touchpoints are collected into an array, along with the corresponding circle (if the touchpoint is indeed touching a circle), then the code to update any touched circles loops through the array of touchpoints and adjusts the circles positions accordingly. I do not pretend to be a master flash coder in any sense, so I do not know if this is the Best solution, BUT it works and it works very very well, even on a non-high end computer. And I am quite happy with the refresh rate of it all.
Video for show, 3 app demos, 1st is the fire app (comes with Touchlib), 2nd ring app (example from NUI Group), 3rd my physics app demo.
Multi-touch Flash Apps from Chris Yanc on Vimeo.
Quality Note: The compliant surface has temporarily buckled because of the temperate/humidity shift in the weather. I'll be reworking how I lay out the compliant surface next.
I've zipped the files I used, I've edited some of the Touchlib AS files so these files probably won't work if you use the real downloaded version of the Touchlib AS files.
Enjoy (^_^)//
I'm currently fascinated by touch screen techonology. And I'm learning and doing all that I can to hopefully growing the technological savvyness of my fair city, Cleveland OH. But it's all about taking everything one step at a time. With that, I've been looking into various open source code bases to run my multi-touch rear projection display. I've been favoring TouchLib and tBeta. Within their libraries for implimenting Flash for communications with a TUOI interface I found a gesture recognition example. I loaded it up, but nothing worked for the touch screen, it worked for the mouse however, so the base structure was there.
I started looking through the code and parts of the Touch based functionality was there, it just needed to be wrapped up. So I tinkered around until I got it completely functioning. If you are familiar with the Touchlib SVN download, you can take this file: Gesture Update and update the files in: \AS3\int\app\core\action\gestures
Again, it's all about the baby steps, now to take this code and figure out how to expand it's use.
(^_^)//
Recent Comments