Incorrect pivot position of symbols when publishing HTML5 Canvas documents.

[Jason32839262p6pm]

When creating and publishing HTML5 Canvas documents and controlling the symbols with JS the pivot point is set incorrectly in some cases. I can only get the pivot to be set correctly when converting existing shapes or images to a symbol with the registration point set to the center point initially. I can then move my object around and the child position and the pivot align as they did before in an AS3 document. However, if I set it to any other position type like top-left it will still position itself and rotate from the original center position. Then when re-positioning the contents it uses that same offset from the top-left to the center point which is incorrect. So how it ends up in the final HTML and how it appears when viewing the pivot point position within Animate are different. So it seems like it is writing some pivot information on creation but is always setting it to the center regardless of what you set the initial position to be in the symbol settings. This leads to different behaviors when trying to animate and position elements in code depending on how they are created they have a different and inconsistent behavior. As far as I can tell it has always been this way since adding the new HTML/JS file type, so this is not a new behavior. This is why it has been so frustrating for me when switching from AS3 to HTML5 Canvas. Now after sitting down and figuring out exactly how it is behaving, it is absolutely a bug. It would be great to get this fixed I am sure new users would be far less confused about why things are not working as expected. Because it is seemingly random when you have your code to behave a certain way and it depends on if you set the center point or choose a different type.

[kglad]

are you using the free transform tool to adjust your transform point?

[Jason32839262p6pm]

No, I don't think I ever use that tool, usually I will use the property panel. 

[kglad]

use the transform tool.

[Jason32839262p6pm]

Here is some tests I have been doing. The gray boxes are created normally with a center pivot point. The green are created the same way and then moved to the top left manually. The red box is created by setting top left as the pivot when creating the symbol. The canvasUI.jsfl should be renamed to canvasUI.js would not allow me to attach it that way. and it is looking for it in a sub folder but you can change the path in the global include code. Looking into the free transform it looks like the circle is what is being used as the pivot point in the HTML/JS code instead of the + point which is what it was using in JS3. It would be great if those were linked on the symbol creation so that this issue did not happen in the first place. 

[kglad]

select a symbol that you think should have top-left transform point > click the transform tool and take screenshot.  copy the screenshot and paste (do not attach) here.

[Jason32839262p6pm]

[kglad]

those look like reg points, not transform points.

again,select the transform tool and click one.

[Jason32839262p6pm]

right I see that now so at least it can be worked around, but I guess the question is WHY is it using a different point for HTML5 than it was previously for AS3?

[kglad]

i don't have that info 

[MrMoxo]

Maybe you can try "Set Reg Point to Transformation point" tool by Flanimate.