Dans le langage Flash (Code 4.4), certains objets ont la capacité d'écouter des évènements. Les objets
Button et MovieClip réagissent par exemple aux mouvements de la souris. Le langage ActionScript permet ensuite de définir le traitement qui sera effectué au moment de l'action utilisateur. Dans cet exemple, la fonction act sera appelée quand l'utilisateur survolera l'objet avec sa souris. Certaines phases de capture peuvent être plus coûteuses en ressource que d'autres. Par exemple, à chaque évènement souris reçu, il faut parcourir l'ensemble des objets sensibles au clic (c'est-à-dire auquel un écouteur est attaché) et déterminer si le clic a eu lieu au dessus de l’un de ces objets. Cette opération, appelée le picking, implique notamment des calculs matriciels pour transformer les coordonnées du pointeur de la souris du système de coordonnées de la fenêtre de visualisation au système de coordonnées de l'objet. Elle peut impliquer, si l'objet à une forme non rectangulaire, des calculs d'appartenance d'un point à une forme géométrique et donc s'avérer relativement coûteuse en
Chapitre 4 – Descriptions de scènes et interactivité
calcul. A l'inverse, la capture de la pression d'une touche du clavier est un processus relativement trivial.
A partir de cette présentation du fonctionnement de la phase de traduction d’évènements utilisateurs en évènement scène, on peut retenir qu’il faut donc concevoir les scènes interactives en prenant en compte, non seulement les interactions possibles sur les terminaux cibles, mais également la puissance nécessaire pour traiter chaque évènement, en particulier pour les terminaux à faible capacité de calcul (comme les terminaux mobiles).
4.2.2 Transmission des évènements
Une fois l'évènement capté par un écouteur, celui-ci est ensuite transmis à une ou plusieurs entités chargées du traitement de cet évènement. On appelle ces entités des gestionnaires d'évènements ou handler. Il existe différentes méthodes pour signaler l'association écouteur-gestionnaire.
Dans le langage VRML, cette association est faite de manière explicite à l'aide d'une route, selon le mécanisme décrit dans le chapitre 2, reliant écouteur et gestionnaire. Si plusieurs gestionnaires doivent traiter le même évènement, la scène comportera plusieurs routes.
Dans les langages XML, l'élément listener, vu précédemment, possède un attribut handler qui indique l'élément qui traitera cet évènement. Il peut s'agir d'une animation (pour l'activer), d'un hyperlien (pour déclencher la navigation) ou d'un script (pour l'exécuter). Pour qu'un même évènement soit traité par plusieurs gestionnaires, il faut également utiliser plusieurs éléments listener.
La transmission d'un évènement jusqu'au gestionnaire est simple en général. Cependant, le processus se complique si le traitement d’un évènement dépend de l’endroit dans l’arbre de scène où il est traité, ou, si plusieurs éléments sont susceptibles d’être intéressés par un même évènement. En effet, si un seul nœud est intéressé par un évènement précis, il n’est pas nécessaire de propager l’évènement après traitement par le gestionnaire. En revanche, si plusieurs capteurs d’un même évènement sont présents dans la scène, il faut connaître l'ordre dans lequel seront effectués les traitements de cet évènement au niveau des différents écouteurs. Supposons qu’une scène contienne un sous-arbre qui, si l'on clique dessus, déclenche le changement de la scène. Supposons encore que dans ce sous-arbre, un objet soit déplaçable avec la souris. Un clic sur cet objet pourra produire des résultats différents si l’évènement est traité d’abord par la logique de changement de scène ou par la logique de déplacement de l'objet. Les langages de descriptions de scènes spécifient donc l'ordre de propagation des évènements.
Le standard W3C DOM Events définit trois méthodes/phases de propagation des évènements dans un arbre de scène :
• la capture (en anglais capture), qui consiste à parcourir l’arbre en descendant du nœud racine vers les nœuds feuilles et à transmettre à chaque nœud intéressé l’évènement en question ;
Descriptions de scènes multimédia : représentations et optimisations
- 84 -
• le ciblage (en anglais target), qui consiste à transmettre l’évènement uniquement au nœud concerné sans le transmettre ni à ses parents, ni à ses enfants ;
• et le bouillonnement (en anglais bubble), qui consiste à démarrer du nœud issu de la phase de ciblage et à remonter l’arbre en transmettant l’évènement aux nœuds parents.
Le modèle évènementiel DOM Events permet à un même évènement d'être traité dans ces trois phases dans l’ordre suivant : capture, ciblage, bouillonnement. Certains évènements peuvent être restreints par définition à pas subir la phase de bouillonnement. Enfin, dans ce modèle, chaque écouteur s'enregistre pour une phase précise et à la possibilité d'arrêter la propagation d'un évènement.
Le standard VRML (BIFS), en revanche, définit une seule méthode de propagation des évènements en utilisant les routes. La propagation d'évènement selon le modèle DOM n'existe pas. Cependant, il est possible d'émuler cette propagation en multipliant le nombre de routes.
Figure 4.2 – Bouillonnement d'évènement (a) Figure 4.3 – Bouillonnement d'évènement (b)
Figure 4.4 – Bouillonnement d'évènement (c) Figure 4.5 – Bouillonnement d'évènement (d)
Les figures ci-dessus (Figure 4.2, Figure 4.3, Figure 4.4 et Figure 4.5) montrent quatre états d'une même scène, décrite en SVG dans le Code 4.5, qui tire profit de la propagation ascendante par défaut. Cette scène comprend trois rectangles visuellement imbriqués. L'état (a) décrit la scène lorsque la souris ne survole aucun objet. L'état (b) décrit la scène quand la souris survole le rectangle le plus extérieur. Seule l'apparence de ce dernier est modifiée (contour plus épais) car le bouillonnement n'a pas d'impact du fait que le rectangle est dans l'élément g le plus englobant. L'état (c) décrit la scène quand le rectangle du milieu est survolé. La propagation ascendante, par défaut, de l'évènement "entrée dans l'objet" conduit à la modification des deux rectangles extérieurs. Enfin, l'état (d) décrit la scène quand le rectangle le plus imbriqué est survolé. La propagation ascendante conduit dans ce cas à la modification des trois rectangles.
Chapitre 4 – Descriptions de scènes et interactivité
<svg onload="init_menu()" fill="#ccc" stroke="black" stroke-width="1"> <g id="element1">
<rect x="5" y="5" width="200" height="200" /> <g id="element2">
<rect x="35" y="35" width="140" height="140" /> <g id="element3">
<rect x="65" y="65" width="80" height="80"/> </g> </g> </g> <script type="text/ecmascript"> function init_menu() { document.getElementById("element1").addEventListener('mouseover', entrée, false); document.getElementById("element2").addEventListener('mouseover', entrée, false); document.getElementById("element3").addEventListener('mouseover', entrée, false); document.getElementById("element1").addEventListener('mouseout', sortie, false); document.getElementById("element2").addEventListener('mouseout', sortie, false); document.getElementById("element3").addEventListener('mouseout', sortie, false); } function entrée(evt) { evt.currentTarget.setAttributeNS(null, "stroke-width", "8"); } function sortie(evt) { document.getElementById("element1").setAttributeNS(null, "stroke-width", "1"); document.getElementById("element2").setAttributeNS(null, "stroke-width", "1"); document.getElementById("element3").setAttributeNS(null, "stroke-width", "1"); } ]]> </script> </svg>