HTML not working outside AnimateCC

[kristofferhegge]

I'm having issues with making HTML5 Canvas-projects work in-browser outside of testing in AnimateCC.

During testing it works fine, however after publishing it shows up, but no animations or buttons work.

Other people who asked the same questiion fixed it by disabling spritesheets, and I've done this, but to no avail.

Also, all images used are in a folder within the same folder as the HTML- and Javascript-file.

Also the Javascript-file gives me a syntax error when i click it (type 800A03EA), but I don't know it this is relevant.

Any help would be much appreciated!

[resdesign]

have you checked the javascript console. If yes, what does it say?

[kristofferhegge]

The console gives 3 uncaught errors that are "most likely due to security restrictions on reading canvas pixel data with local or cross-domain images."

[GoryGreg]

Assuming you have already unticked 'Export document as texture' in the Publish settings (as you mention you disabled spritesheets) then I'm wondering...

[JoãoCésar]

Haha!

It was about time for this to become a meme.

[resdesign]

I was going to say that! Haha!

[kristofferhegge]

Tried switching off advanced layers, but it didn't work.

It did however change the error from clicking the .js file to expecting an object but not finding it

[resdesign]

So I am wondering, have you tried it when uploaded to a server?

[kristofferhegge]

Haven't tried when uploaded to a server yet, still working on that

[resdesign]

If you want you can send us a link to your file on a cloud server and we can test on our end. If you do not want to make it public, you can PM the link to me and I can test it.

[JoãoCésar]

Hi.

Two easy ways of running a website locally and online:

LOCALLY:

- Go to brackets.io;

- Install Brackets;

- Open Brackets;

- Go to File > Open Folder...;

- Select the root folder of your website;

- Select your main .html;

- On the top right corner, click the button Live Preview.

ONLINE:

- Go to netflify.com;

- Create an account - is free;

- Then just drag and drop the root folder of your website onto their page;

- Your site will be online in seconds.

Regards,

JC

[mohit_]

Isn't live preview in Brackets just what Adobe Animate does when one tests an FLA by Ctrl+Enter? 

[JoãoCésar]

Hi.

Yeah, pretty much. But that's for testing purposes only.

[ClayUUID]

There is literally zero chance of this sort of problem being caused by Advanced Layers. Advanced Layers changes the internal object model in ways that affect scripting; it does not care whether the page is loaded via http: or file:.

Contrariwise, when Animate pages work from the preview but not when run directly from the file system, nearly 100% of the time this is caused by the browser's security model. Chrome and apparently Safari stupidly don't consider any resources to be coming from the same origin when loaded via file: (thus tainting the canvas and raising a same-origin security violation when scripts attempt to read it), while Firefox, Edge, and IE handle it properly.

[JoãoCésar · Accepted solution]

Hi.

Maybe you're facing some security issues.

Animate CC automatically setups a server for you when you test your application and that's why everything works the way it should.

When comes the time to run the page outside of Animate, you'll need to setup a local server (using something like XAMPP, Brackets, or the LiveServer extension for Visual Studio Code) or just upload your files to an online server.

Regards,

JC

[CharlesCaptain]

What do I need to do to get the Javascript to run on the server when I upload it to my website?  Do I need to add something in the code, or update my website settings?
I'm using Bluehost, if that makes a difference.

[SomersProductions]

I had the same issue.

My html file wouldn't do any animations on my computer, but when I uploaded it to an online server, it worked fine.

[kristofferhegge]

Was able to make it work locally using Brackets!

Thanks for all the help everyone!!

[resdesign]

[JoãoCésar]

Excellent!

You're welcome!