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

Using createjs increments (-- / ++) doesn't work on first click?

Engaged ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

Hi there,

I'm working on an HTML5 canvas document in Adobe Animate CC and I'm curious about something happening with my functions. I have a few movieclips that I'd like to advance through their frames by pressing a button. I have a plus button and minus button to move the movieclips both forwards and backwards through their timelines.

My movieclip names are: accelerator, lift, plane, and heli. (Plane and heli are nested inside lift).

Here is how my code looks for the plus and minus buttons -

var u = this.accelerator.currentFrame;

var i = this.lift.plane.currentFrame;

var o = this.lift.heli.currentFrame;

this.plusbtn.addEventListener("click", advance.bind(this));

function advance(){

this.accelerator.gotoAndStop(u++);

this.lift.plane.gotoAndStop(i++*2);

this.lift.heli.gotoAndStop(o++*2);

}

this.minusbtn.addEventListener("click", rewind.bind(this));

function rewind(){

this.accelerator.gotoAndStop(u--);

this.lift.plane.gotoAndStop(i--*2);

this.lift.heli.gotoAndStop(o--*2);

}

What is weird to me is that when I use the plus and minus buttons to move along the timelines, when I first hit the minus button (after having clicked the plus button) it will still go forward one frame, before then starting to go backwards. Same thing if I go from clicking the minus button to clicking the plus button. On the first click, it will still go backwards one frame, before starting to move forwards.

I'm not a coder, so I'm not sure why this is happening? Is there anything I can do to avoid this, so that it immediately moves forward/backwards upon first click of each button?

Thanks!

Views

589

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

LEGEND , Aug 23, 2017 Aug 23, 2017

If you want to increment something by twos, you just do i += 2;

I now see the original code may have been getting tripped up on the difference between preincrementing and postincrementing.

This is preincrementing:

var x = 1;

alert(++x);

alert(x);

Displays 2, 2.

This is postincrementing:

var x = 1;

alert(x++);

alert(x);

Displays 1, 2.

The difference is that preincrementing first increments the variable, then uses its value. Postincrementing, on the other hand, uses the variable's value, then increments it.

So

...

Votes

Translate

Translate
LEGEND ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

There's no such thing as "createjs increments". The preincrement/postincrement operators are basic JavaScript syntax.

So, when debugging these sort of problems, always ALWAYS examine your assumptions. You're assuming that u, i, o are getting correctly initialized, but have you actually verified it? Try sticking an alert(u); statement after where it's initialized, and in each function that changes it.

And I notice you don't have any logic constraining the frame values. It looks like users could easily run into negative frame numbers.

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
Engaged ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

Thank you for the correction. I still don't understand much about JavaScript (obviously)!

I've added an alert(u); statement after I declare it as a variable, and after each button function is written. When I test the project, it alerts me that u is 0 three times. I know the frames start at 0 instead of 1 when working in EaselJS. I'm not sure how to set up the alert statement to tell me what u is after I've clicked the plus or minus button?

I don't currently have anything constraining the frame values - since I'm quite new to JavaScript I've been taking my projects one step at a time. I did try to write a function that would disable the plus button once the accelerator movieclip reached it's max frame (it has 30 frames, so I guess it'd be 29), but I haven't had any luck with that. What I tried was -

this.plustbtn.addEventListener("click", full.bind(this));

function full(){

if (this.accelerator.currentFrame==29){

this.accelerator.gotoAndStop(29);

}

}

My thought was once it hit frame 29 the button would just continually go to the frame - making it seem as if the button had stopped working and the user would have to then use the minus button to go backwards again. However, when I tried this it just continued cycling through all the frames, not stopping at frame 29.

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 ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

if (this.accelerator.currentFrame==29){ 

     this.accelerator.gotoAndStop(29); 

}

Why would you tell accelerator to go to where it already is?

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
Engaged ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

I told it to go to the same frame, because I don't know code to make the button 'stop' or to disable it. I figured making it go to the same frame would give it the illusion of the button 'stopping' working - since I don't want it to go any further than frame 29.

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
Participant ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

do your increments/decrements before gotoAndStop, like that:

function rewind(){ 

    u--;

    i--*2;

    o--*2;

    this.accelerator.gotoAndStop(u); 

    this.lift.plane.gotoAndStop(i); 

    this.lift.heli.gotoAndStop(o);

}

Also, what is that *2 for?

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
Engaged ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

Thanks anton, I tried doing as you suggested, but that didn't seem to change anything. I have the *2 because the 'plane' and 'heli' movie clips are 63 frames (around double of what accelerator is) and I wanted them to appear to reach their ends at the same time.

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
Participant ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

try replacing your code with the following:

this.stop();

var u = this.accelerator.currentFrame; 
var i = this.lift.plane.currentFrame; 
var o = this.lift.heli.currentFrame; 

//alternatively, since I'm assuming you're starting from the beginning of each clip, you can simply do something like var u = i = o = 0;
 
this.plusbtn.addEventListener("click", advance.bind(this)); 
this.minusbtn.addEventListener("click", rewind.bind(this));

function advance(){ 
u++;
i = (i+2);
o = (o+2);
this.accelerator.gotoAndStop(u); 
this.lift.plane.gotoAndStop(i); 
this.lift.heli.gotoAndStop(o);


function rewind(){ 
u--;
i = (i - 2);
o = (o - 2);
this.accelerator.gotoAndStop(u); 
this.lift.plane.gotoAndStop(i); 
this.lift.heli.gotoAndStop(o);
}

I recreated the scene, and it work nicely for me

This would work well if your plane/heli timeline is exactly twice the length of accelerator.  Note, that using *2 would result in an exponential growth, probably not something you'd want here.

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 ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

If you want to increment something by twos, you just do i += 2;

I now see the original code may have been getting tripped up on the difference between preincrementing and postincrementing.

This is preincrementing:

var x = 1;

alert(++x);

alert(x);

Displays 2, 2.

This is postincrementing:

var x = 1;

alert(x++);

alert(x);

Displays 1, 2.

The difference is that preincrementing first increments the variable, then uses its value. Postincrementing, on the other hand, uses the variable's value, then increments it.

So no wonder your code was acting the way it did. You were using postincrementing and postdecrementing.

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
Engaged ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

LATEST

Thanks so much Clay! I didn't realize there was a difference between postincrementing and preincrementing, I changed my variables to preincrement/decrement and that fixed it!

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
Engaged ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

Thanks Anton, I tried this code and my buttons stopped working entirely? I think Clay figured it out with his comment below!

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