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.
Any help would be much appreciated!
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."
Assuming you have already unticked 'Export document as texture' in the Publish settings (as you mention you disabled spritesheets) then I'm wondering...
It was about time for this to become a meme.
I was going to say that! Haha!
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
So I am wondering, have you tried it when uploaded to a server?
Haven't tried when uploaded to a server yet, still working on that
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.
Two easy ways of running a website locally and online:
- 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.
- 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.
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.
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.
I'm using Bluehost, if that makes a difference.
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.
Was able to make it work locally using Brackets!
Thanks for all the help everyone!!