Highlighted

If Else statements with Animate CC - How do they work?

Community Beginner ,
Sep 23, 2019

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. 

 

TOPICS
Code, How to

Views

542

Likes

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

If Else statements with Animate CC - How do they work?

Community Beginner ,
Sep 23, 2019

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. 

 

TOPICS
Code, How to

Views

543

Likes

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
Sep 23, 2019 0
Participant ,
Sep 23, 2019

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

 

 

 

 

- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

Likes

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
Reply
Loading...
Sep 23, 2019 0
Community Beginner ,
Sep 24, 2019

Copy link to clipboard

Copied

Hi Vlad! Thank you for taking a time to answer. Your solution worked perfectly, thank you!

Likes

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
Reply
Loading...
Sep 24, 2019 0