• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Explorer ,
Nov 02, 2018 Nov 02, 2018

Copy link to clipboard

Copied

Help!!

Views

6.5K

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

correct answers 1 Correct answer

Community Expert , Nov 02, 2018 Nov 02, 2018

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

...

Votes

Translate

Translate
LEGEND ,
Nov 02, 2018 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.

Votes

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

Votes

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
Community Expert ,
Nov 02, 2018 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

Votes

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

Copy link to clipboard

Copied

Awesome, thank you so much!!

Votes

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
Community Expert ,
Nov 02, 2018 Nov 02, 2018

Copy link to clipboard

Copied

You're welcome!

Votes

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

Votes

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
Explorer ,
Mar 17, 2022 Mar 17, 2022

Copy link to clipboard

Copied

Hi, has anybody tried to bind a keyup event with prevButton & nextButton? This is as far as I have got just don't know how to bind them?

 

// 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;
}

// key press
document.addEventListener("keyup", handleKeyUp);

function handleKeyUp(event) {
	// right = 39 / left = 37
	if (event.which == 37) {
		//bind prevButton
		alert("left arrow");
		}
	
	if (event.which == 39) {
		//bind nextButton
		alert("right arrow");
		}
}

  

Votes

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
Community Expert ,
Mar 17, 2022 Mar 17, 2022

Copy link to clipboard

Copied

Hi.

 

Try this:

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()
	{
		if (this.navigationLoop && this.currentFrame == 0)
			this.gotoAndStop(this.timeline.duration - 1);
		else
			this.gotoAndStop(this.currentFrame - 1);
	};

	this.nextFrame = function()
	{
		if (!this.navigationLoop && this.currentFrame == this.timeline.duration - 1)
			return;
		this.gotoAndStop(this.currentFrame + 1);
	};

	this.onKeyUp = function(e)
	{
		if (e.key === "ArrowLeft")
			this.prevFrame();
		else if (e.key === "ArrowRight")
			this.nextFrame();
	};

	this.prevButton.on("click", this.prevFrame, this);
	this.nextButton.on("click", this.nextFrame, this);
	window.addEventListener("keyup", this.onKeyUp.bind(this));
	this.stop();
	this.hasStarted = true;
}

 

I hope it helps.

 

Regards,

JC

Votes

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
Explorer ,
Mar 17, 2022 Mar 17, 2022

Copy link to clipboard

Copied

LATEST

That is amazing - total life saver.

Votes

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 ,
May 17, 2020 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

 

Votes

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
LEGEND ,
May 17, 2020 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. 

Votes

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
Community Expert ,
May 18, 2020 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

 

 

Votes

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
LEGEND ,
May 18, 2020 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?

Votes

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
Community Expert ,
May 18, 2020 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/

Votes

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

Copy link to clipboard

Copied

Thanks Friend. 

Votes

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