Copy link to clipboard
Copied
Help!!
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 ==
Copy link to clipboard
Copied
Your question is impossibly vague, like asking "What is the bulb for my light?" Be more specific.
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?
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
Copy link to clipboard
Copied
Awesome, thank you so much!!
Copy link to clipboard
Copied
You're welcome!
Copy link to clipboard
Copied
FYI, CreateJS provides the totalFrames property, so there shouldn't be any reason to dig down into timeline.duration.
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");
}
}
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
Copy link to clipboard
Copied
That is amazing - total life saver.
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
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.
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
Copy link to clipboard
Copied
Thanks for that reminder. Which version of CreateJS was that added, and which version of Animate would be needed?
Copy link to clipboard
Copied
Hi, Colin!
I believe since version 0.8.2 of EaselJS when Flash Pro was renamed to Animate CC.
Copy link to clipboard
Copied
Thanks Friend.