Highlighted

What is the code for a next and previous button? - Animate cc html5 -

Explorer ,
Nov 02, 2018

Copy link to clipboard

Copied

Help!!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

I'm supposing you need navigation buttons like those of e-learning training. If that's the case, put this code in the first frame of the timeline in which the buttons are located:

// prevButton and nextButton are the instance names of the buttons

this.navigationLoop = true; // set to true or false to enable or disable loop when the current position is the first or the last frame

if (!this.hasStarted)

{

     this.prevFrame = function(e)

     {

          if (this.navigationLoop && this.currentFrame == 0)

              this.gotoAndStop(this.timeline.duration - 1);

          else

              this.gotoAndStop(this.currentFrame - 1);

     };

     this.nextFrame = function(e)

     {

         if (!this.navigationLoop && this.currentFrame == this.timeline.duration - 1)

               return;

         this.gotoAndStop(this.currentFrame + 1);

     };

     this.prevButton.on("click", this.prevFrame, this);

     this.nextButton.on("click", this.nextFrame, this);

     this.stop();

     this.hasStarted = true;

}

Regards,

JC

Views

2.2K

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

What is the code for a next and previous button? - Animate cc html5 -

Explorer ,
Nov 02, 2018

Copy link to clipboard

Copied

Help!!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

I'm supposing you need navigation buttons like those of e-learning training. If that's the case, put this code in the first frame of the timeline in which the buttons are located:

// prevButton and nextButton are the instance names of the buttons

this.navigationLoop = true; // set to true or false to enable or disable loop when the current position is the first or the last frame

if (!this.hasStarted)

{

     this.prevFrame = function(e)

     {

          if (this.navigationLoop && this.currentFrame == 0)

              this.gotoAndStop(this.timeline.duration - 1);

          else

              this.gotoAndStop(this.currentFrame - 1);

     };

     this.nextFrame = function(e)

     {

         if (!this.navigationLoop && this.currentFrame == this.timeline.duration - 1)

               return;

         this.gotoAndStop(this.currentFrame + 1);

     };

     this.prevButton.on("click", this.prevFrame, this);

     this.nextButton.on("click", this.nextFrame, this);

     this.stop();

     this.hasStarted = true;

}

Regards,

JC

Views

2.2K

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
Nov 02, 2018 0
Adobe Community Professional ,
Nov 02, 2018

Copy link to clipboard

Copied

Your question is impossibly vague, like asking "What is the bulb for my light?" Be more specific.

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...
Nov 02, 2018 0
Explorer ,
Nov 02, 2018

Copy link to clipboard

Copied

I have 60 frames in a movie, each frame has a stop command, there are 2 arrow buttons (previous and next) at the bottom. What is the javascript to make them go to next and previous frames?? there use to be a nextframe snippet in Flash but not in Animate?

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...
Nov 02, 2018 0
Adobe Community Professional ,
Nov 02, 2018

Copy link to clipboard

Copied

Hi.

I'm supposing you need navigation buttons like those of e-learning training. If that's the case, put this code in the first frame of the timeline in which the buttons are located:

// prevButton and nextButton are the instance names of the buttons

this.navigationLoop = true; // set to true or false to enable or disable loop when the current position is the first or the last frame

if (!this.hasStarted)

{

     this.prevFrame = function(e)

     {

          if (this.navigationLoop && this.currentFrame == 0)

              this.gotoAndStop(this.timeline.duration - 1);

          else

              this.gotoAndStop(this.currentFrame - 1);

     };

     this.nextFrame = function(e)

     {

         if (!this.navigationLoop && this.currentFrame == this.timeline.duration - 1)

               return;

         this.gotoAndStop(this.currentFrame + 1);

     };

     this.prevButton.on("click", this.prevFrame, this);

     this.nextButton.on("click", this.nextFrame, this);

     this.stop();

     this.hasStarted = true;

}

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Nov 02, 2018 3
Explorer ,
Nov 02, 2018

Copy link to clipboard

Copied

Awesome, thank you so much!!

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...
Nov 02, 2018 1
Adobe Community Professional ,
Nov 02, 2018

Copy link to clipboard

Copied

You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Nov 02, 2018 0
Adobe Community Professional ,
Nov 02, 2018

Copy link to clipboard

Copied

FYI, CreateJS provides the totalFrames property, so there shouldn't be any reason to dig down into timeline.duration.

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...
Nov 02, 2018 0
New Here ,
May 17, 2020

Copy link to clipboard

Copied

Thank you for posting your code 

 I have a major problem can't seem to work out

when i use your code to go fwd on a project it seems to work ok

but when I go back all the movie clips on the pages previous run once ,although they all have stop actions on them, also I tried to add a reset function telling all individual clips to gotoAndStop when prev button clicked does not work all movies all still run once.

Was simple in flash prev frame next frame.

any help appreciated 

peter

 

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...
May 17, 2020 0
Adobe Community Professional ,
May 17, 2020

Copy link to clipboard

Copied

In CreateJS MovieClips stay in memory and remember everything they have done so far. You could have reset routines in all of the movieclips you use, or you could create a new movieclip from the library each time, after deleting the old one if this is the second time around. 

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...
May 17, 2020 0
Adobe Community Professional ,
May 18, 2020

Copy link to clipboard

Copied

Hi.

 

Besides of what Colin suggested, you can try to set the autoReset property to false.

 

When this property is set to true, the Movie Clip instance will automatically be reset to its first frame whenever the timeline adds it back onto the display list.

 

Please let us know.

 

 

Regards,

JC

 

 

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
May 18, 2020 0
Adobe Community Professional ,
May 18, 2020

Copy link to clipboard

Copied

Thanks for that reminder. Which version of CreateJS was that added, and which version of Animate would be needed?

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...
May 18, 2020 1
Adobe Community Professional ,
May 18, 2020

Copy link to clipboard

Copied

Hi, Colin!

 

I believe since version 0.8.2 of EaselJS when Flash Pro was renamed to Animate CC.

 

http://code.createjs.com

http://blog.createjs.com/easeljs-version-0-8-2-released/

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
May 18, 2020 0
New Here ,
Jul 11, 2020

Copy link to clipboard

Copied

Thanks Friend. 

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...
Jul 11, 2020 0