Publishing HTML5 issues, elements moving incorrectly, disappearing, does not match timeline playback

[danielb14319739]

I feel like I'm going insane! After spending hours trying to perfect some HTML ads, after publishing everything is all messed up and I ALWAYS have to dig around in the JS and manually fix all of the issues by hand.

Here's an example: winter 300x600

There should be no diagonal movement at any point. elements are jumping around. some masks straight up disappeared. I've checked the publish settings thoroughly and tried many different settings and ways of building the files, but I ALWAYS end up with these similar issues.

I had a different ad that published nearly perfectly, with the exception of a single flash frame at the end that was my own error. I removed the last frame and republished and suddenly entire elements had completely disappeared. I ctrl + z and republish, and still the elements were gone. I couldn't figure out how to bring them back for hours. In desperation at one point I deleted all frames and published, then hit ctrl + z and republished, and for some reason that brought back several of the elements. I ended up having to manually type my own JS in the output file in order to make all of the elements show up and function correctly.

I've been making web ads with Animate for a couple years and these problems have been persistent. Playback in Animate looks perfect, but the published result is just a buggy mess! No errors of any kind. What am I doing wrong??? Is this normal?

Here's a dropbox link to the file that produced the output above. I'm really desperate for some sort of solution... I don't think i've ever been so frustrated in my life!!

Dropbox - winter 300x600.fla

[JoãoCésar · Accepted solution]

Hi.

No need to change any JS.

The problem is that your transformation points (that white dot that appears when we use the Free Transform Tool (Q)) are not consistent. Sometimes they are in the middle, sometimes outside of the bounding box, sometimes in some corner. This is even more problematic in tweens.

I did a really poor fix in the "one" layer. I tried to set all containers with the registration point and the transformation point in the middle. You'll see that at least your animations won't move in the diagonal anymore.

FLA download:

winter 300x600 edited.zip - Google Drive

I hope this helps.

Regards,

JC

[danielb14319739]

Thank you!!! I have no idea how the transform points could have changed... I didn't touch any of them at any point creating this file. I'll definitely keep a closer eye on those though. You're a life saver.

I still wish Animate would show the elements animating diagonally if there were transform point issues so that they would be easier to spot. It doesn't make sense to me that you only have the issues after publishing. Consistency would be really nice... but I'm so relieved to finally have a solution. Thank you again!

[JoãoCésar]

Excellent!

You're welcome!

The transformation points can go unnoticed very easilly. They can cause even more confusion now in HTML5 documents because they are now the reference for display objects positioning in code and not the registration point like it used to be in AS3 documents.