Présentation de la liste des tutoriaux de cette page
Basée sur la manipulation par glissé déposé d'objet sur la scène cette série de tutoriaux vous permettra de mieux appréhender l'environnement de l'interface utilisateur et des interactions utilisateurs sur l'espace. Vous trouverez les tutoriaux suivants sur cette page:
- Mise en place d'une glissière et de son interaction
- Mise en place d'un panier virtuel
Mise en place d'une glissière et de son interaction
Nous allons adapter l’exercice précédent en remplaçant les champs par des curseurs pour modifier les valeurs d’actions sur l’objet final. Vous pouvez télécharger les fichiers nécessaires flash_as_8_1.fla, ici.
Pour réaliser la mise en place d’un curseur, il nous faut deux éléments: une cible pouvant se déplacer de manière autonome, et ensuite un bouton sur lequel nous pourrons accrocher un script. La solution est tout simplement d’imbriquer un bouton dans un clip.
Commencons par mettre en place un simple objet déplacable sur la scène, sans limitation de mouvement. Dessinnons un carré, convertissons le en symbole ”bouton”, et convertissons le à nouveau en symbole ”Clip”. De cette façon nous avons une imbrication du bouton dans le clip. Ouvrons le clip afin de mettre un script sur le bouton:
Nous trouvons les deux actions nécessaires dans le menu ”+ --> Actions --> Contrôle sur les clipes --> StartDrag et/ou StopDrag”. Il est à noter qu’en ce qui concerne les divers paramètres à préciser, aucun ne sont vraiment nécessaire pour notre cas. Si nous ne precisons pas de nom de clip cible, le clip dans lequel le bouton se trouve encapsulé sera pris par défaut. Ensuite du fait que nous ne plaçons pas de limitation de mouvement, nous n’avons pas à remplir les contraintes de rectangle. L’option de ”verouillage de la souris au centre” permet de repositionner automatiquement le centre de l’objet déplacé sur la pointe de la souris. La seule modification qu’il nous faut veiller est que lors de la mise en place du ”StartDrag” par défaut Flash nous propose un événement souris ”on release”, il nous faudra remplacer par ”on press” et decocher le ”on release”. Voici le code de base :
on (press) {
startDrag("");
}
on (release) {
stopDrag();
}
Maintenant revenons a nos curseurs et voyons comment adapter le code pour réagir au mouvement et à la position du curseur. Posons tout d’abord quelques schemas qui vont nous permettre de comprendre le mécanisme et ensuite nous avons besoin de revenir a la règle de trois pour obtenir un résultat.
Règle de trois: Disons que lorsque le curseur se trouve en limite droite, ou en fin de longeur de course, le niveau d’affectation est au maximum, et lorsqu’il se trouve en mimite gauche le niveau est à 0. Donc qu’en est il lorsque le curseur se trouve entre ces deux positions extrèmes. Posons les deux équations que nous avons:
LimiteDroite = NiveauMax PositionCurseur = NiveauInconnu
donc avec la règle de trois nous pouvons poser:
NiveauInconnu = (PositionCurseur * NiveauMax) / LimiteDroite
Avec les valeurs définies dans le tableaux de la page précédente nous pouvons définir les variables et l’équation quii nous donneront a chaque mouvement du curseur la valeur d’affectation a apporter à l’objet. Nous remarquerons que certaine de ces valeurs ne seront pas modifier par l’action du curseur comme ”NiveauMax”, et ”LimiteDroite”. Nous pourrons donc les initiliser et les mémoriser lors d’un ClipEvent(load) par exemple. Voyons les diverses variables et equation:
- NiveauMax
- la valeur maximale d affectation. Dans le cas d une rotation il s agirat de 360¡, pour un alpha il s agirat de 100%. Il nous faudra donc le d finir pour chacun des curseurs. Nous pourrions utiliser le nom de l occurence global pour d finir cette valeur.
- Position du curseur
- curseur._x, ou encore la position actuelle du curseur
- Limite droite
- barre._width, la largeur hors tout de la réglette sur laquelle se déplace le curseur.
Commencons par mettre en place un curseur avec son fonctionnement et ses limitations, nous verrons ensuite ce qui en est de l’interaction avec un objet exterieur et de la réutilisation de ce même curseur à une autre tache. Insérons un nouveau symbole MovieClip, dessinons une barre en forme de guide et et placons son centre sur l’extrémité gauche. Pour cela nous pouvons nous aider de l’outil d’alignement (Cmd K ou Ctrl K). Placons ce symbole sur la scène, nommons le ”barre”, et positionnons le précisement grace à la palette info (Cmd Alt I ou Ctrl Alt I) de manière à n’obtenir que des valeurs rondes pour les premiers essais. Disons L=400, H=10, X=50, Y=100.
Dessinons un rectangle vertical sur la scène et convertissons le en symbole Bouton, (nous aurons le temps de nous affairer aux divers états de ce bouton ultérieurement). Placons un script + --> Actions --> Contrôle sur les clips -- > StratDrag, et renseignons les divers paramètres: Press au lieu de release, contrainte du rectangle aux dimensions de notre précédente barre, G=50, D=50+400,H=100,B=100.
Rajoutons un on release, stopdrag, que nous trouverons dans le même menu.
Convertissons maintenant notre bouton en symbole MovieClip, afin de lui donner une enveloppe cible, nommons le ‘curseur’ et positionnons le sur la barre en nous aidant de la palette d’info, disons L=10, H=30, X=200, Y=100. Il ne nous reste plus qu’a lancer l’animation et en vérifier le resultat. (Fichier 13-Drag-01.fla)
Note: Attention en utilisant la palette d’alignement (Cmd K ou Ctrl K), de bien veiller à la position de l’indicateur de repère que nous choisissons. Nous pouvons selectionner dans le petit damier soit comme repère le centre de l’objet, soit son coin supérieur haut gauche. De là peut varier nos positionnement sur la scène ou entre nos objets.
Rendons maintenant notre curseur independant de ses limitations fixes, mais tributaire de la position et des dimensions de la barre qui lui sert de glissière. Nous allons donc devoir nous servir comme nous l’avions vu precedemment de variables dans lesquelles nous stockerons ces valeurs. Pour cela nous allons réaliser trois étapes, la première consistant a ajouter un ClipEvent(load) a l’enveloppe de notre curseur, la deuxième en convertissant en MovieClip l’ensemble curseur, barre, et enfin en modifiant le script du bouton en remplacant les limitations fixes par les variables.
Un petit détail de disposition dans l’espace que nous devons néanmoins aborder maintenant, concerne la manière dont Flash gère les coordonnées x, y. En fait il existe un système de coordonnées pour chacun des MovieClip. Cest à dire que chaque éléments contenu dans un MovieClip identique partagera les coordonnées du MovieClip. Dans notre cas, le curseur et la barre étant dans le même MovieClip, et le bord gauche de la barre etant positionné sur le point central du MovieClip, la limite de déplacement du curseur sera identique à la largeur de la barre. Il n’est plus nécessaire de tenir compte du point de positionnement de la barre sur la scène. Idem pour la limitation vertivale. En calir nos limitations de contrainte pourrait s’ecrire G=0, D=largeur de la barre, H=0, B=0.
Dans un soucis de portabilité et d’éventuelle modification ultérieure nous coderons l’ensemble des limitations donc de cette apparence. G=position X de la barre, D=largeur de la barre, H=position y de la barre, B=position y de la barre.
Le CipEvent(load) étant positionné sur le Clip curseur, il nous faut remonter d’un niveau pour obtenir le Clip barre. Donc nous appelerons la propriétés _parent, qui nous permet de remonter d’un niveau, avant d’interepler le clip barre et d’en obtenir les diverses propriétés nécessaires a l’initialisation de nos variables. Voici les divers scripts
Celui du Clip curseur
onClipEvent (load) {
gauche = _parent.barre._x;
droite = _parent.barre._width;
milieu = _parent.barre._y;
}
Celui du Bouton Curseur
on (press) {
startDrag("", false, gauche, milieu, droite, milieu);
}
on (release) {
stopDrag();
}
Nous pouvons maintenant dupliquer le MovieClip complet (Curseur + barre) et avoir autant d’ensemble curseur fonctionnant de manière autonome. (13-Drag-02.fla).
Nos curseurs fonctionnants, il ne nous reste plus qu’à recuperer la valeur de déplacement, la convertir au proporatat du niveau maximum possible, et d’affecter l’objet concerné. Le niveau maximum, comme nous l’avions vu précédemment sera différent en fonction de l’utilité affecté au curseur. dans notre exemple, il sera soit de 360 soit de 100. Nous allons utilisé le nom d’occurence du MovieClip Complet pour passer ce paramètre. Nous verrons plus tard une autre possibilité en utilisant les smart clip.
Dans notre fichier 13-Drag.fla, nous avons deux occurences du symbole ‘potar’ sur la scène, la première est nommée ”360” la deuxième ”100”. Nous allons comencer par recuperer cette valeur dans le ClipeEvent(load).
onClipEvent (load) {
gauche = _parent.barre._X;
droite = _parent.barre._width;
milieu = _parent.barre._y;
feuvert = 0;
val = _parent._name;
}
Durant tout le temps que l’utilisateur actionnera le curseur, il faudra que les modifications s’opérant sur l’objet soient rafraîchit en permanence. Il n’existe pas d’evenement du type ‘tant que la souris est baissée’ dans Flash, il va nous falloir le mettre en place.
Pour cela nous allons utilisée une variable ‘feuvert’ que l’on initialise à 1 quand la souris se baisse et à 0 dés que la souris se relève. Nous pouvons ajouter cette opération dans le script du bouton et il ne nous restera plus qu’à filtrer dans un ClipEvent (enterframe) pour savoir a quel moment les modifications sur l’objet peuvent s’opérer.
Pour affecter l’objet, nous allons recuperer la formule définit et mis en place précédemment dans cet exercice. Nous pouvons également placer une variable de contrôle pour nous donner lcontinuellement cette valeur. Il suffit de la placer au premier niveau du symbole ‘potar’ et de la nommer _parent.temp qui correspond a la valeur de calcul obtenu.
NiveauInconnu = (PositionCurseur * NiveauMax) / LimiteDroite
Un second filtre (test de condition if) nous permet de savoir si nous devons affecter la rotation ou l’opacité en fonction du nom d’occurence donné. S’il s’agit de 360 nous affecterons la rotation de l’objet, s’il s’agit de 100 son opacité. Voici les deux codes ClipEvent() et Script de bouton apres avoir étés adaptés:
onClipEvent (load) {
gauche = _parent.barre._X;
droite = _parent.barre._width;
milieu = _parent.barre._y;
feuvert = 0;
val = _parent._name;
}
onClipEvent (enterFrame) {
if (feuvert == 1) {
temp = (_x * val)/droite;
if (val == 360) {
_root.objet._rotation = temp;
} else {
_root.objet._alpha = 100 - temp;
}
}
}
on (press) {
startDrag("", false, gauche, milieu, droite, milieu);
feuvert = 1;
}
on (release) {
stopDrag();
feuvert = 0;
}
