Next and previous buttons in HTML5

[Peter25066516vwuz]

Dear all thank you for yor time 

I am making an animation that changes a frequency setting on a radio, to do this I need to have buttons that do both next and previous timline postions and then be able to to advance either one frame or two depending on the position selected. the counter display is in LCD digits which I have turned into vectors as there is not a LCD font in adobe or goolle fonts

.I put the code that CJ suggested on the main timeline with the buttons and it works but when  I put the code and the buttons on the movie clip itself  with the code then refer to the buttons via the movie clip I get an error saying the "digits_mc movie clip is not dfined ". How do I make CJ's code work from within a movie clip work.

this.stop()
stage.enableMouseOver(frequency)
var frameNumber = this.currentFrame;
let root = this;
var frequency = 3;
this.stop()


createjs.Touch.enable(stage);

// 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.digits_mc.prevButton.on("click", this.prevFrame, this);

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

     this.stop();

     this.hasStarted = true;

}

 I also tried putting the code on the main timeline and referencing the nested movie clip but it did not work, I must be doing something wrong but I cant figure out where I am going wrong.

Best regards

Peter

[JoãoCésar]

Hi.

Are your code and buttons inside of digits_mc? If so, you should write like this.prevButton instead of this.digits_mc.prevButton, because you already is inside of digits_mc, if I understand correctly what you are doing. The same for other occurrences in the code.

Please let us know.

Regards,

JC

[Peter25066516vwuz]

Thanks JC

I thought I had to add the code to get to the movie clip for the buttons as inside the" digits _mc movie" clip. How does it work that in JS this is not required  but  in AS3 I would have to detail scope to get to the embeded movie clip, when I add an event lisetner such as "click" confused a bit thats all.

Best Regards Peter

[Peter25066516vwuz]

Dear CJ 

Thanks for your help

Is there a way to use your code with the buttons on the main timline and  the digits mc on its own movie clip, as  i need to transfer the digits reading from lh to rh side . The functioinality is lice this you have 2 frequency readings one 

active one standby when you slect a frequency using the prev and next buttons in standby the frequencies change positions when you hit a transfer switch. The standby frequency is the only one that you can change, my concept to have four mc and just transfer the time position when you select  to transfer. Two MC provide the digits display, two are control mc that track the displays and set up the timeline position for the transfer because they will remember where the active frequency and the standby frequency are. Is there a better way to this as when I transfer the the digit infomation from standby to active the timeline position of the active frequency is lost therefore to set up the standby display I need to set up a storage of the timeline position, could this be accomplished using an array to store a variable related to the digits mc current frame?.

Best regards

Peter

[Peter25066516vwuz]

Dear All

I am trying to get this to work with my buutons are on the main timeline not inside the ky197 movie clip, I changed the code 

a bit to create a scope to the Ky197 movie clip as the the code is on the main timeline with the buttons.

When I run the animation in the browser to only goes forward 1 frame when I hit next and 1 frame back when I hit prev.

Also tried a simple code like below

this.nextbtn.addEventListener("click", next.bind(this))	
function next(){
	this.ky197.gotoAndStop(this.currentFrame + 1);
}

And this code 

this.stop()
let root = this;
stage.enableMouseOver(frequency)
var frameNumber = root.currentFrame;

var frequency = 3;
this.stop()


createjs.Touch.enable(stage);

// 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.ky197.currentFrame == 0)

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

          else

              this.ky197.gotoAndStop(this.currentFrame - 1);
console.log(e.currentTarget);
     };

     this.nextFrame = function(e)

     {

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

               return;

         this.ky197.gotoAndStop(this.currentFrame + 1);
console.log(e.currentTarget);
     };

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

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

     this.stop();

     this.hasStarted = true;

}

Both only advance the movie clip one frame back and fwd.

Thanks for your time 

Best regards

Peter

[kglad]

that's what your code says to do.  (eg, current frame + 1 advances one frame.)

what do you want it to do?

[Peter2659561313g1]

Dear Kglad

Thank you for reply, what I would like to do is, that each time I click on the button to advanve one frame, this current code on allows me advance or retard only one frame and stops at that one frame no matter how many times I click. I tried removing the event listener but the same result occured.  When i put the code on the MC itself each time I click the button the MC advances one frame not like the other animation where it only advances or reverses one frame and stops. Hope this clarifies my problem, I have many buttons on the HTML5 animation I need to acess a MC within MC  so would like to put the main code and buttons on the scene start page, then control the MC from there rather than having the code on each individual MC is this possible?

Best regards

Peter

[kglad]

you have extraneous code that must be causing a problem. you only need your listeners and listener functions and your listener functions only needs your goto's and a boundary check.

[Peter25066516vwuz]

Dear kglad

This the first code I tried only this code in code panel only goes 1 frame and stops even when you click many Below is also the omly code in the animation and does not work ,buttons are on the main timeline.

 var root= this
 
 this.mbut.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
	this.meg_mc.gotoAndStop(this.currentFrame+=1)
}

 this.tensbut.addEventListener("click", f2_MouseClickHandler.bind(this));
 function f2_MouseClickHandler()
{
	this.meg_mc.gotoAndStop(this.currentFrame-=1)

This is the other code I tried and did not work only this code in animation and a stop action on the MC.

 stage.enableMouseOver(frequency)
var frameNumber = this.currentFrame;
let root = this;
var frequency = 3;

createjs.Touch.enable(stage);

this.navigationLoop = true; 

if (!this.hasStarted)

{
 
     this.prevFrame = function(e)

     {
console.log(e.currentTarget);
		 
          if (this.navigationLoop && this.meg_mc.currentFrame == 0)

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

          else

              this.meg_mc.gotoAndStop(this.currentFrame - 1);

     };

     this.nextFrame = function(e)

     {
console.log(e.currentTarget);
		 
         if (!this.navigationLoop && this.meg_mc.currentFrame == this.meg_mc.timeline.duration - 1)

               return;

         this.gotoAndStop(this.meg_mc.currentFrame + 1);

     };
 

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

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

     this.stop()

     this.hasStarted = true;

}

I cant work out whats wronfg with my code, i get the console log when i click the buttons but no movement of the timeline.

Thanks for help appreciate it

Best Regards

Peter

[kglad]

use:

this.prevbtn.addEventListener("click", prevF.bind(this));

this.nextbtn.addEventListener("click", nextF.bind(this));

function prevF(){
if(this.meg_mc.currentFrame>0){
this.meg_mc.gotoAndStop(this.currentFrame-1);
}
}
function nextF(){
if(this.meg_mc.currentFrame<this.meg_mc.totalFrames-1){
this.meg_mc.gotoAndStop(this.currentFrame+1);
}
}

[Peter25066516vwuz]

Thank Kglad for your help and sorry to be pain.

However when I try the code it still only goes one frame and stops same as before.

Cant understand why, I have removed all other code from code panel only stop actions on the MC..

Best Regards

Peter

[kglad]

if you click the next button twice does this.meg_mc fail to advance 2 frames?

if so, either the next button or this.mg_mc (or something encoded and not shown) doesn't exist after this.meg_mc advances.

if you open your developers console before clicking and then clicking, do you see an error?

[Peter2659561313g1]

Dear Kglad

Yes only advances one frame no many how many times I click the button.

No console warnings from either button.

meg_mc consists of 18 different values

I put console logs on both switches both activate properly, stop action only at first frame of meg mc no other code 

Thank you and best regards Peter

[kglad]

do you see your console.log "next" and "prev"?

[Peter2659561313g1]

Dear Kglad

Yes console logs the next and previous when recpective buttons are clicked.

Best Regards

peter

[kglad]

my error.  that should be:

this.prevbtn.addEventListener("click", prevF.bind(this));

this.nextbtn.addEventListener("click", nextF.bind(this));

function prevF(){
if(this.meg_mc.currentFrame>0){
this.meg_mc.gotoAndStop(this.meg_mc.currentFrame-1);
}
}
function nextF(){
if(this.meg_mc.currentFrame<this.meg_mc.totalFrames-1){
this.meg_mc.gotoAndStop(this.meg_mc.currentFrame+1);
}
}

[Peter2659561313g1]

Thank you very much Kglad

That works well did not know I needed the scope of the mc inside the gotoAndPlay action.

Best Regards

Peter

[kglad]

you're welcome.