CreateJS returns Transformation Point in instead of movieclip's x,y properties (Animate)

[ralphbrooker]

In AS3, when you access the x and y properties of a movieclip that is on the stage, you get the actual properties of the movieclip's origin (0,0 in the symbol).

In CreateJS, however, the x and y properties return the Transformation Point (the registration point in that the Free Transform tool uses). By default the Transformation Point is in the center of the object, but it can be moved graphically by the Animate author.

I am converting AS3 code to JS and this creates a major problem. I have movieclips that were aligned in AS3 script that now are in the wrong places under JS control. (A nasty surprise is if you happen to have moved the Transformation Point by mistake when dragging with the Free Transform tool.) As discussed in an old thread, you can potentially derive where the Transformation Point is using Matrix methods, but it is unclear if that actually works. #14

Are there different properties we can access to get the object's true x and y? If not, can this issue please by submitted as a bug?

The only workaround I can see is to manually go into Animate, zoom in on each and every movieclip of interest, click the Free Transform tool, and drag the transformation point (circle) onto the movieclips origin (+ mark). Very slow and not accurate...

CreateJS version is 1.0.0 (this is loaded with Adobe Animate for publishing to HTML5/Canvas)
Animate version is 20.0.1
Windows 10, Chrome

(Related question - how to configure Animate to run the current version of CreateJS?)

Thank you all!

[danzen]

Hi Ralph, I could be mistaken, as it has been a while since I have used Flash but I did use it extensively for a dozen years... I thought it is the same system as we have in CreateJS. Where the x and y of a MovieClip is the location of the registration point and not the origin within the MovieClip. I have also seen really large projects - like pages and pages of clips within clips, etc. transferred over into CreateJS and things were all in place. But, like I said - it has been a while so perhaps we could get some others to confirm?

Here is a screenshot of a MovieClip with registration in the center and the panel is showing an x (92) and y to the registration point. When I export and ask for the x position of the clip it tells me 92. I perhaps misunderstand the issue?

[ralphbrooker]

Hi danzen -
Not quite sure what you meant by "export"... I was referring to the x and y properties that AS3 gives.

I made an example FLA - screen shot attached. The blue box is a symbol "mySymbol" containing a rectangle.
AS3 timeline script trace("mySymbol.x = "+mySymbol.x +", mySymbol.y = "+mySymbol.y);
prints mySymbol.x = 100, mySymbol.y = 150

You can see that matches the upper left corner, of the box, which where the symbol shows its + mark. If you edit the symbol itself, that is the 0,0 point.

But back at the main stage, if you select the symbol with the Free Transform too, you see the white circle that is the transformation center. You can drag that anywhere without moving the symbol itself.

The issue is that if you ask CreateJS for the x and y properties, you get x=240, y = 200 which is the white circle, not the symbol's x, y properties.

I did subsequently learn from the Animate forum that CreateJS has additional properties regX and regY (which are undefined in AS3). regX and regY give you the position of the white circle with respect to the symbol's actual x and y. You can set them too. So a workaround is to something like:
trueX = symbol.x - symbol.regX;
then optionally
symbol.regX = 0;
symbol.x = trueX;

Does that make sense?
Ralph

[danzen]

Well how about that! AS3 never had a regX and a regY. Wow - how quickly one forgets. Yes... in CreateJS there is an origin which is 0,0 inside the clip. Then there is an x and y of the bounds which may or may not be at 0,0. And there is a registration point which is specified based on the origin and about which the object rotates and scales. It is also the point on the object that gets placed at the object's x and y properties in the parent's coordinate system. All three of these could be different values. But that is CreateJS.

I see what is happening... I made my example in the Canvas export. Is that why my numbers add up when I publish? (I meant publish rather than export.) So, not sure with respect to a "fix" out of the box but yes - if you were using x and y to set the location in AS3 then you would add the regX or regY to that to make the shape be in the right place. If you were wanting to know origin's x and y in the parent then you would subtract the regX and regY as you say.

I have not exported AS3 to CreateJS but I know some folks who have - would you like me to ask them or do you think you have enough to go on now? There may be better answers from the original CreateJS team but we are starting to ramp up the community help to see if we can get some of these issues answered or taken care of. Cheers.

[ralphbrooker]

To recap the three points you described in CreateJS:
A: an origin which is 0,0 inside the clip.
B. an x and y of the bounds which may or may not be at 0,0.
C. a registration point which is specified based on the origin and about which the object rotates and scales. It is also the point on the object that gets placed at the object's x and y properties in the parent's coordinate system.

I think the issue is that in AS3, point A (the object's internal origin) is the point that gets placed the object's x and y properties in the parent's coordinate system, not point C.

My workaround is satisfactory, as I am hand-editing all my code and I made a utility function that zeroes out regX and regY so from then on x and y behave as they do in AS3. But it might be nice to have a mode flag you could set ("useOriginAsXY") which would default to false for compatibility, but which users (and maybe Animate itself) could set to true when CreateJS starts up.