ActionScript 3 TransformGestureEvent not working on SWF MovieClip

Question

Good Afternoon All,

I added an SWF to my stage and converted it to a MovieClip, I gave that MovieClip and instance name of floorplanMC and now I am trying to apply TransformGestureEvent to floorplanMC but when I goto test it out, its doesn't work as well as if I were to go the exact same steps but with a jpg instead of an SWF, it only responds sometimes to the TransformGestureEvent, but with a jpg it responds every time. Why doesn't this work with SWF but does with JPG?

Here is my code:

floorplanMC.addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoomFloorplan);
floorplanMC.addEventListener(MouseEvent.MOUSE_DOWN, dragStartFloorplan);
floorplanMC.addEventListener(MouseEvent.MOUSE_UP, dragEndFloorplan);

and here are the methods

function zoomFloorplan (event:TransformGestureEvent):void{

    myTimerModel.stop();
    myTimerModel.reset();
    myTimerModel.start();

    var locX:Number=event.localX;
    var locY:Number=event.localY;
    var stX:Number=event.stageX;
    var stY:Number=event.stageY;
    var prevScaleX:Number=floorplanMC.scaleX;
    var prevScaleY:Number=floorplanMC.scaleY;
    var mat:Matrix;
    var externalPoint=new Point(stX,stY);
    var internalPoint=new Point(locX,locY);

    floorplanMC.scaleX *= event.scaleX;
    floorplanMC.scaleY *= event.scaleY;

    if(event.scaleX > 1 && floorplanMC.scaleX > 6){
    floorplanMC.scaleX=prevScaleX;
    floorplanMC.scaleY=prevScaleY;
    }

    if(event.scaleY > 1 && floorplanMC.scaleY > 6){
    floorplanMC.scaleX=prevScaleX;
    floorplanMC.scaleY=prevScaleY;
    }

    if(event.scaleX < 1.1 && floorplanMC.scaleX < 1){
    floorplanMC.scaleX=prevScaleX;
    floorplanMC.scaleY=prevScaleY;
    }

    if(event.scaleY < 1.1 && floorplanMC.scaleY < 1){
    floorplanMC.scaleX=prevScaleX;
    floorplanMC.scaleY=prevScaleY;
    }
    mat=floorplanMC.transform.matrix.clone();
    MatrixTransformer.matchInternalPointWithExternal(mat,internalPoint,externalPoint);
    floorplanMC.transform.matrix=mat;
}

function dragStartFloorplan(e:MouseEvent):void
{
    myTimerModel.stop();
    myTimerModel.reset();
    myTimerModel.start();
    if(floorplanMC.scaleX > 1 && floorplanMC.scaleY > 1)
    {
        floorplanMC.startDrag(false, new Rectangle(0,500,-floorplanMC.width + stage.stageWidth, -floorplanMC.height + 1187));
    }
}

function dragEndFloorplan(e:MouseEvent):void
{
    myTimerModel.stop();
    myTimerModel.reset();
    myTimerModel.start();
    floorplanMC.stopDrag();
}

Answer 1

Solution

The events will only fire over portions of your SWF that have a background. Transparent regions will not fire an event.

A simple solution would be to draw a sprite layer inside of your child SWF.

var bg:Sprite = new Sprite();
bg.graphics.beginFill(0xFFFFFF);
bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight)
bg.graphics.endFill();
addChild(bg);

---

Demonstration

To demonstrate, we'll create two .swf files. The first one (the child) only has a series of bars. There are no event listeners whatsoever.

// Child.swf

var size:Number = 50;
for (var i:int = 0; i < stage.stageWidth/(size*2); i++) {
    var box:Sprite = new Sprite();
    box.graphics.beginFill(0x008cc6);
    box.graphics.drawRect(0, 0, size, stage.stageHeight)
    box.graphics.endFill();
    addChild(box);
    box.x = i * (size*2);
}

The second (the parent) loads the child and attaches listeners to the loader (the topmost container for our swf). If you click on a bar, all the bars turn green. However, notice that clicking the whitespace between the bars produces no results.

// Parent.swf

import flash.display.Loader;
import flash.events.MouseEvent;
import flash.display.Sprite;
import fl.motion.Color;

var loader:Loader = new Loader();
loader.load(new URLRequest("child.swf"));
addChild(loader);

loader.addEventListener("mouseDown", cursor);
loader.addEventListener("mouseUp", cursor);

function cursor(e:MouseEvent):void {
    var box:Sprite = e.target as Sprite;
    var c:Color = new Color();

    if (box != null) {
        switch (e.type) {
            case "mouseDown":
                c.setTint(0x00d719, 1);
                loader.transform.colorTransform = c;
                break;
            case "mouseUp":
                c.setTint(0x00, 0);
                loader.transform.colorTransform = c;
                break;
        }
    }
}

Now let's recompile the child with the background code provided in the solution. Here is the modified child code.

// Child

var bg:Sprite = new Sprite();
bg.graphics.beginFill(0xFFFFFF);
bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight)
bg.graphics.endFill();
addChild(bg);

var size:Number = 50;
for (var i:int = 0; i < stage.stageWidth/(size*2); i++) {
    var box:Sprite = new Sprite();
    box.graphics.beginFill(0x008cc6);
    box.graphics.drawRect(0, 0, size, stage.stageHeight)
    box.graphics.endFill();
    addChild(box);
    box.x = i * (size*2);
}

Compile the parent, and you'll notice that clicking anywhere (including between the bars) will generate the event.