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.
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
...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?
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.
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
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");
}
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.
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.
Copy link to clipboard
Copied
My expression while trying to understand you guys (to be fair it's my expression most of the time)...
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.
Copy link to clipboard
Copied
So you're saying there were no alert popups? That means your setup code isn't even running.
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?
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
Copy link to clipboard
Copied
Here is the link for the file (on We Transfer). Again, any help to solve this would be appreciated.
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");
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.
Copy link to clipboard
Copied
Ive seen Clay comments throughout the Adobe Community and they can come off as rude and unhelpful at times.
Copy link to clipboard
Copied
I had a similar issues, I was told since the files, links, etc are not on a web server they will not work on a browser.