Le pouvoir aux touches de direction!

**Jayme65** · 15/06/2006, 11h45

Bonjour,

J'aimerai avoir votyre point de vue et bénéficier de votre expérience la-dessus:

Je dois réalider une interface dans laquelle on ne peux naviguer qu'avec les fleches du clavier et la barre d'espace par exemple.

Quand ce menu apparait, l'utilisateur, en se servant des touches de direction, navigue librement a travers les "boutons" (j'ai plutot l'impression que ca doit etre des movieclip?).
Par exemple, en demarrant de "ON", on doit pouvoir aller a droite "OFF"...ou descendre "Option1"
Le movieclip reagirrait comme un bouton, en ayant plusieurs états (ON, OFF, Survolé)

Voici une image pour vous aider a mieux vous représenter ce dont il s'agit.

Sur cette image, "On" & "Option2" sont sélectionnés, "Off" n'est pas sélectionné mais "survolé", "Option1" et "Option3" sont désélectionnés.

Quel est votre impression? Quelle serait la meilleure facon de procéder?

Merci d'avance!!

**dom_dev** · 15/06/2006, 13h30

bonjour,
au niveau des boutons c'est éffectivement pas difficile de faire des movieClips qui auront quatre états: Initial , cliqué et bien sur Initial_survolé et cliqué_survolé. Ensuite il faut créer dans le clip du bouton les différents états (il y a plusieurs solutions possibles) et un ensemble de méthode pour faire changer d'état le bouton. Ensuite, et c'est un peu plus délicat il faut créer une sorte de controleur (comme dans le pattern MVC) qui écoutera le clavier de l'utilisateur et qui aura une "image" de l'état de ton clavier graphique et fera changer les états des boutons en fonction des informations reçu du clavier utilisateur.
On peut détailler chaque étapes mais pas en une seule fois !

**dom_dev** · 15/06/2006, 13h43

voici un petit fichier qui te donne un exemple ultra simplifié de controle de l'état d'un bouton avec les touches a,b,c et d c'est juste un point de départ après il faut faire ça dans le cas général dont tu as besoin...
Pièce jointe 1936

**Jayme65** · 15/06/2006, 16h48

Merci pour ta réponse!
Elle concerne principalement l'etat du bouton...mais pas de comment faire pour naviguer a travers ces boutons?;-)
Aurais-tu une idee la dessus?

Merci

**dom_dev** · 15/06/2006, 16h59

si tu regardes dans le fichier que j'ai posté il me semble qu'il y a la réponse. Si j'ai bien compris ta qestion, la notion d'état c'est toi qui la crée à l'aide d'images clé nommées par une étiquette. Dans le clip tu écris des méthodes du genre :

Code :

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

1
2
3
4
 
clique = function(){
     this.gotoAndStop("clique");
}

sachant que "clique" est l'étiquette de l'image sur laquelle tu as dessiné le bouton dans l'état cliqué.
Ensuite à partir du controle de ton interface si tu as nommé un bouton par exemple "btn_off" tu peux écrire :

Code :

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

1
2
3
 
btn_off.clique();
    //et le bouton se mettra dans l'état cliqué

remarque quand je parle de "bouton" il ne s'agit pas des boutons flash mais de movieClip faisant office de bouton, le fonctionnement des boutons proposé par flash est un peu différent et moins pratique dans certain cas.

suis je assez clair ??

**Jayme65** · 15/06/2006, 18h15

Je te remercie de ta patience avec moi ;-)

Oui, j'ai bien compris ta méthode..et je t'en remercie.
Mais comment fait tu pour te deplacer a gauche, en bas..etc dans toute les directions, et savoir quel bouton est concerné a ce moment la?
En suivant mon image, quand t'es sur "ON" comment tu fais pour en utilisant le curseur droit, te retrouver sur le movieclip d'a coté...(j'veux dire savoir qu'il y en a 1...et qui il est?)?
Et comment tu fais, si tu devais a nouveau aller a droite, détecter qu'il n'y a pas de movieclip a droite de "OFF" ?

Merci, merci...et merci ;-)

**dom_dev** · 15/06/2006, 18h48

hi,
c'est là qu'intervient le "controleur". C'est un objet qui contiendra les règles de défilement ça peut donner un truc du genre :
si tu as 3 boutons et la possibilité d'aller de gauche à droite il faudra écrire je traduis ça en langage simplifié :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
si(fleche droite){
     si(btn1.etat == survol){
          btn2.survol();
          btn1.notSurvol();
     }
     si(btn2.etat == survol){
          btn3.survol();
          btn2.notSurvol();
     }
}
// c'est plus la peine de traiter btn3 puisque la fleche droite ne fait rien dans ce cas, 
à moins que tu veuilles retourner sur le btn1

et ainsi de suite, il y a des algos plus élégants mais conceptuellement plus compliqués!

**Jayme65** · 16/06/2006, 17h41

dom_dev,
Merci beaucoup pour tes réponses!!
J'ai fait mes devoirs ;-) et j'arrive la dessus:

Code :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
//Array a 2 dimensions
var myMap:Array = new Array(new Array("1_on", "1_off"), new Array("option1", "option2", "option3"));
//Variable pour donner la position x,y dans l'array
var locatorx:Number = 0;
var locatory:Number = 0;
//Appelle la fonction qui donne l'état "survolé" au bouton
locateme();
//Variable avec le nom du bouton sélectionné pour chaque rangée
var activerow1:String;
var activerow2:String;
//
function menuKey() {
	// Left
	//vérifie a chaque fois que l'on ne deborde pas de l'array
	if (Key.getCode() == 37 && myMap[locatory][locatorx-1] != undefined) {
		locatorx--;
		locateme();
	}
	// Right                                       
	if (Key.getCode() == 39 && myMap[locatory][locatorx+1] != undefined) {
		locatorx++;
		locateme();
	}
	// Up                                     
	if (Key.getCode() == 38 && myMap[locatory-1][locatorx] != undefined) {
		locatory--;
		locateme();
	}
	// Down                                     
	if (Key.getCode() == 40 && myMap[locatory+1][locatorx] != undefined) {
		locatory++;
		locateme();
	}
	// SpaceBar                           
	if (Key.getCode() == 32) {
		//si l'on est dans la rangee 0...l'action ne doit concerner que cette rangee
		if (locatory == 0) {
			//envoie le bouton precedemment selectionné a la frame 1
			_root[activerow0].gotoAndStop(1);
			//mise a jour du bouton sélectionné
			activerow0 = myMap[locatory][locatorx];
			//et l'envoie a la frame 2
			_root[activerow0].gotoAndStop(2);
		}
		if (locatory == 1) {
			_root[activerow1].gotoAndStop(1);
			activerow1 = myMap[locatory][locatorx];
			_root[activerow1].gotoAndStop(2);
		}
	}
}
var keyListener:Object = new Object();
keyListener.onKeyDown = menuKey;
Key.addListener(keyListener);
//donne les coordonnees x,y du movieclip "highlight"
function locateme() {
	highlight._x = _root[myMap[locatory][locatorx]]._x;
	highlight._y = _root[myMap[locatory][locatorx]]._y;
}

Qu'est ce que tu penses de ca?
Vois-tu quelque chose a améliorer/corriger? Une suggestion?

Je me demandais comment faire pour que le bouton me retourne une valeure une fois sélectionné...finalement j'ai donné au boutons la valeure qu'il devait me retourner lorsqu'il est sélectionné;-)...est ce que tu penses que c'est une bonne méthode?

D'avance merci!

**dom_dev** · 19/06/2006, 11h17

bonjour,
l'essentiel est que tu sois arrivé au résultat. Personnellement j'aurai essayé d'être plus proche du langage objet cela permet de dissocier les problèmes et de distribuer les roles de façon logique. Par exemple ton état "survol" d'un bouton est indépendant de celui ci. Cela pourrait très bien aboutir à un survol visible hors de l'interface (je caricature bien sur).
Je n'ai pas assez de temps pour approfondir ton code mais par exemple une façon de savoir s'il est bien fait c'est de modifier ton interface et de dire par exemple : Tien je rajoute une ligne de boutons, et je modifie la règle de déplacement "quand j'arrive sur un bord et que je continue d'avancer je reviens au début de la ligne" ensuite tu regarde l'impacte sur ton code. Si les modifications sont réparties dans tout le code c'est que c'est pas très bien programmé. Si par contre il suffit de configurer quelques variables qui définnissent l'application dans un seul objet logique alors c'est gagné... ceci dit c'est plus facile à dire qu'à faire.

**Jayme65** · 19/06/2006, 16h35

Tu as raison..c'est vrai que j'ai le sentiment que ce n'est pas des plus terribles.
Si quelqu'un a une solution pour cet épineux probleme...il est le bienvenu.

L'on doit:
1) Se déplacer dans des movieclips qui miment le comportement d'un bouton
2) On doit donc savoir a tout moment quelle est le movieclip actif...et l'indiquer visuellement
3) On doit pouvoir sélectionner ce movieclip et le mettre on/off (et les autres movieclip appartenant a sa famillle doivent faire l'inverse)
4) En retour, ce movieclip doit pouvoir renvoyer une info selon son état (si il est ON ou OFF)

En résumer, une interface basée sur des movieclip..et sans souris;-)

Celui qui me pond un truc pareil...jlui donne ma soeur en marriage (Miss Normandie 2005)

Merci!!

Le pouvoir aux touches de direction!

Flash

Discussions similaires

Partager

Partager