password confirmation

New Here ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

Hello, I'm a newbie whit Animate. This is a file HTML5Canvas.

I created 2 components (TextInput, Button) and a textdynamic box in my scene.

TextInput = mdp

Button = valider

ID.jpg

 

The scene :

scene.jpg

And I would like if the response is right when the user clicks the button, the text OK is displayed then redirected to a web page. And if the code is wrong, another text is displayed.

Here is my code :

this.stop();

var monInput = document.querySelector("mdp").value;
var motdepassatrouver = "test";

if (monInput == motdepassatrouver) {
	//ok
	this.valider.addEventListener("click", fl_ClickToGoToWebPage_5);

	function fl_ClickToGoToWebPage_5() {
		window.open("http://www.adobe.com", "_blank");
	}

}

But it does not work.
Looks like he can't make the connection with the ID of components.

Thanks a lot for your help.

Views

123

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
community guidelines

correct answers 3 Correct answers

Adobe Community Professional , Feb 15, 2022 Feb 15, 2022
Hi. You need to make sure the components are ready first. One way of doing this is to listen for the drawend event on the stage. Like this: var root = this; var responseTF = this.yourResponseTextField; var motdepassatrouver = "test"; var input, button; function onDrawEnd() { input = document.getElementById("mdp"); button = document.getElementById("valider"); button.addEventListener("click", validate); } function validate() { var value = input.value; if (value === "") responseTF.text...

Likes

Translate

Translate
Adobe Community Professional , Feb 15, 2022 Feb 15, 2022
Thanks for the file. Change the second line of the code to: var responseTF = this.responseTF; So it matches the text field you have on stage. Regards, JC

Likes

Translate

Translate
Adobe Community Professional , Feb 16, 2022 Feb 16, 2022
Hi again. I'm glad the code was useful. About your question: you already have a listener added to the validate button. You just need now to send the main timeline to the desired frame whenever the user enters the correct password. Like this: var root = this; var responseTF = this.responseTF; var motdepassatrouver = "test"; var input, button; function onDrawEnd() { input = document.getElementById("mdp"); button = document.getElementById("valider"); button.addEventListener("click", validat...

Likes

Translate

Translate
Adobe Community Professional ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

Hi.

 

You need to make sure the components are ready first. One way of doing this is to listen for the drawend event on the stage. Like this:

var root = this;
var responseTF = this.yourResponseTextField;
var motdepassatrouver = "test";
var input, button;

function onDrawEnd()
{
	input = document.getElementById("mdp");
	button = document.getElementById("valider");
	button.addEventListener("click", validate);
}

function validate()
{
	var value = input.value;
	
	if (value === "")
		responseTF.text = "Password cannot be empty.";
	else if (value === motdepassatrouver)
	{
		responseTF.text = "OK!";
		window.open("http://www.adobe.com", "_blank");
	}
	else
	{
		responseTF.text = "Wrong password. Try again.";
	}

	input.value = "";
}

stage.on("drawend", onDrawEnd, root, true);

 

I hope this helps.

 

Regards,

JC

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
community guidelines
New Here ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

Thanks a lot for your help.

I just tried but nothing happens. I do not understand why although it is very simple.

I put the file.

File fla 

Thanks in advance.

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
community guidelines
Adobe Community Professional ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

Thanks for the file.

 

Change the second line of the code to:

var responseTF = this.responseTF;

 

So it matches the text field you have on stage.

 

Regards,

JC

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
community guidelines
New Here ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

Hello,

Yes thank you very much it works. See you soon and thank you sincerely.

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
community guidelines
New Here ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

Just a last question please.

If I want to add when it's validate OK, a change of frame
I declare the function  :

this.valider.addEventListener("click", fl_ClickToGoToAndStopAtFrame_18.bind(this));

function fl_ClickToGoToAndStopAtFrame_18()
{
	this.gotoAndStop(5);

I shift the function at the beginning then I put this.gotoAndStop(5);

 in else if (value === motdepassatrouver) { }

 

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
community guidelines
Adobe Community Professional ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

Hi again.

 

I'm glad the code was useful.

 

About your question: you already have a listener added to the validate button. You just need now to send the main timeline to the desired frame whenever the user enters the correct password. Like this:

var root = this;
var responseTF = this.responseTF;
var motdepassatrouver = "test";
var input, button;

function onDrawEnd()
{
	input = document.getElementById("mdp");
	button = document.getElementById("valider");
	button.addEventListener("click", validate);
}

function validate()
{
	var value = input.value;

	if (value === "")
		responseTF.text = "Password cannot be empty.";
	else if (value === motdepassatrouver)
	{
		responseTF.text = "OK!";
		root.gotoAndStop(5); // NEW LINE
		window.open("http://www.adobe.com", "_blank");
	}
	else
	{
		responseTF.text = "Wrong password. Try again.";
	}

	input.value = "";
}

stage.on("drawend", onDrawEnd, root, true);

 

Regards,

JC

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
community guidelines
New Here ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

LATEST

Yes very useful thank you.

OK, I understand better now for the function.

Thanks for your help. Have a nice day

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
community guidelines
Adobe Community Professional ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

1. if that code is on the initial frame of your main timeline, you have a timing problem because components aren't immediately initialized.

 

2. you have a significant logic issue: your input component won't immediately have a value

 

3. you're referencing your component incorrectly.

 

to get that approach to work:

 

1. put your input component on a movieclip timeline and assign the same instance name.

2. put that movieclip (which contains mdp) on the 2nd frame of the main timeline along with your button and that dynamic textfield (with eg, tf instance name)

 

you could then use on frame 1 (the 2nd frame)

 

var monInput = document.getElementById("mdp");
var motdepassatrouver = "test";


//ok
this.valider.addEventListener("click", fl_ClickToGoToWebPage_5.bind(this));

 

function fl_ClickToGoToWebPage_5() {

if (monInput == motdepassatrouver) {

this.tf.text = "OK";   // though this won't be seen until the adobe popup closes.
window.open("http://www.adobe.com", "_blank");
}

}

 

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
community guidelines
New Here ,
Feb 15, 2022 Feb 15, 2022

Copy link to clipboard

Copied

Thank you for you answer.

I tried JoãoCésar's code but nothing happens.

However everything seems fine to me.

File fla 

 

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
community guidelines