Copy link to clipboard
Copied
Hello all.
I am having a hard time figuring out how to use if Else -statements within Animate CC. I have some JavaScript experience, but I don't know how to apply JavaScript within Animate since there is isn't IDs, classes etc. I am hoping, that if someone could point me to the right direction with my example case, I would get a grasp of if Else within Animate and could use it in the coming projects.
Example case:
I have created a HTML5 canvas. On the canvas, I have symbol(rectangle) with motion tween, spinning 50 times, looping indefinitely. I also have a button symbol, with instance name Play_btn.
So, when the canvas is opened on the browser, the rectangle spins indefinitely. And when you click the button, the spinning stops. Good so far. But, when I click the button again, nothing obviously happens. What I would like to happen is, that 2nd click on the same button that stops the rectangle spinning, would continue the spinning on this 2nd click.
Here is the code I have inserted on the action-layer on the 1st frame:
this.play();
this.Play_btn.addEventListener("click",playAnimation.bind(this));
function playAnimation() {
this.stop();
}
The question is, what I need to add to the code in order to make 2nd click to the button replay the animation?
Many thanks in advance.
Copy link to clipboard
Copied
Hi,
I think, you need to save the state in a variable.
Depending on the variable value, your playAnimation function can play or stop the animation.
For example (not tested):
var isPlaying = true;
this.play();
this.Play_btn.addEventListener("click",playAnimation.bind(this));
function playAnimation(){
if( isPlaying ){
this.stop();
}else{
this.play();
}
isPlaying = ! isPlaying;
}
Copy link to clipboard
Copied