AS3 to get children in Gestureworks TouchSprite working - actionscript-3

Question

Recently just trying around with the Gestureworks multitouch.
Here I have some problem about button inside a TouchSprite, below is my code:
package
{
import com.gestureworks.core.GestureWorks;
import com.gestureworks.core.TouchSprite;
import com.gestureworks.events.GWGestureEvent;
import com.gestureworks.events.GWTouchEvent;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.Stage;
import flash.events.Event;
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import flash.events.TouchEvent;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
public class Main extends GestureWorks
{
private var myDisplay:TouchSprite;
public function Main():void
{
super();
key = "xxx";
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
}
override protected function gestureworksInit():void
{
myDisplay = new TouchSprite();
myDisplay.gestureReleaseInertia = true;
myDisplay.gestureEvents = true;
myDisplay.disableNativeTransform = false;
myDisplay.disableAffineTransform = false;
myDisplay.mouseChildren = true;
myDisplay.gestureList = {"n-drag":true,"n-scale":true};
myDisplay.addChild(boliviaMap);
myDisplay.addChild(mapPink);
addChild(myDisplay);
myDisplay.addEventListener(GWGestureEvent.DRAG, gestureDragHandler);
myDisplay.addEventListener(GWGestureEvent.SWIPE, gestureSwipeHandler);
mapPink.addEventListener(TouchEvent.TOUCH_TAP, tapPink);
}
private function tapPink(e:TouchEvent):void
{
trace("PINK");
indicatorTxt.text = "PINK";
}
private function gestureDragHandler(event:GWGestureEvent):void
{
trace("g drag: ", event.value.dx, event.value.dy);
event.target.$x += event.value.dx;
event.target.$y += event.value.dy;
indicatorTxt.text = "g drag: " + event.value.dx + " " + event.value.dy;
}
}
}
apparently the myDisplay.mouseChildren = true; will make myDisplay not able to drag or scale anymore.

Answer 1

Before adding your bigMap button set the mouseChildren property of myDisplay to true:
myDisplay.mouseChildren = true;
This should pass mouseEvents to objects inside.
Also, depending on the effect you want (I'm assuming this is for a multi-touch screen of somesort), I'd suggest you should probably use a TouchEvent.TOUCH_TAP on bigMap instead of MouseEvent.CLICK(MouseEvents arent multi-touch and won't be responsive if there is some kind of touch on another part of the screen at the same time).
Edit:
Assuming boliviaMap and mapPink aren't TouchMovieClips or TouchSprites then do something like this:
myDisplay.graphics.beginFill(0x555555, 1);
myDisplay.graphics.drawRect(0,0,500,500);
myDisplay.graphics.endFill();
Then add your child assuming boliviaMap and mapPink are less than 500x500px:
myDisplay.addChild(boliviaMap);
myDisplay.addChild(mapPink);
Edit 2- A working example(for me anyways) combining TouchEvents with GWEvents:
package {
import flash.display.MovieClip;
import com.gestureworks.core.GestureWorks;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import com.gestureworks.core.TouchSprite;
import flash.display.Sprite;
import flash.events.TouchEvent;
public class Main extends GestureWorks {
public function Main() {
super();
key = "INSERT YOUR GW KEY HERE";
Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT;
}
override protected function gestureworksInit():void
{
trace("GestureWorks has initialized");
var myTouchSprite:TouchSprite = new TouchSprite();
myTouchSprite.graphics.beginFill(0x555555,1);
myTouchSprite.graphics.drawRect(0,0,100,100);
myTouchSprite.graphics.endFill();
myTouchSprite.gestureReleaseInertia = false;
myTouchSprite.gestureEvents = true;
myTouchSprite.disableNativeTransform = false;
myTouchSprite.disableAffineTransform = false;
myTouchSprite.gestureList = {"n-drag":true, "n-rotate":true};
myTouchSprite.mouseChildren = true;
var myTappableSprite:Sprite = new Sprite();
myTappableSprite.graphics.beginFill(0xAD3059,1);
myTappableSprite.graphics.drawRect(30,30,40,40);
myTappableSprite.graphics.endFill();
myTappableSprite.addEventListener(TouchEvent.TOUCH_TAP, tappedThis);
//myTouchSprite.addChild(myTappableSprite);
myTouchSprite.addChild(myTappableSprite);
addChild(myTouchSprite);
}
public function tappedThis(event:TouchEvent){
trace("You tapped this");
}
}
}
I should also add that this will only work on a screen/device that triggers TouchEvents(if you're clicking myTappableSprite with a mouse it won't trigger the event).