Presque toutes les interfaces utilisateur PC sont conçues autour de la notion de déplacer un curseur et de cliquer sur des objets. Les boutons, les menus, les listes déroulantes, les listes et tous les autres contrôles de l'interface utilisateur standard fonctionnent de cette manière. La souris est utilisée pour positionner le curseur et la position du curseur est utilisée pour effectuer une action.
C'est un paradigme de conception qui a bien fonctionné, mais récemment, de nouvelles technologies telles que les écrans tactiles et les capteurs de mouvement (pensez à la Wii) ont remis en question la notion d'utilisation d'une souris ou même la présence d'un curseur sur l'écran…
Bien avant le focus sur les écrans tactiles ou la Wii, des programmes tels que le navigateur Web Opera ont introduit la notion de gestes de la souris. Le concept était simple: au lieu d'utiliser la position du curseur pour déterminer l'action à exécuter, le mouvement du curseur lui-même indiquerait une action. Donc, en déplaçant le curseur dans un mouvement circulaire, vous déclenchez l'actualisation d'un navigateur Web. En le déplaçant vers la gauche, vous retourniez dans l'historique des pages et en le déplaçant vers la droite, vous avanciez.
Pour les développeurs Flash, il existe une bibliothèque de mouvements de souris gratuite qui permet ce type d’interaction avec très peu d’effort. Pour illustrer son utilisation, nous allons créer un lecteur vidéo simple utilisant des gestes de la souris plutôt que des boutons pour modifier la lecture vidéo..
Étape 1: Bibliothèque de mouvements de souris
Téléchargez la bibliothèque de mouvements de souris de Didier Brun ici (http://www.brighthub.com/hubfolio/matthew-casperson/media/p/50540.aspx) et extrayez-la dans un emplacement pratique.
Étape 2: Nouvelle application
Créez une nouvelle application Web Flex et ajoutez la bibliothèque de mouvements de la souris à la liste des chemins de construction. Vous pouvez accéder à la propriété du chemin de génération en sélectionnant Projet> Propriétés> Chemin de génération Flex dans Flex Builder..
Étape 3: FLV
Vous aurez besoin d’un fichier vidéo FLV pour tester l’application. La version de démonstration du convertisseur IMToo FLV (http://www.imtoo.com/flv-converter.html) convertira les vidéos courtes de presque tous les formats au format FLV. Si vous ne possédez pas une collection de films au format FLV, cet outil est idéal pour convertir presque toutes les vidéos gratuites que vous pouvez télécharger sur le Web. J'ai converti l'une des vidéos de démonstration livrées avec Vista pour cette démonstration.
Étape 4: Attributs d'application
Vous devrez modifier certains attributs de l'élément Application, contenus dans le fichier MXML. Ici, nous avons spécifié la largeur, la hauteur, la couleur d'arrière-plan (backgroundGradientColors) et la transparence (backgroundGradientAlphas). Nous avons également défini la fonction appComplete à appeler en réponse à l'événement applicationComplete. Cela nous donne un point d’entrée dans l’application où les gestes de la souris seront configurés..
Étape 5: mx: VideoDisplay
Ajoutez l'élément mx: VideoDisplay suivant en tant qu'enfant de l'élément mx: Application.
L'attribut id attribue un nom à VideoDisplay que nous pouvons référencer à partir d'ActionScript.
Les propriétés top, bottom, left et right définissent la position de VideoDisplay.
L'attribut autoPlay est défini sur false, ce qui signifie que la lecture de la vidéo ne commencera pas immédiatement..
L'attribut source pointe vers l'emplacement du fichier vidéo. Si vous avez votre propre fichier vidéo FLV, vous devrez alors modifier cet attribut pour le désigner..
L'attribut metadataReceived pointe vers une fonction qui sera appelée une fois les détails de la vidéo chargés par VideoDisplay. Nous l'utilisons pour déterminer la durée de la vidéo afin de pouvoir modifier la valeur maximale de HSlider..
L'attribut playheadUpdate pointe vers une fonction qui sera appelée lors de la lecture de la vidéo. Cela nous permet de suivre la position actuelle du fichier vidéo et de mettre à jour le HSlider en conséquence..
Étape 6: mx: HSlider
Ajoutez l'élément mx: HSlider suivant en tant qu'enfant de l'élément mx: Application
L'attribut id attribue un nom à VideoDisplay que nous pouvons référencer à partir d'ActionScript.
Les propriétés top, bottom, left et right définissent la position de VideoDisplay.
L'attribut change définit une fonction à appeler lorsque l'utilisateur modifie la position des curseurs..
Étape 7: interface
Vous devriez maintenant avoir une interface graphique qui ressemble à celle ci-dessous.
Étape 8: mx: script
Ajoutez un élément mx: Script en tant qu'enfant de mx: Application. Cet élément contiendra le code ActionScript pour notre application.
Étape 9: Importer des packages
Nous devons importer un certain nombre de paquets. Ceci est fait à l'intérieur de l'élément mx: Script. Trois classes du package mx.events, MetadataEvent, SliderEvent et VideoEvent, sont utilisées comme paramètres dans les fonctions d’écouteur d’événements. Le package com.foxaweb.ui.gesture inclut les classes de la bibliothèque de mouvements de souris..
Un certain nombre de constantes sont ensuite définies. La constante VIDEO_STEP définit combien de temps la position actuelle de la vidéo sera déplacée lorsque nous allons en avant ou en arrière. Les autres chaînes définissent toutes le nom des actions qui seront associées aux gestes de la souris. En général, il est prudent de mapper les chaînes avec les constantes lorsqu'elles sont utilisées comme identification, car cela permet au compilateur de détecter les fautes d'orthographe telles que if (action == SETP_FORWARD), au lieu de rencontrer des problèmes au moment de l'exécution avec des chaînes mal orthographiées comme if (action == "setp_forward").
La dernière variable à définir est une référence à un objet MouseGesture. C'est cet objet qui implémente la logique des gestes de la souris.
private var mg: MouseGesture = null;
Étape 12: nouvelle fonction
Ajoutez une nouvelle fonction appelée appComplete. C'est la fonction que nous avons attribuée à l'attribut applicationComplete dans l'élément mx: Application. C'est ici que nous allons initialiser les gestes de la souris.
Nous créons d’abord un nouvel objet MouseGesture. Le constructeur MouseGesture doit recevoir une référence à la scène pour pouvoir répondre aux événements de la souris..
mg = new MouseGesture (this.stage);
Ensuite, nous définissons un certain nombre de gestes de souris. Un geste de la souris est défini comme une séquence de mouvements de la souris, avec des nombres représentant les directions de déplacement conformément à l'image ci-dessous. Tous les gestes de la souris commencent par un clic sur le bouton gauche de la souris et se terminent par le relâchement du bouton..
Pour un simple geste où la souris est déplacée en ligne droite, nous utilisons une chaîne contenant un seul nombre. Ici, le geste de la souris "jouer" est défini comme un mouvement de souris dans une seule direction, à droite, qui est représentée par le chiffre 0.
mg.addGesture (PLAY, "0");
De même, les gestes de la souris "stop" et "pause" sont définis comme des mouvements de la souris vers le bas et vers la gauche..
Le geste de la souris "pas à pas" est plus complexe. Il s'agit d'un mouvement de souris en demi-cercle, qui commence à gauche puis se déplace vers la droite. La flèche rouge indique le début du mouvement.
Ce mouvement est défini par la chaîne "67012". Vous pouvez voir comment cette chaîne est dérivée en faisant correspondre le mouvement de la souris aux nombres attribués à ces mouvements. Nous commençons à monter (6), en diagonale vers le haut et à droite (7), à gauche (0), en diagonale vers le bas et à droite (1) puis vers le bas (2).
mg.addGesture (STEP_FORWARD, "67012");
Le "step_backward" est défini de la même manière, mais cette fois-ci il s’agit d’un mouvement de souris en demi-cercle, qui commence à droite puis se déplace vers la gauche..
mg.addGesture (STEP_BACKWARD, "65432");
Nous assignons ensuite la fonction matchHandler à appeler lorsqu'un geste de la souris a été détecté.
La fonction matchHandler est appelée lorsqu'un geste de la souris a été détecté. Le paramètre event contient une propriété appelée datas, qui correspond à l'une des constantes affectées aux événements de souris dans la fonction appComplete. En fonction du geste de la souris détecté, nous effectuons certaines actions sur VideoDisplay. Les actions play, stop et pause sont toutes très simples. Avec les actions step_forward et step_backward, nous augmentons ou diminuons la propriété playheadTime de VideoDisplay, ce qui a pour effet de sauter en avant ou en arrière..
fonction privée matchHandler (event: GestureEvent): void switch (event.datas) case PLAY: this.videoPlayer.play (); Pause; case STOP: this.videoPlayer.stop (); Pause; case PAUSE: this.videoPlayer.pause (); Pause; case STEP_FORWARD: var newFowardTime: Number = this.videoPlayer.playheadTime + VIDEO_STEP; while (newFowardTime> this.videoPlayer.totalTime) newFowardTime = this.videoPlayer.totalTime; this.videoPlayer.playheadTime = newFowardTime; Pause; case STEP_BACKWARD: var newBackwardTime: Number = this.videoPlayer.playheadTime - VIDEO_STEP; si (newBackwardTime < 0) newBackwardTime = 0; this.videoPlayer.playheadTime = newBackwardTime; break;
Étape 15: HSlider
Cette démonstration a pour objectif de modifier la lecture vidéo à l’aide des gestes de la souris, mais pour des raisons pratiques, un HSlider peut également être utilisé. La fonction metadataReceived est appelée une fois que VideoDisplay a chargé les métadonnées, qui incluent la longueur totale de la vidéo. Dans cette fonction, nous définissons la valeur maximale du curseur sur la longueur totale de la vidéo. Nous activons ensuite le curseur - jusqu'à ce que nous sachions combien de temps la vidéo est le curseur ne peut pas être utilisé pour définir la position.
La position du curseur doit être synchronisée avec la position de lecture actuelle de la vidéo. La fonction playHeadUpdate est appelée à intervalles réguliers par VideoDisplay, et c’est ici que nous définissons la valeur de HSlider sur playheadTime de VideoDisplay..
fonction privée playHeadUpdate (event: VideoEvent): void this.videoPosition.value = event.playheadTime;
Étape 17: Fonction videoPositionChanged
Le curseur peut également être utilisé pour modifier la position de lecture actuelle de la vidéo. Ici, nous effectuons l’inverse de la fonction playHeadUpdate et définissons la valeur playheadTime de VideoDisplay sur la valeur de HSlider..
fonction privée videoPositionChanged (event: SliderEvent): void this.videoPlayer.playheadTime = this.videoPosition.value;
Conclusion
Lorsque vous chargez l'application, vous devriez voir le fichier vidéo. Étant donné que nous définissons l'attribut autoPlay de l'objet VideoDisplay sur false, la vidéo est arrêtée et affiche la première image..
Cliquez sur le bouton gauche de la souris, déplacez la souris vers la gauche et relâchez le bouton. La vidéo devrait alors être lue. Cliquez, déplacez la souris vers le bas et relâchez, et la vidéo doit être suspendue. Cliquez, déplacez la souris dans un demi-cercle supérieur de gauche à droite et relâchez-la. La vidéo devrait être sautée d'une seconde..
Un autre avantage des gestes de la souris est qu’ils suppriment le besoin d’autres contrôles de l’interface utilisateur, ce qui peut constituer un avantage considérable lorsque l’espace disponible sur l’écran est réduit au minimum (comme les bannières publicitaires). Vous pouvez même les utiliser pour les jeux de bannières publicitaires "nourrir le singe" ou "faire le plus de tractions".
Les gestes de la souris sont très faciles à implémenter dans Flash et fournissent un moyen intuitif d’interagir avec un PC. Avec seulement quelques lignes de code, vous pouvez redéfinir la manière dont les utilisateurs interagissent avec votre application, ce qui libère l'espace d'écran réservé aux composants d'interface utilisateur plus traditionnels..
Merci d'avoir lu, j'espère que vous avez appris quelque chose!
Share
Accentsconagua
