Highlighted

HTML not working outside AnimateCC

Community Beginner ,
Jan 08, 2019

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

2.8K

Likes

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

HTML not working outside AnimateCC

Community Beginner ,
Jan 08, 2019

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

2.8K

Likes

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
Jan 08, 2019 0
Adobe Community Professional ,
Jan 08, 2019

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jan 08, 2019 0
Community Beginner ,
Jan 09, 2019

Copy link to clipboard

Copied

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."

Likes

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
Reply
Loading...
Jan 09, 2019 0
Engaged ,
Jan 08, 2019

Copy link to clipboard

Copied

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

advancedlayers.jpg

Likes

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
Reply
Loading...
Jan 08, 2019 3
Adobe Community Professional ,
Jan 08, 2019

Copy link to clipboard

Copied

Haha!

It was about time for this to become a meme.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Jan 08, 2019 2
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

I was going to say that! Haha!

Likes

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
Reply
Loading...
Jan 09, 2019 1
Community Beginner ,
Jan 09, 2019

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jan 09, 2019 0
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jan 09, 2019 0
Community Beginner ,
Jan 09, 2019

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jan 09, 2019 0
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Jan 09, 2019 0
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Jan 09, 2019 2
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Jan 09, 2019 0
Adobe Community Professional ,
Jan 08, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Jan 08, 2019 1
New Here ,
Jan 27, 2020

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Jan 27, 2020 0
Community Beginner ,
Jan 08, 2019

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Jan 08, 2019 1
Community Beginner ,
Jan 09, 2019

Copy link to clipboard

Copied

Was able to make it work locally using Brackets!

Thanks for all the help everyone!!

Likes

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
Reply
Loading...
Jan 09, 2019 1
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

Likes

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
Reply
Loading...
Jan 09, 2019 0
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

Excellent!

You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Jan 09, 2019 0