Highlighted

External URL Links are Not Opening

New Here ,
Dec 03, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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");

TOPICS
Code

Views

281

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

External URL Links are Not Opening

New Here ,
Dec 03, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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");

TOPICS
Code

Views

282

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
Dec 03, 2019 0
New Here ,
Dec 05, 2019

Copy link to clipboard

Copied

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?

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...
Dec 05, 2019 0
New Here ,
Dec 05, 2019

Copy link to clipboard

Copied

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.

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...
Dec 05, 2019 0
Adobe Community Professional ,
Dec 06, 2019

Copy link to clipboard

Copied

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

__________________________________________
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...
Dec 06, 2019 0
Adobe Community Professional ,
Dec 06, 2019

Copy link to clipboard

Copied

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");
}

 

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...
Dec 06, 2019 0
Adobe Community Professional ,
Dec 06, 2019

Copy link to clipboard

Copied

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.

__________________________________________
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...
Dec 06, 2019 0
Adobe Community Professional ,
Dec 06, 2019

Copy link to clipboard

Copied

You can't without assigning it to a property. But addEventListener does exactly that-- it stores an internal reference to the function. I tested it and it works.

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...
Dec 06, 2019 0
Engaged ,
Dec 06, 2019

Copy link to clipboard

Copied

My expression while trying to understand you guys (to be fair it's my expression most of the time)...

giphy

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...
Dec 06, 2019 1
New Here ,
Dec 06, 2019

Copy link to clipboard

Copied

I substituted that code for my button action in the timeline and still no response when I test the movie. The button shows a cursor change but no action on clicking.

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...
Dec 06, 2019 0
Adobe Community Professional ,
Dec 07, 2019

Copy link to clipboard

Copied

So you're saying there were no alert popups? That means your setup code isn't even running.

 

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...
Dec 07, 2019 0
New Here ,
Dec 06, 2019

Copy link to clipboard

Copied

I am happy to share my fla file as there is nothing confidential in the file or the actions associated. Again any help would be appreciated. How am I able to share the file in this community?

 

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...
Dec 06, 2019 0
Adobe Community Professional ,
Dec 07, 2019

Copy link to clipboard

Copied

Hi.

 

You can upload your file to a file sharing service like Dropbox, Google Drive, WeTransfer, and paste the link here.

 

 

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...
Dec 07, 2019 0
New Here ,
Dec 08, 2019

Copy link to clipboard

Copied

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

 

https://we.tl/t-CV2D0grGsZ

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

Copy link to clipboard

Copied

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");

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...
Dec 09, 2019 1
New Here ,
Dec 09, 2019

Copy link to clipboard

Copied

I feel somewhat chastised, but also accept the comments. To put this in context this was originally a Flash file created in 2010 for one of my clients. It has operated on the same website for 9 years without problems and then finally time has caught up with it and the embedded swf file is no longer supported by browsers. It has worked flawlessly for 9 years. I did a straight conversion from the Flash file to HTML5 Canvas using the conversion tool. Most of the code was created during the conversion. I have now fixed it all. Placed all the consolidated scripts onto one layer, removed unnecessary code and corrected the errors you highlighted. It now works. The one line that was stopping the external URL's from working was:

this.find_out_more9.addEventListener("click", fl_ClickToGoToWebPage_21);........ this should have been:

_this.find_out_more9.addEventListener("click", fl_ClickToGoToWebPage_21);

 

Thanks for your help.

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...
Dec 09, 2019 0