Return Button back to first frame

[defaultt1g2ty3jinnv]

Hello!

I'm working on a school project which is now overdue because I cannot seem to get the buttons to work properly. I have to use HTML5 canvas. The animation is intended to explain the personalities of colors. It begins with a static page with circle buttons in various colors. These buttons lead to separate frames with the respective color and its personality. The code I used is:

/* Stop at This Frame
The timeline will stop/pause at the frame where you insert this code.
Can also be used to stop/pause the timeline of movieclips.
*/

this.stop();
/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

this.button_1.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()
{
this.gotoAndStop(5);
}

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

this.button_2.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));

function fl_ClickToGoToAndStopAtFrame_2()
{
this.gotoAndStop(10);
}

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

this.button_3.addEventListener("click", fl_ClickToGoToAndStopAtFrame_3.bind(this));

function fl_ClickToGoToAndStopAtFrame_3()
{
this.gotoAndStop(15);
}

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

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

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

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

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

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

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

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

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

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

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

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

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

this.button_8.addEventListener("click", fl_ClickToGoToAndStopAtFrame_8.bind(this));

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

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

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

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

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

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

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

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

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

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

When I try to create a Return button to return to the first frame, I cannot get it to work. I've tried tips and tricks seen in other posts but nothing works. This is the most recent code snippet I've used that isn't working:

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/

this.back.addEventListener("click", fl_ClickToGoToAndStopAtFrame_32.bind(this));

function fl_ClickToGoToAndStopAtFrame_32()
{
this.gotoAndStop(1);
}

Can anyone let me know what I'm doing wrong or other tips I should try?

Thank you!

[kglad]

the first frame in html5/canvas is 0.  ie, use:

this.back.addEventListener("click", fl_ClickToGoToAndStopAtFrame_32.bind(this));

function fl_ClickToGoToAndStopAtFrame_32()
{
this.gotoAndStop(0);
}

p.s. you should probalby double check all your other numbers, too.  ie, gotoAndStop(5) goes to the 6th frame in your timeline (that contains the code).

p.p.s.  you might find it easier to use frame labels instead of numbers.

[defaultt1g2ty3jinnv]

Thank you for your response! I've tried 0 and labels. Nothing seems to be working. The home page buttons work to go to each frame, but nothing is working to return to the home page.

[kglad]

put the return button on the first frame, put its code on the first frame and set the button's visible property to false.

in all other button listeners set return button's visible property to true.