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

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

Community Beginner ,
Sep 23, 2019 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

2.8K

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

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
Community Beginner ,
Sep 24, 2019 Sep 24, 2019

Copy link to clipboard

Copied

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

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