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

[svendkr]

Help!!

[ClayUUID]

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

[svendkr]

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?

[JoãoCésar · Accepted solution]

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

[svendkr]

Awesome, thank you so much!!

[JoãoCésar]

You're welcome!

[ClayUUID]

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

[richiebeno]

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");
		}
}

[JoãoCésar]

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

[richiebeno]

That is amazing - total life saver.

[peterw41842312]

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

[Colin Holgate]

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. 

[JoãoCésar]

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

[Colin Holgate]

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

[JoãoCésar]

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/

[muhammettahasari]

Thanks Friend.