HTML5 canvas buttons problems

Community Beginner ,
Feb 17, 2021 Feb 17, 2021

Copy link to clipboard

Copied

Good evening everyone!

I reallly need help with my project in HTML5 canvas. Ok, so I have created a stage with many buttons (9 to be accurate) and in timeline I have the layers Stage, Buttons and Actions. From the beginning the code for buttons was nightmare... I did not know why it does not work

(it used to be so easy in flash), at last finaly wih the code that follows I had luck...

this.pointt_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_4.bind(this));

function fl_ClickToGoToAndStopAtFrame_4()
{
this.gotoAndStop(24);
}

So as the first button worked,  I used the code, the same code, to the next 2 buttons succefully. And here is the next problem... when in the forth button I used the code, it worked but it does not work correctly for the previous buttons. It takes the frame from the forth button and redirects all the other buttons in the frame of the forth. In the console of chrome it does not appear error (but in my previous atempts in code I had a problem). I really do not understand the problem... They have instance names, I follow the most advice but I could not make it work. Also, write simple advice, please, I am not an expert in animate and I have years to make something in flash. Please, help me if you could, I have a deadline for this...

Views

272

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
community guidelines

correct answers 3 Correct Answers

Adobe Community Professional , Feb 18, 2021 Feb 18, 2021
Thanks for the code. Is all this code on the main timeline? Anyway, the problem it's because you're using the same function name several times. For example: function fl_ClickToGoToAndStopAtFrame_6() { this.gotoAndStop(24); } function fl_ClickToGoToAndStopAtFrame_6() { this.gotoAndStop(45); } function fl_ClickToGoToAndStopAtFrame_6() { this.gotoAndStop(65); } function fl_ClickToGoToAndStopAtFrame_6() { this.gotoAndStop(85); } If you want your buttons to lead to different frames, give...

Likes

Translate

Translate
Adobe Community Professional , Feb 19, 2021 Feb 19, 2021
Hi again! Sorry. I overlooked the first line. If all that you want is a button to close the window, then the line... this.exit.addEventListener("click", window.close); ... is all that you need. The function closeCurrentWindow can be discarded. And do you mind sharing your FLA here if you're still facing problems? Regards, JC

Likes

Translate

Translate
Adobe Community Professional , Feb 22, 2021 Feb 22, 2021
This should work: https://hungry-einstein-eee775.netlify.app/index.html But it gets stucked in the preloader. Did you change the name of the html by hand? If so, that's the problem. Because the JS file still has the old name (Test100). The best way to rename your HTML is in the Publish Settings (Ctrl/Cmd + Shift + F12) > JavaScript/HTML > Output name field. Change this field to index (without .html). Please let us know. Regards, JC

Likes

Translate

Translate
Adobe Community Professional ,
Feb 17, 2021 Feb 17, 2021

Copy link to clipboard

Copied

Good evening!

 

Can you show us the complete code so we can better understand what's going on?

 

Regards,

JC

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
community guidelines
Community Beginner ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

Good morning! And many thanks for the immediate response!

Ok, so I had that code:

this.Point1_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_6.bind(this));

function fl_ClickToGoToAndStopAtFrame_6()
{
this.gotoAndStop(24);
}

this.Point2_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_6.bind(this));

function fl_ClickToGoToAndStopAtFrame_6()
{
this.gotoAndStop(45);
}

this.Point3_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_6.bind(this));

function fl_ClickToGoToAndStopAtFrame_6()
{
this.gotoAndStop(65);
}

this.Point4_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_6.bind(this));

function fl_ClickToGoToAndStopAtFrame_6()
{
this.gotoAndStop(85);
}

I discover that if the frame of reference is the same (in this code Frame_6), it does not work after the third button... So, I experiment with that and all my buttons is working now with the following code:

/* Logo-Button*/
this.logoroutes_buttons.addEventListener("click", fl_ClickToGoToAndStopAtFrame_12.bind(this));

function fl_ClickToGoToAndStopAtFrame_12()
{
this.gotoAndStop(0);
}
/* Xartodiadromi-Buttons*/
this.pointt_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_4.bind(this));

function fl_ClickToGoToAndStopAtFrame_4()
{
this.gotoAndStop(24);
}

this.pointt2_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_5.bind(this));

function fl_ClickToGoToAndStopAtFrame_5()
{
this.gotoAndStop(44);
}

this.pointt3_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_6.bind(this));

function fl_ClickToGoToAndStopAtFrame_6()
{
this.gotoAndStop(64);
}

this.pointt4_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_7.bind(this));

function fl_ClickToGoToAndStopAtFrame_7()
{
this.gotoAndStop(84);
}

/* Xronodiadromi-Buttons*/
this.xrono1_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_8.bind(this));

function fl_ClickToGoToAndStopAtFrame_8()
{
this.gotoAndStop(24);
}

this.xrono2_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_9.bind(this));

function fl_ClickToGoToAndStopAtFrame_9()
{
this.gotoAndStop(44);
}

this.xrono3_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_10.bind(this));

function fl_ClickToGoToAndStopAtFrame_10()
{
this.gotoAndStop(64);
}

this.xrono4_button.addEventListener("click", fl_ClickToGoToAndStopAtFrame_11.bind(this));

function fl_ClickToGoToAndStopAtFrame_11()
{
this.gotoAndStop(84);
}

I somewhat understood that, but I have some questions, if you can answer. 1. Why until the third button, the code worked (and that made me to search the mistake in other things, like more layers in a symbol-button, or the kind of graphics I used, or instance names etc.)? 2. Why the frame (for example 6) of reference accepts the 3 different symbols-buttons and who exactly are the properties in HTML5 canvas? 3. The frames that are used in my project 6,7,8,9 etc. are full frames with other content, so why that is not malfunctions?

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
community guidelines
Adobe Community Professional ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

Thanks for the code.

 

Is all this code on the main timeline?

 

Anyway, the problem it's because you're using the same function name several times. For example:

function fl_ClickToGoToAndStopAtFrame_6()
{
	this.gotoAndStop(24);
}

function fl_ClickToGoToAndStopAtFrame_6()
{
	this.gotoAndStop(45);
}

function fl_ClickToGoToAndStopAtFrame_6()
{
	this.gotoAndStop(65);
}

function fl_ClickToGoToAndStopAtFrame_6()
{
	this.gotoAndStop(85);
}

 

If you want your buttons to lead to different frames, give them different functions.

 

Please try this fix and let us know.

 

And to learn more about the HTML5 Canvas document, please read this answer:

https://community.adobe.com/t5/animate/play-and-stop-sound-in-html5-canvas/m-p/11613235#M337732

 

Regards,

JC

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
community guidelines
Community Beginner ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

I used the following code for the exit button:

//close current window

this.exit.addEventListener("click", window.close);
function closeCurrentWindow()
{
this.window.close();
}

But I have the same problem, after the third time it does not work. I try the suggestion with different names, but it stills not working... Do you have any idea what is wrong now?

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
community guidelines
Adobe Community Professional ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

Hi.

 

It's because window is a global variable that represents an open window in a browser and it must be referenced directly without the this keyword. It should be:

function closeCurrentWindow()
{
    window.close();
}

 

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
community guidelines
Community Beginner ,
Feb 19, 2021 Feb 19, 2021

Copy link to clipboard

Copied

Hi, again! Thank you for your replies very much!

I tried the code as it you put it:

this.exit.addEventListener("click", window.close);
function closeCurrentWindowPoint2b()
{
window.close();
}

The problem is the same... It works for the first 3 exit buttons, but after it does not... Ι try the different names for the functions of course, but it does not work. What is the problem? It makes no sense...

 

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
community guidelines
Adobe Community Professional ,
Feb 19, 2021 Feb 19, 2021

Copy link to clipboard

Copied

Hi again!

 

Sorry. I overlooked the first line.

 

If all that you want is a button to close the window, then the line...

this.exit.addEventListener("click", window.close);

 

... is all that you need. The function closeCurrentWindow can be discarded.

 

And do you mind sharing your FLA here if you're still facing problems?

 

Regards,

JC

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
community guidelines
Community Beginner ,
Feb 19, 2021 Feb 19, 2021

Copy link to clipboard

Copied

You really are a lifesaver! Thank you so much for your advice!

In current moment I cannot share my project because my company has some stimulations about that and the content (graphics, information etc), but maybe in a later date I can upload something here (because we will be working for that project at least 4 more months).

Anyway, (again) I want to ask about the publish file that I have to send to my boss until tomorrow. 

How I can send it,  so to open in his browser without the .fla file? I notice that the publish command in the file of animate does not export in something like swf, that flash use to have. What is the best export options for an an application in HTML5 canvas?

Thanks again for your time... I probably disturb you again until tomorrow.   

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
community guidelines
Adobe Community Professional ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

Hi again.

 

Sorry for the delay.

 

And I understand that you are not allowed to share your content. No problem.

 

The easiest way for you to share your content with other people is by uploading it to a web server and sending the link to them. For this I recommend Netlify because of the ease of usage.

 

Please read this answer:
https://community.adobe.com/t5/animate/need-help-update-from-swf-files-to-html-files/m-p/11423541#M3...

 

Regards,

JC

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
community guidelines
Community Beginner ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

Thank you again for the advice! 

I saw the link that you posted and I follow th advice for the Netlify, but I cannot see the result...

penelope16B6_0-1614007568006.png

Of course the content of the drag file is index.html and index.js....I also had the files of images ect. 

Furthermore in the deploy everything seems ok...

penelope16B6_1-1614007725810.png

Where is the mistake?

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
community guidelines
Adobe Community Professional ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

This should work:

https://hungry-einstein-eee775.netlify.app/index.html

 

But it gets stucked in the preloader.

 

Did you change the name of the html by hand? If so, that's the problem. Because the JS file still has the old name (Test100).

 

The best way to rename your HTML is in the Publish Settings (Ctrl/Cmd + Shift + F12) > JavaScript/HTML > Output name field.

image.png

 

Change this field to index (without .html).

 

Please let us know.

 

Regards,

JC

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
community guidelines
Community Beginner ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

Thank you for all the advice, that you gave! 

Please, stay tuned with me and my project!!!

Thank you again!

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
community guidelines
Adobe Community Professional ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

LATEST

You're welcome!

 

Just let me know!

 

Have a nice week! 😄

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
community guidelines