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

Validate combinations with button and problem sound button

Community Beginner ,
Sep 25, 2022 Sep 25, 2022

Copy link to clipboard

Copied

I would like to design something quite simple.

I created orange buttons that play a sound when clicked. The black circles are not buttons, it's just the instruction that the user will have to do to move to the next frame :

ecran.jpg

My first issue is that when you click a orange button, you have to wait for the sound to end before clicking that same button again.

How can you click that same button immediately to play the same sound again
without the previous sound cutting off ?

 

My second slightly more complex problem is that i would like the user to click on what is requested in the black instruction.

How to know if the user has clicked on the right buttons in the requested order to automatically move to the next image, a bit like a combination except that he does not need to validate to advance to the next frame ?

 

I think you have to create a listener for each button and create variables to store the result of each but I don't see how to know that the user has respected the requested order by clicking once on the right button

 

Here is my code which is quite simple :

this.stop();

if(!this.defined1){
this.sound1=createjs.Sound.createInstance("corde1");
this.defined1=true;

}

function complete1F(){
this.sound1.play();
}

if(!this.defined2){
this.sound2=createjs.Sound.createInstance("corde2");
this.defined2=true;

}

function complete2F(){
this.sound2.play();
}
	
if(!this.defined3){
this.sound3=createjs.Sound.createInstance("corde3");
this.defined3=true;

}

function complete3F(){
this.sound3.play();
}


if(!this.defined4){
this.sound4=createjs.Sound.createInstance("corde4");
this.defined4=true;

}

function complete4F(){
this.sound4.play();
}

if(!this.defined5){
this.sound5=createjs.Sound.createInstance("corde5");
this.defined5=true;

}

function complete5F(){
this.sound5.play();
}

if(!this.defined6){
this.sound6=createjs.Sound.createInstance("corde6");
this.defined6=true;

}

function complete6F(){
this.sound6.play();
}


this.corde1.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()
{
	this.sound1.play();
}

this.corde2.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));

function fl_ClickToGoToAndStopAtFrame_2()
{
	this.sound2.play();
}

this.corde3.addEventListener("click", fl_ClickToGoToAndStopAtFrame_3.bind(this));

function fl_ClickToGoToAndStopAtFrame_3()
{
	this.sound3.play();
}

this.corde4.addEventListener("click", fl_ClickToGoToAndStopAtFrame_4.bind(this));

function fl_ClickToGoToAndStopAtFrame_4()
{
	this.sound4.play();
}

this.corde5.addEventListener("click", fl_ClickToGoToAndStopAtFrame_5.bind(this));

function fl_ClickToGoToAndStopAtFrame_5()
{
	this.sound5.play();
}

this.corde6.addEventListener("click", fl_ClickToGoToAndStopAtFrame_6.bind(this));

function fl_ClickToGoToAndStopAtFrame_6()
{
	this.sound6.play();
}

 Thank you for your help.

Views

696

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

Community Expert , Sep 29, 2022 Sep 29, 2022

Got it.

 

You just need to set the fourth argument of the on method to false so that the click event works more than once and reset the sequence property when the buttons are clicked in the incorrect order. Like this:

 

this.sequence = "";
this.answer = "1212";

this.check = function(e, data)
{	
	this.sequence += data.value;
		
	if (this.sequence.length === this.answer.length)
	{
		if (this.sequence === this.answer)
			console.log("move to next frame");
		else
		{
			this.sequence = ""; // reset
...

Votes

Translate

Translate
Community Expert ,
Sep 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

Hi.

 

For the sounds, you could store que current one playing in a variable and then everytime you play a sound you check for this variable value and stop it. Like this:

if (currentSound)
    currentSound.stop();
// play next sound

 

For the sequence, supposing that you have buttons called this.button0... this.button4, you could write something like this:

this.sequence = "";
this.answer = "12345";

this.check = function(e, data)
{	
	this.sequence += data.value;
	
	if (this.sequence.length === this.answer.length)
	{
		if (this.sequence === this.answer)
			console.log("move to next frame");
		else
			console.log("incorrect sequence");
	}
};

this.button0.on("click", this.check, this, true, { value: 2 });
this.button1.on("click", this.check, this, true, { value: 4 });
this.button2.on("click", this.check, this, true, { value: 5 });
this.button3.on("click", this.check, this, true, { value: 1 });
this.button4.on("click", this.check, this, true, { value: 3 });

 

I hope this helps.

 

Regards,

JC

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 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

Hi,

Thanks for your help.
I tried what you said with the button combination but it doesn't work.

I tried with a sequence of 2 buttons and added a label to move to the next frame but nothing happens :

this.sequence = "";
this.answer = "12";

this.check = function(e, data)
{	
	this.sequence += data.value;
	
	if (this.sequence.length === this.answer.length)
	{
		if (this.sequence === this.answer)
			console.log("win");
		else
			console.log("lose");
	}
};

this.corde1.on("click", this.check, this, true, { value: 2 });
this.corde2.on("click", this.check, this, true, { value: 1 });

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 Expert ,
Sep 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

Hi.

 

Do you get the log in the console ("win") or you just can't move to another frame?

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 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

yes, I have the link in the properties

ecranconsole.jpg

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 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

nothing is happening

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 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

I tried to declare 2 variables at the start of the code to move the frame but there is nothing

this.winDestination = "win";
this.loseDestination = "lose";



if (this.sequence.length === this.answer.length)
	{
		if (this.sequence === this.answer)
			console.log("win");
		this.winDestination = win;
		else
			console.log("lose");
		this.winDestination = lose;

  

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 Expert ,
Sep 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

You need to use curly braces in an if statement if you have more than one line.

 

Also, when are you calling gotoAndStop or gotoAndPlay to go to the frame that you want?

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 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

I made a mistake yes it works fine. Thanks.

	if (this.sequence.length === this.answer.length)
	{
		if (this.sequence === this.answer)
			this.gotoAndStop(1);
		
		else
			this.gotoAndStop(2);
	}

 On the other hand :

if (currentSound)
    currentSound.stop();

totally blocks the sound when I add it after my function

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 Expert ,
Sep 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

Nice!

 

Are you stopping the current sound before trying to play another one?

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 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

If we stop it to start another sound, won't we hear the end of the sound?

Because I wanted to be able to click the same button again but have the previous sound finish playing while the new sound plays it.

I would like it to overlap.

I did not understand quite well.

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 Expert ,
Sep 28, 2022 Sep 28, 2022

Copy link to clipboard

Copied

Hi.

 

Sorry but I think I don't quite get what you want.

 

Do you want to just click in a button and have the same sound playing in each click even if the current sound overlaps the previous one?

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 28, 2022 Sep 28, 2022

Copy link to clipboard

Copied

Hi,

Yes thats exactly 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
Community Beginner ,
Sep 28, 2022 Sep 28, 2022

Copy link to clipboard

Copied

can you give me an example with a button please?

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 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

Hi,

I just noticed another problem in the sequence.

When I put several times the same value in the sequence such as:

this.sequence = "";
this.answer = "11212";

the result cannot be valid, nothing happens, how can I use the same value multiple times in my sequence without issue?

 

And when the user makes a mistake, how to reset the set to reset to 0 because otherwise the sequence no longer works correctly after a user error ?

 

I also always have the problem of the sound that cuts with :

if (currentSound)
    currentSound.stop();

Sorry for all these questions.

Thank you in advance for your help.

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 Expert ,
Sep 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

Hi.

 

I didn't understand what is happening to the sequence. Can you give an example?

 

For the sound, if you want to play it multiple times without worrying about overlapping, you can do something like:

this.yourButton.on("click", function()
{
    // the playSound method is automatically created
    // by Animate when there's at least one sound being used
    playSound("YourSoundLinkage");
});

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 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

Hi,

Thanks for the sound it works fine now.

 

For the sequence,

I would like to be able to use the same value multiple times in the response like :

this.answer = "1212";

The problem is that nothing happens when clicking on the buttons to achieve the answer with repeating values.

 

The second problem is that I would like to reset the program if the user gets the wrong answer because otherwise it no longer runs correctly if we try to start again.

 

 

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 Expert ,
Sep 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

Got it.

 

You just need to set the fourth argument of the on method to false so that the click event works more than once and reset the sequence property when the buttons are clicked in the incorrect order. Like this:

 

this.sequence = "";
this.answer = "1212";

this.check = function(e, data)
{	
	this.sequence += data.value;
		
	if (this.sequence.length === this.answer.length)
	{
		if (this.sequence === this.answer)
			console.log("move to next frame");
		else
		{
			this.sequence = ""; // resets the sequence
			console.log("incorrect sequence");
		}	
	}
};

// the 4th argument is false now
this.button0.on("click", this.check, this, false, { value: 2 });
this.button1.on("click", this.check, this, false, { value: 4 });
this.button2.on("click", this.check, this, false, { value: 5 });
this.button3.on("click", this.check, this, false, { value: 1 });
this.button4.on("click", this.check, this, false, { value: 3 });

 

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 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

I just tried, the combination with multiple values ​​it works thank you but the reset does not work.

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 Expert ,
Sep 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

It works for me.

 

Can you show your complete code?

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 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

Here it is :

 

this.stop();

canvas.style.zIndex = "1"

if(!this.defined1){
	
this.sound1=createjs.Sound.createInstance("corde1");
this.defined1=true;
	
	}
	
function complete1F(){
this.sound1.play();
	
}


if(!this.defined2){
this.sound2=createjs.Sound.createInstance("corde2");
this.defined2=true;

}

function complete2F(){
this.sound2.play();
}
	
if(!this.defined3){
this.sound3=createjs.Sound.createInstance("corde3");
this.defined3=true;

}

function complete3F(){
this.sound3.play();
}


if(!this.defined4){
this.sound4=createjs.Sound.createInstance("corde4");
this.defined4=true;

}

function complete4F(){
this.sound4.play();
}

if(!this.defined5){
this.sound5=createjs.Sound.createInstance("corde5");
this.defined5=true;

}

function complete5F(){
this.sound5.play();
}

if(!this.defined6){
this.sound6=createjs.Sound.createInstance("corde6");
this.defined6=true;

}

function complete6F(){
this.sound6.play();
}


if(!this.defined7){
this.sound7=createjs.Sound.createInstance("corde7");
this.defined7=true;

}

function complete7F(){
this.sound7.play();
}



this.corde1.on("click", function()

	
{
    
    playSound("corde1");
	
	
});



this.corde2.on("click", function()

	
{
  
    playSound("corde2");
	
	
});


this.corde3.on("click", function()

	
{
    
    playSound("corde3");
	
	
});

this.corde4.on("click", function()

	
{
   
    playSound("corde4");
	
	
});


this.corde5.on("click", function()

	
{
   
    playSound("corde5");
	
	
});


this.corde6.on("click", function()

	
{

    playSound("corde6");
	
	
});




this.sequence = "";
this.answer = "12166";

this.check = function(e, data)
{	
	this.sequence += data.value;
		
	if (this.sequence.length === this.answer.length)
	{
		if (this.sequence === this.answer)
			this.gotoAndStop(1);
		
		
		else
		{
			this.sequence = ""; // resets the sequence
			this.gotoAndStop(2);
		}	
	}
};

// the 4th argument is false now
this.corde1.on("click", this.check, this, false, { value: 1 });
this.corde2.on("click", this.check, this, false, { value: 2 });
this.corde3.on("click", this.check, this, false, { value: 3 });
this.corde4.on("click", this.check, this, false, { value: 4 });
this.corde5.on("click", this.check, this, false, { value: 5 });
this.corde6.on("click", this.check, this, false, { value: 6 });

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 Expert ,
Sep 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

Thanks for the code.

 

When the sequence is incorrect, you send the timeline to the 3rd frame. What you have in there? Or does it not work when you go back to the frame of this code?

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 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

yes I send , to the frame 3, inside there is just a button with the code to return to frame 0 to start over :

this.return.addEventListener("click", fl_ClickToGoToAndStopAtFrame_9.bind(this));

function fl_ClickToGoToAndStopAtFrame_9()
{
	this.gotoAndStop(0);
	
}

I also tried without going to frame 3 but that doesn't work either.

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 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

The reset works if I don't send to another frame.

The problem that arises is that if the user makes a mistake and clicks several times, he cannot know where he is.

Click count status should be displayed so it knows when it returns to 0.

For example, if the answer is 123 and if he types 5412 , he can't know he has to click a button again for the reset to happen so he can type 123 and automatically move on.

For example, a circle that changes color when the user clicks once and if it's wrong, the circles go back to white when the program resets

ecran.jpg

or so I use the code there every time with only one value but it will be longer :

this.sequence = "";
this.answer = "1";

this.check = function(e, data)
{	
	this.sequence += data.value;
	
	if (this.sequence.length === this.answer.length)
	{
		if (this.sequence === this.answer)
		{
			this.gotoAndStop(1);
		    
		}
		
		else
		  this.sequence = ""; // resets the sequence

	}
};

What do you think ?

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 30, 2022 Sep 30, 2022

Copy link to clipboard

Copied

LATEST

I added the code

var responseTF = this.responseTF;

else
this.sequence = ""; // resets the sequence
responseTF.text = "BAD SEQUENCE";
;

to inform about the wrong answer.

 

I created white circles on the stage (for example I created 3 circles if the answer is 123) which are clips with the name "circle1" "circle2" "circle3"... so that the user can see how many times it clicks before reset.

I would like these clips to change color (white to yellow) when the user clicks.

I think one would have to change those clips from false to true to see the change and reset them to their original color when the program resets.

How can I do this?

And then it will all be over. 

Thank you for your help from the beginning because I thought it would be easier to do.

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