• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Incorrect pivot position of symbols when publishing HTML5 Canvas documents.

New Here ,
Oct 10, 2023 Oct 10, 2023

Copy link to clipboard

Copied

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.

TOPICS
Code , Product issue

Views

201

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 10, 2023 Oct 10, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 10, 2023 Oct 10, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 10, 2023 Oct 10, 2023

Copy link to clipboard

Copied

use the transform tool.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 10, 2023 Oct 10, 2023

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 10, 2023 Oct 10, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 11, 2023 Oct 11, 2023

Copy link to clipboard

Copied

Jason32839262p6pm_0-1697045806168.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 11, 2023 Oct 11, 2023

Copy link to clipboard

Copied

those look like reg points, not transform points.

 

again,select the transform tool and click one.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 11, 2023 Oct 11, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 11, 2023 Oct 11, 2023

Copy link to clipboard

Copied

LATEST

i don't have that info 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 11, 2023 Oct 11, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines