Skip to main content
IanDavidJohnson
IanDavidJohnson
Participating Frequently
December 4, 2019
Answered

External URL Links are Not Opening

  • December 4, 2019
  • 2 replies
  • 2660 views

I have created an animated product selector which works really well except for the Find Out More buttons. The button is located along the timeline and depending on the selection proces used by the site visitor they end up at a product recommendation. The button is set to open a _blank URL which provides more info on the product. I have used HTML5 Canvas code for the button links as below:

this.find_out_more_btn.addEventListener("click", fl_ClickToGoToWebPage_13);

function fl_ClickToGoToWebPage_13() {
window.open("http://www.amscorp.com.au/index.php/products/toc-analysers/900-laboratory-toc/", "_blank");
}

The animation works fine but even in Test mode the links do not open. The cursor changes to pointer but no action takes place. I have the code embedded into an iFrame and it is running as expected but I need to be able to open the relevant pages. The URL for the Selector tool is:

http://amscorp.com.au/index.php/products/toc-analysers/toc-selection-chart/

The button sits on its own level on the timeline and the actions are applied to the frame where the timeline is stopped. I am struggling to see what the problem could be.

This topic has been closed for replies.
Correct answer ClayUUID

Here is the link for the file (on We Transfer). Again, any help to solve this would be appreciated.

 

https://we.tl/t-CV2D0grGsZ


I see you have a habit of scattering your code across multiple layers in the same frame. That is a really, really, REALLY bad idea. Don't ever do that.

 

Your frame rate is rather low, making all your animations look jerky.

 

You don't use easing on any of your tweens.

 

Your initial set of three buttons is too small. They should each cover the entire image.

 

Your first Find Out More button doesn't have an instance name.

 

The "stop()" in your product sections is invalid code. They all need to be "this.stop();"

 

You don't have to repeat "var _this = this;" for every single event listener assignment. Just once per block of code is all that's needed.

 

You have frame labels set up but don't actually use them in your goto statements. Use them. Hard-wired frame numbers are begging for trouble. In fact, your use of frame numbers is causing the exact problem you're having! As Animate reminds you every single time you publish, "Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls." Instead of jumping to the frames with your button setup code, you're actually jumping to one frame after the code.

 

When the user starts over, the code re-adds event listeners to every button. So every click makes the associated action happen twice, then thrice, and so on every time the user starts over. You need to put this code before every addEventListener() and on() statement:

 

this.button name.removeAllEventListeners("click");

2 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
December 6, 2019

Hi.

 

Are you adding the click event listener and defining the function in the same frame? Because if you want to have an event handler available throughout the entire timeline, you have to attach it to an object (so it's going to be a method and not a function). Normally the root.

 

For example:

this.doSomething = function(){ console.log ("something"); };

It can be called in any frame of the same timeline.

 

function(){ console.log("something"); };

It can only be called within the same frame it was defined.

 

But if this is not the case, can you share your file for investigation?

 

 

Regards,

JC

C
ClayUUID
Legend
December 6, 2019

Because if you want to have an event handler available throughout the entire timeline, you have to attach it to an object

 

False. As long as there is an active reference to a function, it will continue to exist. That's essentially what closures do.

 

Ian, whenever code isn't working, you must verify everything you're assuming to be true. In this case, you're assuming that the event handler is being assigned, and you're assuming that it's executing. One or more of these assumptions must be incorrect. Try replacing your code with this:

alert(this.find_out_more_btn);
this.find_out_more_btn.addEventListener("click", fl_ClickToGoToWebPage_13);

function fl_ClickToGoToWebPage_13() {
	alert("clicked!");
	window.open("http://www.google.com/", "_blank");
}

 

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
December 6, 2019

OK. Thanks.

 

But can you give us an example of how to keep a function available throughout the entire timeline without assigning it to a property? Because that's the point.

IanDavidJohnson
IanDavidJohnsonAuthor
Participating Frequently
December 6, 2019

So I have rebuilt this a dozen times now and I still cannot get the buttons to have any action at all. The cursor changes to indicate that the button is working OK but no matter what I do to the link it does not open a new url link. I have tried it in Chrome, Firefox and Safari but none of them work.

 

Can anyone suggest what could be going wrong here?

IanDavidJohnson
IanDavidJohnsonAuthor
Participating Frequently
December 6, 2019

I am not seeing any console errors and even if I use Test Movie (running it outside an iFrame it still does not work. I have this on a live site replacing a previous Flash animation (which worked fine) and I cannot get it to work.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices