Highlighted

Button navigation stops working after 1 play through on Adobe Animate using an HTML Canvas

New Here ,
Mar 30, 2020

Copy link to clipboard

Copied

I am having an issue with navigation in Adobe Animate CC 2020.  I have not used Animate with any coding since the early Flash days and I have a project that requires as simple navigation of a Back and Foward Buttons that will allow to move through the timeline.  The problem I am having is everything works great the first time through each button either moves foward to the correct frame and stops on the next frame with the buttons or goes backwards appropriately.  Where the problem occurs is once you you have moved foward or backwards with all of the buttons at least once, all of the back buttons no longer work properly and don't stop on the intended frame and instead just loop back to the frame the button is on.  Is there something I am doing wrong?  Below is the layer set up code for each frame.

 

Actions Layer - Has all of the actions for the buttons and a this.stop() on every 5 frames so the buttons only advance or go back to the next or previous instance.

 

Button Layer - Every 5 frames is a new keyframe with the new button instance

 

ID Layer - just the text of the buttons to show forward or backwards.  It is consitant through out the 20 frame test

 

Screen Shot 2020-03-30 at 11.19.40 AM.png

 

Code ---------------------------------------

 

Actions:Frame1--------------------------

 

/* 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 Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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.FWD_1.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame()
{
this.gotoAndPlay(1);
}

 

Actions:Frame5-------------------------------

 

/* 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 Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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_2.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_2.bind(this));

function fl_ClickToGoToAndPlayFromFrame_2()
{
this.gotoAndPlay(0);
}


/* Click to Go to Frame and Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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.FWD_2.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_3.bind(this));

function fl_ClickToGoToAndPlayFromFrame_3()
{
this.gotoAndPlay(5);
}

 

Actions:Frame10--------------------------


/* 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 Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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_3.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_4.bind(this));

function fl_ClickToGoToAndPlayFromFrame_4()
{
this.gotoAndPlay(4);
}


/* Click to Go to Frame and Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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.FWD_3.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_5.bind(this));

function fl_ClickToGoToAndPlayFromFrame_5()
{
this.gotoAndPlay(10);
}

 

Actions:Frame15--------------------------


/* 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 Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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_4.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_6.bind(this));

function fl_ClickToGoToAndPlayFromFrame_6()
{
this.gotoAndPlay(9);
}


/* Click to Go to Frame and Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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.FWD_4.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_7.bind(this));

function fl_ClickToGoToAndPlayFromFrame_7()
{
this.gotoAndPlay(15);
}

 

Actions:Frame20--------------------------


/* 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 Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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_5.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_8.bind(this));

function fl_ClickToGoToAndPlayFromFrame_8()
{
this.gotoAndPlay(14);
}

 

 

Again this all works perfectly fine the first time through but the minute one of the back buttons is used a second time it breaks and will no longer stop.  Any help would be greatly appreciated.

 

Thanks.

Views

104

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

Button navigation stops working after 1 play through on Adobe Animate using an HTML Canvas

New Here ,
Mar 30, 2020

Copy link to clipboard

Copied

I am having an issue with navigation in Adobe Animate CC 2020.  I have not used Animate with any coding since the early Flash days and I have a project that requires as simple navigation of a Back and Foward Buttons that will allow to move through the timeline.  The problem I am having is everything works great the first time through each button either moves foward to the correct frame and stops on the next frame with the buttons or goes backwards appropriately.  Where the problem occurs is once you you have moved foward or backwards with all of the buttons at least once, all of the back buttons no longer work properly and don't stop on the intended frame and instead just loop back to the frame the button is on.  Is there something I am doing wrong?  Below is the layer set up code for each frame.

 

Actions Layer - Has all of the actions for the buttons and a this.stop() on every 5 frames so the buttons only advance or go back to the next or previous instance.

 

Button Layer - Every 5 frames is a new keyframe with the new button instance

 

ID Layer - just the text of the buttons to show forward or backwards.  It is consitant through out the 20 frame test

 

Screen Shot 2020-03-30 at 11.19.40 AM.png

 

Code ---------------------------------------

 

Actions:Frame1--------------------------

 

/* 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 Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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.FWD_1.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame()
{
this.gotoAndPlay(1);
}

 

Actions:Frame5-------------------------------

 

/* 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 Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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_2.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_2.bind(this));

function fl_ClickToGoToAndPlayFromFrame_2()
{
this.gotoAndPlay(0);
}


/* Click to Go to Frame and Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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.FWD_2.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_3.bind(this));

function fl_ClickToGoToAndPlayFromFrame_3()
{
this.gotoAndPlay(5);
}

 

Actions:Frame10--------------------------


/* 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 Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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_3.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_4.bind(this));

function fl_ClickToGoToAndPlayFromFrame_4()
{
this.gotoAndPlay(4);
}


/* Click to Go to Frame and Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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.FWD_3.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_5.bind(this));

function fl_ClickToGoToAndPlayFromFrame_5()
{
this.gotoAndPlay(10);
}

 

Actions:Frame15--------------------------


/* 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 Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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_4.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_6.bind(this));

function fl_ClickToGoToAndPlayFromFrame_6()
{
this.gotoAndPlay(9);
}


/* Click to Go to Frame and Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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.FWD_4.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_7.bind(this));

function fl_ClickToGoToAndPlayFromFrame_7()
{
this.gotoAndPlay(15);
}

 

Actions:Frame20--------------------------


/* 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 Play
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
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_5.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_8.bind(this));

function fl_ClickToGoToAndPlayFromFrame_8()
{
this.gotoAndPlay(14);
}

 

 

Again this all works perfectly fine the first time through but the minute one of the back buttons is used a second time it breaks and will no longer stop.  Any help would be greatly appreciated.

 

Thanks.

Views

105

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
Mar 30, 2020 0
Adobe Community Professional ,
Mar 31, 2020

Copy link to clipboard

Copied

the code on your initial frame is in frame zero.  it should work properly.

 

the code on your 2nd frame (with code) is in frame 5, 3rd is in frame 10, 4th is in frame 15 etc. and these all have a problem and won't work the way you expect.

 

you may need to reread the above a few times to understand that problem, but code on frame 5 (the 6th frame in your timeline) saying to go to frame 5 isn't what you want.  you probably want it to go to frame 6 (the 7th frame in your timeline).

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
Reply
Loading...
Mar 31, 2020 0
ClayUUID LATEST
Adobe Community Professional ,
Mar 31, 2020

Copy link to clipboard

Copied

You know addEventListener() in Animate is cumulative, right?

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
Reply
Loading...
Mar 31, 2020 0