Create My first program
Posted: 17 January 2009 07:16 AM   [ Ignore ]
Rank
Joined  2009-01-07
Total Posts:  12
New Member

Hi to all, i’m tring to create my first program explained in this example http://nuigroup.com/forums/viewthread/2001/

I succed to move a photo and now i want my photo to resize when I make distance from two point (my two finger)

This is the code tha i using

package 
{
    import flash
.events.MouseEvent;
    
import flash.display.MovieClip;
    
    
import com.touch.TouchLibrary;
    
import com.touch.TouchEvent;
    
    public class 
Example extends MovieClip
    {
        
private var touchLib:TouchLibrary;
        
        public function 
Example():void
        {            
            
//Creazione livello
            
touchLib = new TouchLibrary(stage);
            
            
//Connessione a FLOSC
            
touchLib.connect();
            
            
//Configurazione listeners
            
touchLib.addEventListener(TouchEvent.CONNECTonFLOSCConnection);
        
}
        
private function onFLOSCConnection(event:TouchEvent):void
        {
            
if (event.params.success)
            
{
                touchLib
.blobsVisible(true);
                
Immagine.addEventListener(TouchEvent.FINGER_DOWNonOggetto1FingerDown);
                
Immagine.addEventListener(TouchEvent.FINGER_UPonOggetto1FingerUp);
            
}
        }
        
private function onOggetto1FingerDown(event:TouchEvent):void
        {
            trace
("Oggetto1 premuto");
            
touchLib.startDrag(event.params.idImmagine);
        
}
        
private function onOggetto1FingerUp(event:TouchEvent):void
        {
            trace
("Oggetto1 rilasciato");
        

    }
}

Anyone can help me? Tnx a lot

Profile
 
 
Posted: 17 January 2009 01:05 PM   [ Ignore ]   [ # 1 ]
Avatar
RankRankRankRank
Joined  2008-06-09
Total Posts:  899
Elite

Hi CIMO,
I haven’t used that touch library in particular, but if you’re looking to get started coding MT AS3 programs, you might want to check this wiki entry out: http://wiki.nuigroup.com/Building_Your_First_Application - lots of code examples (uses the as3 library from the touchlib svn). Using the code in that wiki entry, you can extend the rotatable scalable class to your object, and it lets you rotate/scale/move it.

rbedi100

 Signature 

My Multi Touch Blog
Join us on NUI Chat !
Read Multi-Touch Technologies Book!

Profile
 
 
Posted: 19 January 2009 01:59 PM   [ Ignore ]   [ # 2 ]
Rank
Joined  2009-01-07
Total Posts:  12
New Member

Ooooook =) i try with this....
Now if i would put my photo at the place of the red circle...how can i do???

package app.demo.MyTouchApp{
 
    import flash
.events.TUIO;// allows to connect to touchlib/tbeta
    
import flash.display.Sprite;
 
    public class 
MyTouchApp extends Sprite {
 
 
        
private var num:Number=5// number of rings to put
        
var ring:Ring//ring class (at bottom)
 
        
public function MyTouchApp():void {
 
            
//--------connect to TUIO-----------------
            
TUIO.init(this,'localhost',3000,'',true);
            
trace("MyTouchApp Initialized");
            
//----------------------------------------
 
 
            // put "num" rings randomly on the stage
            
for (var i:int 0numi++) {
                ring 
= new Ring();
                
ring.Math.random() * stage.stageWidth;
                
ring.Math.random() * stage.stageHeight;
                
addChild(ring);
            
}
        }
 
    }
}
 
import flash
.display.Sprite// ring class
import app.core.action.RotatableScalable;
 
class 
Ring extends RotatableScalable {
 
    
public function Ring(thickness:Number 10radius:Number 40color:uint 0xff0000{
 
        
//---RotatableScalable options------------
            //noScale = true;
            
noRotate true;    
            
//noMove = true;
        //----------------------------------------
 
        
graphics.lineStyle(thicknesscolor);
        
graphics.drawCircle(0,0,radius);
 
        
graphics.beginFill(0xffffff);
        
graphics.drawCircle(0,0,radius);
        
graphics.endFill();
    
}
}

Thanks =)

Profile
 
 
Posted: 19 January 2009 02:25 PM   [ Ignore ]   [ # 3 ]
Avatar
RankRankRankRank
Joined  2008-06-09
Total Posts:  899
Elite

CIMO,
I’m also learning AS3 for the first time, so, sorry, I can’t give you code that I’m sure will work.

I asked Seth (cerupcat) a similar question a couple of weeks ago, and he said the photo app (included in tbeta demos) loads images through an xml file - I think its images.xml in src/deploy/local. The code that is used to load the photos and allow them to be manipulated in the photo app is located in local.as and imageobject.as. You should find what you need in local.as. Not sure if this helps, but maybe it’ll get you on the right track.

rbedi100

 Signature 

My Multi Touch Blog
Join us on NUI Chat !
Read Multi-Touch Technologies Book!

Profile
 
 
Posted: 20 January 2009 02:08 PM   [ Ignore ]   [ # 4 ]
Rank
Joined  2009-01-07
Total Posts:  12
New Member

Never? =(

Profile
 
 
Posted: 22 January 2009 07:06 AM   [ Ignore ]   [ # 5 ]
Rank
Joined  2009-01-07
Total Posts:  12
New Member

Anyone know how to resolve this (move, rotate, scalate) the image that i loaded?

var img:Loader = new Loader();
var 
url:String="immagini/25.jpg";
var 
urlReq:URLRequest=new URLRequest(url);
img.load(urlReq);
addChild(img);

Please help!! =(

Profile
 
 
Posted: 30 January 2009 10:07 AM   [ Ignore ]   [ # 6 ]
Rank
Joined  2009-01-07
Total Posts:  12
New Member

Hey boy anyone knows how to help me...please it’s very important =( i’m begging you!!!
The “img” has to be rotable, scalable and it has to move

package app.demo.MyTouchApp
{
    import flash
.events.TUIO;
    
import flash.display.Sprite;

    
import flash.display.*;
    
import flash.net.URLRequest;
    
import flash.events.Event;

    public class 
MyTouchApp extends Sprite
    {
        
//private var num:Number=5;
        //var ring:Ring;
        
        
public function MyTouchApp():void
        {
            
//--------connect to TUIO-----------------
            
TUIO.init(this,'localhost',3000,'',true);
            
trace("MyTouchApp Initialized");
            
//----------------------------------------

            //for (var i:int = 0; i < num; i++)
            //{
            //ring = new Ring();
            //ring.x = Math.random() * stage.stageWidth;
            //ring.y = Math.random() * stage.stageHeight;
            //addChild(ring);
            //}
            
var img:Loader = new Loader();
            var 
url:String="immagini/25.jpg";
            var 
urlReq:URLRequest=new URLRequest(url);
            
img.load(urlReq);
            
addChild(img);
        
}
    }
}
//import flash.display.Sprite;
//import app.core.action.RotatableScalable;

//class Ring extends RotatableScalable
//{ 
//public function Ring(thickness:Number = 10, radius:Number = 40, color:uint = 0xff0000)
//{
////---RotatableScalable options------------
////noScale = true;
//noRotate = true;    
////noMove = true;
////----------------------------------------
// 
//graphics.lineStyle(thickness, color);
//graphics.drawCircle(0,0,radius);
// 
//graphics.beginFill(0xffffff);
//graphics.drawCircle(0,0,radius);
//graphics.endFill();
//}
//}

Profile
 
 
Posted: 04 February 2009 02:28 PM   [ Ignore ]   [ # 7 ]
Avatar
Rank
Joined  2009-01-21
Total Posts:  6
New Member

I think (not sure) that the image has to be included in a class that extends RotatableScalable class…
Maybe somebody has a link to an example ?
I will try it sooner or later.

Profile
 
 
Posted: 04 February 2009 05:49 PM   [ Ignore ]   [ # 8 ]
Avatar
Rank
Joined  2009-01-21
Total Posts:  6
New Member

there it is :
quickly modified from RotatableScalable example with the red and white rings.
I didn’t centered the bitmap data, giving strange rotation to the photos.

What a wonderful Object is this RotatableScalable… I have to learn more

package app.demo.phototest{
 
    import flash
.events.TUIO;// allows to connect to touchlib/tbeta
    
import flash.display.Sprite;



    public class 
phototest extends Sprite {
 
 
        
private var num:Number=3// number of photos to put
        
var rphoto:RotoPhoto//RotoPhoto class (at bottom)
 
        
public function phototest():void {
 
            
//--------connect to TUIO-----------------
            
TUIO.init(this,'localhost',3000,'',true);
            
trace("MyTouchApp Initialized");
            
//----------------------------------------
 
 
            // put "num" rphotos randomly on the stage
            
for (var i:int 0numi++) {
                rphoto 
= new RotoPhoto();
                
rphoto.Math.random() * stage.stageWidth;
                
rphoto.Math.random() * stage.stageHeight;
                
addChild(rphoto);
            
}
        }
 
    }
}
 
import flash
.display.Sprite// rphoto class
import app.core.action.RotatableScalable;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
import flash.display.BitmapData;
import flash.display.Bitmap;
 
class 
RotoPhoto extends RotatableScalable {
    
private var _chargeur:Loader = new Loader();

 
    public function 
RotoPhoto(thickness:Number 16size:Number 1048color:uint 0xffffff{
 
        
//---RotatableScalable options------------
            //noScale = true;
            //noRotate = true;    
            //noMove = true;
        //----------------------------------------
 
         
ChargeurDeBitmap();         // DEFAULT IMAGE SIZE IS HARD SET TO 1024x1024 with a white border ...
 
        
graphics.lineStyle(thicknesscolor);
        
graphics.drawRect(-16,-16,size,size);
     
}
    
    
public function ChargeurDeBitmap() {
        _chargeur
.contentLoaderInfo.addEventListener(Event.COMPLETEonComplete);
        
_chargeur.load(new URLRequest("image.jpg")); // PUT THE IMAGE FILE ASIDE YOUR FLA OR CHANGE PATH
    
}
    
    
public function onComplete(evenement:Event):void{
        
var image:Bitmap Bitmap(_chargeur.content);
        var 
bitmap:BitmapData image.bitmapData;
        
addChild(image);
        
this.width 256;
        
this.height 256;
    
}
    
    
}

Profile
 
 
Posted: 04 February 2009 11:20 PM   [ Ignore ]   [ # 9 ]
Rank
Joined  2008-09-21
Total Posts:  17
New Member

Alban, I contributed a little to your code to center the reg pt. of the photos. I’m still learning AS3 as I go along. Check if it works.

package {
 
    import flash
.display.Sprite;
    
import flash.events.TUIO;



    public class 
PhotoTest extends Sprite {
 
 
        
private var num:Number=3// number of photos to put
        
var rphoto:RotoPhoto//RotoPhoto class (at bottom)
 
        
public function PhotoTest():void {
 
            
//--------connect to TUIO-----------------
            
TUIO.init(this,'localhost',3000,'',true);
            
trace("MyTouchApp Initialized");
            
//----------------------------------------
 
 
            // put "num" rphotos randomly on the stage
            
for (var i:int 0numi++) {
                rphoto 
= new RotoPhoto();
                
rphoto.Math.random() * stage.stageWidth;
                
rphoto.Math.random() * stage.stageHeight;
                
addChild(rphoto);
            
}
        }
 
    }
}
 
 
 
//======================================
 // rphoto class
 //======================================
import flash.display.Sprite
import app.core.action.RotatableScalable;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
import flash.display.BitmapData;
import flash.display.Bitmap;
 
class 
RotoPhoto extends RotatableScalable {
    
private var _chargeur:Loader = new Loader();
    private var 
borderWidth:Number;            // border frame around photo



    // Added width and height instead of just a single size parameter 
    
public function RotoPhoto(thickness:Number 16width:Number 1024height:Number 768 color:uint 0xffffff{
 
        
//---RotatableScalable options------------
            //noScale = true;
            //noRotate = true;    
            //noMove = true;
        //----------------------------------------
          
borderWidth thickness;     // assign thickness passed to borderwWidth, default is 16 pixel
         
ChargeurDeBitmap();         // DEFAULT IMAGE SIZE IS HARD SET TO 1024x1024 with a white border ...
 
        
graphics.lineStyle(thicknesscolor);
        
graphics.drawRect(-width/2-borderWidth, -height/2-borderWidthwidth+borderWidthheight+borderWidth ); // calculate placement of border to position reg pt at center
     
}
    
    
public function ChargeurDeBitmap() {
        _chargeur
.contentLoaderInfo.addEventListener(Event.COMPLETEonComplete);
        
_chargeur.load(new URLRequest("Image.jpg")); // PUT THE IMAGE FILE ASIDE YOUR FLA OR CHANGE PATH
    
}
    
    
    
    
public function onComplete(evenement:Event):void{
        
var image:Bitmap Bitmap(_chargeur.content);
        var 
bitmap:BitmapData image.bitmapData;
        
image.= -width/borderWidth/2;        // place x and y of image within border and centers the reg pt.
        
image.= -height/borderWidth/2;
        
addChild(image);
        
        
this.scaleX 0.25this.scaleY 0.25;    // scale RotoPhoto down a quarter 
        //this.width = 256;
        //this.height = 256;
    
}
    
    
}

Profile
 
 
Posted: 05 February 2009 04:34 AM   [ Ignore ]   [ # 10 ]
Rank
Joined  2009-01-07
Total Posts:  12
New Member

GREAT IT WORKS!!!
Now i’m studing it =) very thanks at all

Profile
 
 
Posted: 06 April 2009 01:50 PM   [ Ignore ]   [ # 11 ]
RankRank
Joined  2008-11-24
Total Posts:  108
Jr. Member

Hey guys, very good job.

I was looking for this code, and I´ve pushed it in my app. Now, I can put a photo where touched with the mouse or the MT device!!!

 Signature 

My MT Table is finished! Now I´m making a good guide to build a good MT device

Profile
 
 
Posted: 22 April 2009 08:47 AM   [ Ignore ]   [ # 12 ]
Avatar
Rank
Joined  2008-07-07
Total Posts:  5
New Member

Hi all!!!
After reading and testing some tutorials, I red this topic and tried the code but unfortunately it doesn’t work for all the image, i can grab only the borders: I went trough some code, like local.as, ImageObject.as and after an hour (or maybe more now that I’m thinking.. XD ), I cut all the unnecessary(for me) part of physics and animation stuff and I have now a photo app working ^_^
the next step it’s to learn how to read files, and create lists and so one to manage more photos, from various sources(eg. local files or web)

this is the first file, oggetti.as, saved in app/int/demo/oggetti

package app.demo.oggetti{ 
    import flash
.events.TUIO;// allows to connect to touchlib/tbeta
    
import flash.display.Sprite;
    
    
import app.core.action.RotatableScalable;
 
    public class 
oggetti extends RotatableScalable {//RotatableScalable al posto di sprite fa si che tutta la scena diventi RotatableScalable e quindi ha le proprieta classiche
 
 
        
private var num:Number=3// numero di immagini da mettere  -  provvisorio
        
var foto:Immagine//immagine class (at bottom)

        
public function oggetti():void { 
            
//--------connect to TUIO-----------------
            
TUIO.init(this,'localhost',3000,'',true);
            
trace("oggetti Initialized");
            
//----------------------------------------           
             //crea i vari oggetti immagine
            
for (var i:int 0numi++) {
                foto 
= new Immagine("http://www.google.it/logos/earthday09.gif");//"C:/imm.png");
                
foto.Math.random() * stage.stageWidth;
                
foto.Math.random() * stage.stageHeight;
                
addChild(foto);
            
}
            

    }
}
}

import app
.demo.oggetti.ImageObject;
import flash.display.Sprite// Immagine class che incapsula un oggetto sprite e lo rende rotatablescalable
import app.core.action.RotatableScalable
class 
Immagine extends RotatableScalable { 
    
public function Immaginepath:String{
 
        
//---RotatableScalable options------------
            //noScale = true;
            //noRotate = true;    
            //noMove = true;
        //---------------------------------------- 
        
        
var photo:ImageObject = new ImageObject(path);
        
addChild(photo);
        
    
}
}
//Immagine

this is the second file, the remake of ImageObject.as, in the same directory of the first .as file

package app.demo.oggetti {

    import flash
.events.*;
    
import flash.system.LoaderContext;
    
import flash.net.URLRequest;
    
import flash.display.*;
    
    
    public class 
ImageObject extends Sprite 
    {        
        
private var clickgrabber:Shape = new Shape();    
        private var 
photoBack:Sprite = new Sprite();        
        private var 
photoLoader:Loader null;        
        
    
        
//costruttore
        
public function ImageObject (url:String)
        
{

            photoLoader 
= new Loader();        

            
photoLoader.contentLoaderInfo.addEventListenerEvent.COMPLETEarrangefalse0true);    
            
            var 
context:LoaderContext = new LoaderContext();
            
context.checkPolicyFile true;                
                
            
photoBack.graphics.beginFill(0x000000,0.75);
            
photoBack.graphics.drawRect(001,1);
            
photoBack.graphics.endFill();                    
            
            
clickgrabber.graphics.beginFill(0xFFFFFF1);
            
clickgrabber.graphics.drawRect(001,1);
            
clickgrabber.graphics.endFill();    
            
            var 
request:URLRequest = new URLRequesturl );                
    
            
photoLoader.unload();
            
photoLoader.loadrequest context);                        
    
            
this.addChildclickgrabber );
            
this.addChildphotoBack );    
        
}
        
        
        
        
//funzione che dispone la foto
        
private function arrangeevent:Event null ):void 
        {                            
            photoLoader
.= -photoLoader.width/2;
            
photoLoader.= -photoLoader.height/2;            
            
            
clickgrabber.scaleX photoLoader.width;
            
clickgrabber.scaleY photoLoader.height;            
            
clickgrabber.= -photoLoader.width/2;
            
clickgrabber.= -photoLoader.height/2;            
            
            
photoBack.scaleX photoLoader.width;
            
photoBack.scaleY photoLoader.height;            
            
photoBack.= -photoLoader.width/2;
            
photoBack.= -photoLoader.height/2;                
            
photoBack.alpha 0.0;
            
            var 
image:Bitmap Bitmap(photoLoader.content);
            
image.smoothing=true;            
            
image.= -image.width/2;
            
image.= -image.height/2;                
            
this.addChildAt(image,1);        
        
this.scaleX 0.25this.scaleY 0.25;
        
}                
                
    }
}

hope it helps!! smile

Profile