Discussion :

[kristen999]

Bonjour à tous,

Je viens de commencer à utiliser le logiciel Animate CC plutôt pour de la création graphique interactive car je ne suis pas développeuse à part le HTML/CSS pour de l'intégration.

D'habitude je travaille uniquement sans utiliser de code car j'utilise plutôt de l'interpolation et du code très simple pour change de frame du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
function fl_ClickToGoToAndStopAtFrame_4() {
this.gotoAndStop(1);

Mais là, je dois réaliser avec le logiciel quelque chose où l'utilisateur va devoir cliquer sur 5 boutons parmi 8 pour déverrouiller un coffre avec en dessous, un champ dans laquelle des étoiles s'affichent qui représente la combinaison caché quand la personne clique sur les boutons.

j'ai créer ma scène avec mes 8 boutons avec des noms d'occurrences du type bouton_1 bouton_2...



Ce n'est pas la création graphique finale c'est juste pour me donner une idée et mettre en place le code.

Mais concrètement je ne sais pas comment faire et quelle fonction je dois utiliser car j'imagine que je dois stocker des choses dans des variables.

Une fois que la personne a cliquer sur le dernier bouton pour la bonne combinaison ça doit affiche un message CODE VALIDE et le rediriger vers une page web et au contraire si il se trompe ça dira ERREUR CODE, je vais donc utiliser ce type de fonction pour le lien si la combinaison est valide:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
this.combinaisonok.addEventListener("click", fl_ClickToGoToWebPage_3);
function fl_ClickToGoToWebPage_3() {
	window.open("http://lienverssite", "_blank");
}

Merci beaucoup pour votre aide.

[Doksuri]

j'ai fais un truc rapidos

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="numbers">
<div data-num="1">1</div>
<div data-num="2">2</div>
<div data-num="3">3</div>
 
<div data-num="4">4</div>
<div data-num="5">5</div>
<div data-num="6">6</div>
 
<div data-num="7">7</div>
<div data-num="8">8</div>
<div>raz</div>
</div>
<div data-code="" id="secret"></div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#numbers {
  display: grid;
  grid-template-columns: repeat(3, 60px);
  grid-gap: 10px;
}
#numbers div {
  background-color: lightblue;
  text-align: center;
  padding: 10px 20px;
  font-size: 2em;
}
#secret {
  width: 200px;
  border: 1px solid black;
  height: 1em;
  margin-top: 1em;
  font-size: 2em;
  padding-top: 5px;
  text-align: center;
  line-height: 1;
  font-weight: bold;
}

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.getElementById('numbers').addEventListener('click', ({target}) => {
	clickNum(target.dataset.num);
});
 
function clickNum(num) {
	num*=1;
  if(!Number.isInteger(num)) {
  document.getElementById('secret').textContent = '';
  document.getElementById('secret').dataset.code = '';
  return;
  }
  document.getElementById('secret').dataset.code += num;
  document.getElementById('secret').textContent += '*';
  if(document.getElementById('secret').dataset.code === '12345') { // ton code secret ici
  alert('youpi'); // juste pour que tu vois que ca fonctionne
  //window.open("http://lienverssite", "_blank"); // ta redirection ici
  }
}

[kristen999]

Salut, merci toi pour ta réponse très rapide.

Comme je l'ai dit je dois utiliser Animate CC. Je ne sais pas si tu as déjà utilisé le logiciel mais dans la fenêtre "Action" dédié au code je ne peux pas utiliser le html/css.

Il faut que j'utilise mes boutons créés dans la scène avec leurs noms d'occurrence avec du code JS.

Ma problématique est d'utiliser ces boutons graphiques nommé btn1, btn2... avec du code JS sans utiliser html.

C'est un peu comme du Flash avant même si ce n'est pas de l'AS3 car c'est désormais un fichier HTML5Canvas et non AS3.

Tu vois je déclare mon occurrence bnt1 pour ce bouton et donc je dois utiliser cet occurrence dans mon code JS

[Doksuri]

non, je ne connais pas, desole :/

ps : si tu veux vois ce que ca donne : jsfiddle.net/2b6fek3x/

[kristen999]

Oui ça serait parfaitement ça qui faudrait que je fasse.

Mais malheureusement je dois créer quelque chose de très interactif avec un graphisme assez poussé avec beaucoup d'éléments graphiques qui bougent style cadran futuriste c'est donc pour ça que je dois utiliser Animate CC.

Merci beaucoup je vais tenter de voir ce que je vais faire.

[kristen999]

Après réflexion, je pense que je vais essayer d'utiliser un composant de type TextInput qui est dans le logiciel afin de taper le code dans le champs et non plus de cliquer sur chaque bouton pour entrer une combinaison.



J'ai donné le nom "champs" à mon occurrence. En JS comment est ce que je peux adapter ton code pour mon champs TextInput avec une validation avec un bouton comme tu as fait ?
merci beaucoup

Je pense commencer comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
 
if(!this.champs_change_cbk) {
	function champs_change(evt) {
 
 
		console.log(evt.target.value);
	}