Return Button back to first frame

New Here ,
Dec 18, 2020 Dec 18, 2020

Copy link to clipboard

Copied

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!

TOPICS
Code

Views

69

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 ,
Dec 20, 2020 Dec 20, 2020

Copy link to clipboard

Copied

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.

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
New Here ,
Dec 20, 2020 Dec 20, 2020

Copy link to clipboard

Copied

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.

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 ,
Dec 20, 2020 Dec 20, 2020

Copy link to clipboard

Copied

LATEST

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.

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