Button with hyperlink not working

[-ppix]

Hello, I'm trying to add a button with an hyperlink to a page on my website to the last frame (the animation is programmed to stop after the last frame) of an HTML5 Canvas animation; when I try the animation in preview the link just works fine, but when I publish it it does not work. What am I missing? Here's the code I added to the action timeline at the last frame:

this.button_1.addEventListener("click", fl_ClickToGoToWebPage);

function fl_ClickToGoToWebPage() {
window.open("https://www.soildao.org/onepager.pdf", "_blank");
}
this.stop();

[kglad]

open your browser's developer console and check for errors.

[-ppix]

There are many errors in the console. I'm gonna paste them below:

createjs.min.js:13 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._testHit @ createjs.min.js:13
b._testMask @ createjs.min.js:13
b._getObjectsUnderPoint @ createjs.min.js:13
b._getObjectsUnderPoint @ createjs.min.js:13
b._testMouseOver @ createjs.min.js:13
(anonimo) @ createjs.min.js:13
setInterval (asinc)
b.enableMouseOver @ createjs.min.js:13
handleComplete @ index.html:2462
(anonimo) @ index.html:2443
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._loadNext @ createjs.min.js:17
b._processFinishedLoad @ createjs.min.js:17
b._handleFileComplete @ createjs.min.js:17
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._resultFormatSuccess @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
b._formatImage @ createjs.min.js:17
b.handleEvent @ createjs.min.js:16
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._handleTagComplete @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
load (asinc)
b.load @ createjs.min.js:16
b.load @ createjs.min.js:16
b.load @ createjs.min.js:17
b._loadItem @ createjs.min.js:17
b._loadNext @ createjs.min.js:17
b._processFinishedLoad @ createjs.min.js:17
b._handleFileComplete @ createjs.min.js:17
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._resultFormatSuccess @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
b._formatImage @ createjs.min.js:17
b.handleEvent @ createjs.min.js:16
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._handleTagComplete @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
load (asinc)
b.load @ createjs.min.js:16
b.load @ createjs.min.js:16
b.load @ createjs.min.js:17
b._loadItem @ createjs.min.js:17
b._loadNext @ createjs.min.js:17
b._processFinishedLoad @ createjs.min.js:17
b._handleFileComplete @ createjs.min.js:17
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._resultFormatSuccess @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
b._formatImage @ createjs.min.js:17
b.handleEvent @ createjs.min.js:16
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._handleTagComplete @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
load (asinc)
b.load @ createjs.min.js:16
b.load @ createjs.min.js:16
b.load @ createjs.min.js:17
b._loadItem @ createjs.min.js:17
b._loadNext @ createjs.min.js:17
b.setPaused @ createjs.min.js:17
b.loadManifest @ createjs.min.js:17
init @ index.html:2445
onload @ index.html:2477
createjs.min.js:13 Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.
b._testHit @ createjs.min.js:13
b._getObjectsUnderPoint @ createjs.min.js:13
b._getObjectsUnderPoint @ createjs.min.js:13
b._getObjectsUnderPoint @ createjs.min.js:13
b._testMouseOver @ createjs.min.js:13
(anonimo) @ createjs.min.js:13
setInterval (asinc)
b.enableMouseOver @ createjs.min.js:13
handleComplete @ index.html:2462
(anonimo) @ index.html:2443
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._loadNext @ createjs.min.js:17
b._processFinishedLoad @ createjs.min.js:17
b._handleFileComplete @ createjs.min.js:17
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._resultFormatSuccess @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
b._formatImage @ createjs.min.js:17
b.handleEvent @ createjs.min.js:16
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._handleTagComplete @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
load (asinc)
b.load @ createjs.min.js:16
b.load @ createjs.min.js:16
b.load @ createjs.min.js:17
b._loadItem @ createjs.min.js:17
b._loadNext @ createjs.min.js:17
b._processFinishedLoad @ createjs.min.js:17
b._handleFileComplete @ createjs.min.js:17
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._resultFormatSuccess @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
b._formatImage @ createjs.min.js:17
b.handleEvent @ createjs.min.js:16
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._handleTagComplete @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
load (asinc)
b.load @ createjs.min.js:16
b.load @ createjs.min.js:16
b.load @ createjs.min.js:17
b._loadItem @ createjs.min.js:17
b._loadNext @ createjs.min.js:17
b._processFinishedLoad @ createjs.min.js:17
b._handleFileComplete @ createjs.min.js:17
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._resultFormatSuccess @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
b._formatImage @ createjs.min.js:17
b.handleEvent @ createjs.min.js:16
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._handleTagComplete @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
load (asinc)
b.load @ createjs.min.js:16
b.load @ createjs.min.js:16
b.load @ createjs.min.js:17
b._loadItem @ createjs.min.js:17
b._loadNext @ createjs.min.js:17
b.setPaused @ createjs.min.js:17
b.loadManifest @ createjs.min.js:17
init @ index.html:2445
onload @ index.html:2477
321createjs.min.js:13 Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.
b._testHit @ createjs.min.js:13
b._testMask @ createjs.min.js:13
b._getObjectsUnderPoint @ createjs.min.js:13
b._getObjectsUnderPoint @ createjs.min.js:13
b._testMouseOver @ createjs.min.js:13
(anonimo) @ createjs.min.js:13
setInterval (asinc)
b.enableMouseOver @ createjs.min.js:13
handleComplete @ index.html:2462
(anonimo) @ index.html:2443
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._loadNext @ createjs.min.js:17
b._processFinishedLoad @ createjs.min.js:17
b._handleFileComplete @ createjs.min.js:17
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._resultFormatSuccess @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
b._formatImage @ createjs.min.js:17
b.handleEvent @ createjs.min.js:16
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._handleTagComplete @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
load (asinc)
b.load @ createjs.min.js:16
b.load @ createjs.min.js:16
b.load @ createjs.min.js:17
b._loadItem @ createjs.min.js:17
b._loadNext @ createjs.min.js:17
b._processFinishedLoad @ createjs.min.js:17
b._handleFileComplete @ createjs.min.js:17
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._resultFormatSuccess @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
b._formatImage @ createjs.min.js:17
b.handleEvent @ createjs.min.js:16
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._handleTagComplete @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
load (asinc)
b.load @ createjs.min.js:16
b.load @ createjs.min.js:16
b.load @ createjs.min.js:17
b._loadItem @ createjs.min.js:17
b._loadNext @ createjs.min.js:17
b._processFinishedLoad @ createjs.min.js:17
b._handleFileComplete @ createjs.min.js:17
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._sendComplete @ createjs.min.js:16
b._resultFormatSuccess @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
b._formatImage @ createjs.min.js:17
b.handleEvent @ createjs.min.js:16
(anonimo) @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b._dispatchEvent @ createjs.min.js:12
b.dispatchEvent @ createjs.min.js:12
b._handleTagComplete @ createjs.min.js:16
(anonimo) @ createjs.min.js:15
load (asinc)
b.load @ createjs.min.js:16
b.load @ createjs.min.js:16
b.load @ createjs.min.js:17
b._loadItem @ createjs.min.js:17
b._loadNext @ createjs.min.js:17
b.setPaused @ createjs.min.js:17
b.loadManifest @ createjs.min.js:17
init @ index.html:2445
onload @ index.html:2477

[-ppix]

Any suggestion?

[kglad]

those aren't errors (and they don't look like the developer console).  what's the url (if uploaded to a web server) of your html?

[-ppix]

It's https://www.soildao.org

[-ppix]

If you need the Adobe Animate file too, I can upload it.

[kglad]

this is your console:

the non-standard errors occur after your opening tree animation. they indicate you're trying to load cross-domain images.

[-ppix]

What does it mean? Aren't needed images automatically included in the images folder when you publish the animation?

[kglad]

yes, they are (assuming you're saving on on local hard drive).

what are your publish settings?

did you manually edit anything in your html or js files?

do you have an code used to load anything?

[-ppix]

Yes, I'm loading from my hard drive when I test it locally and the errors shown in the developer console are the same.

I attached my publish settings screenshots to this message.

I didn't edit anything in the html or js files.

I didn't have any extra code used to load anything on my website.

I loaded the Adobe Illustrator .fla file too to on Google Drive if you want to check out anything else, because I can't attach it to this message; you can find it here: https://drive.google.com/file/d/1Jmx0Gp4-9wlhotEUclQb3Gd_dqltk-nn/view?usp=share_link

Thank you in advance for your precious help, Kglad!

[ClayUUID]

Image buttons violate browser security policies when run directly from the local file system, full stop.

Test from within Animate.

[kglad]

@ClayUUID 

the op uploaded to a web server (https://www.soildao.org) and i tested, detecting the cross-domain issue.

[-ppix]

Hi Kglad, I granted you the access you requested to the Google Drive hosted file if you wish to download it.

[kglad]

i don't see a problem, https://www.kglad.com/Files/forums/circuitry

[-ppix]

I'm pretty astonished. So why in the world the same animation doesn't work when I test it locally or I upload it on my web server?

[-ppix]

Of course I mean the link in the animation.

[kglad]

something on your server is causing the problem.

[-ppix]

Please correct me if I'm wrong, but the same problem should not manifest itself when I test the animation on my own machine from my local hard drive if it was something in the server causing it.

[kglad]

that depends on how you test.

if you open the html file on your computer, you expect exactly the same error.

if you open your fla in animate and test, you do not expect that error.