HTML5 canvas buttons problems

[penelope16B6]

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...

[JoãoCésar]

Good evening!

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

Regards,

JC

[penelope16B6]

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?

[JoãoCésar · Accepted solution]

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

[penelope16B6]

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?

[JoãoCésar]

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

[penelope16B6]

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...

[JoãoCésar · Accepted solution]

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

[penelope16B6]

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.   

[JoãoCésar]

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

[penelope16B6]

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...

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...

Where is the mistake?

[JoãoCésar · Accepted solution]

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

[penelope16B6]

Thank you for all the advice, that you gave! 

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

Thank you again!

[JoãoCésar]

You're welcome!

Just let me know!

Have a nice week! 😄