ghost shape triggering greensock's TransformManger move cursor

Question

This may be a long shot but I've spent over a day at this so I thought I would ask.

I am using greensock's TransformManger v: 1.9669 in a Flex 4.6/AS project. The issue is that with an item selected, the TM "move" cursor appears outside the selection bounds, and it seems like there is a ghost shape or something the same size as the selection but offset from the center which is triggering it. There's a screenshot below to show what I mean.

I added the red rectangle in Photoshop to indicate the ghost area which is triggering the TM move cursor. This area is active and the selection can be moved by clicking and dragging within the red rectangle.

I've built a stripped down Flex project which shows this issue: exported .fxp (without the TransformManager lib, of course, since it is not free). I've tried every way from Tuesday to determine if this is my bug and am not seeing it. Is this a Flex bug, a TM bug? If anyone has experience with the TransformManager lib and can tell me what the issue is, there is some beer karma (or bounty points) in it...

enter image description here

The selected item is a Flex Spark group which loads an swf. It is pretty bare bones, so I am baffled as to where this ghost shape is coming from. I've stripped out the loader and other AS code below

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         width="5" height="5"
         resize="resizeHandler(event)">

    <s:SWFLoader id="eventBtn"
                 width="{this.width - 5}" height="{this.height - 5}"
                 x="{regX}" y="{regY}"
                 verticalAlign="middle"  horizontalAlign="center"
                 complete="btn_completeHandler(event)" />

    <s:Rect id="bitmapBorder"
            x="{regX}" y="{regY}"
            width="100%" height="100%"
            visible="true">
        <s:stroke>
            <s:SolidColorStroke color="#ffffff" weight="2" />
        </s:stroke>
    </s:Rect>
</s:Group>

updateRegPoint is called after the SWFLoader has finished loading an external .swf. It is meant to locate the registration points of the SWFoader and the Spark Rect to the center of the containing Spark Group.

    protected function updateRegPoint():void
    {   
        regX = this.width * -.5;
        regY = this.height * -.5;
    }

Where are the `regX` and `regY` coming from? and what are their values? Anyway it looks like your blue arrow graphic has a "center" registration point but is somehow "controlled" by some Top-Left based registration points.. Is it added to a transparent container (at x=0, and y= 0)? — VC.One, Dec 15 '14 at 11:22

spring · Accepted Answer · 2016-11-19T17:54:04.640

Ok - using the code on this site: flash-flex-rotate-around-a-point-by-matrix I was able to solve this.

First, instead of changing the reg point of the elements making up my component (the regX & regYin the original mxml code), no change is made.

<s:SWFLoader id="eventBtn" 
             width="{this.width}" height="{this.height}" 
             verticalAlign="middle"  horizontalAlign="center" 
             complete="btn_completeHandler(event)" />

<s:Rect id="bitmapBorder" 
        x="0" y="0" 
        width="100%" height="100%" 
        visible="true">
    <s:stroke>
        <s:SolidColorStroke color="#ffffff" weight="2" />
    </s:stroke>
</s:Rect>

This works with greenSock's TransformManager and there is no "ghost" shape. The problem then is that rotation set through code (e.g. obj.rotation = 45 occurs at point(0,0) - top/left.

I then I adapted the code from the linked site to be internal to the component I want to transform to add a rotate function which rotates the object's transform matrix. So calling obj.rotate(45) will rotate the object from the center. (I needed to set transforms through code because the transforms a user makes through the TransformManager are saved between sessions).

(Of course no one will care about this because Flex is mostly dead but I put this here because I've spent a painful few days on this and maybe some other sad coder will be faced with this sort of thing in the future ;-)

        public function rotate(angle:Number):void
        {
            var m:Matrix = this.transform.matrix;
            var aroundPoint:Point = resetCenterPoint(this, this.width/2, this.height/2);
            var cm:Matrix = new Matrix(1, 0, 0, 1, -aroundPoint.x, -aroundPoint.y);
            m.concat(cm);

            m.rotate(Math.PI * angle / 180);

            var rcm:Matrix = new Matrix(1, 0, 0, 1, aroundPoint.x, aroundPoint.y);
            m.concat(rcm);
            this.transform.matrix = m;
        }

        private function resetCenterPoint(obj:DisplayObject, orgX:Number, orgY:Number):Point
        {
            var m:Matrix = obj.transform.matrix;

            var orgXY:Point = m.deltaTransformPoint(new Point(orgX, orgY));
            orgXY.x += m.tx;
            orgXY.y += m.ty;
            return orgXY;
        }

ghost shape triggering greensock's TransformManger move cursor

1 Answers1