Modification de la position -- Flash CS3

La manipulation la plus banale d'un objet d'affichage consiste à en modifier la position à l'écran. Pour définir la position d'un objet d'affichage, changez ses propriétés x et y.

myShape.x = 17;
myShape.y = 212;

Le système de positionnement des objets d'affichage traite la scène comme un système de coordonnées cartésiennes (avec un axe horizontal x et un axe vertical y). L'origine du système de coordonnées (les coordonnées 0,0 des axes x et y) est le coin supérieur gauche de la scène. De ce point, les valeurs de x sont positives en allant vers la droite et négatives en allant vers la gauche, alors que, à l'opposé des systèmes de traçage traditionnels, les valeurs de y sont positives en descendant et négatives en montant. Par exemple, les lignes de code ci-dessus déplacent l'objet myShape à la coordonnée x 17 (17 pixels à droite du point d'origine) et à la coordonnée y 212 (212 pixels sous le point d'origine).

Par défaut, lorsqu'un objet d'affichage est créé en ActionScript, les propriétés x et y sont à 0, ce qui revient à placer l'objet dans le coin supérieur gauche de son contenu parent.

Sous-rubriques

Changement de position par rapport à la scène

Il est important de se rappeler que les propriétés x et y réfèrent toujours à la position de l'objet d'affichage par rapport aux coordonnées 0,0 des axes de son objet d'affichage parent. Ainsi, pour une instance de Shape (par exemple un cercle) contenue dans une instance de Sprite, mettre à zéro les propriétés x et y de l'objet Shape revient à placer le cercle dans le coin supérieur gauche de l'objet Sprite, qui n'est pas forcément le coin supérieur gauche de la scène. Pour positionner un objet par rapport aux coordonnées globales de la scène, utilisez la méthode globalToLocal() de tout objet d'affichage afin de convertir les coordonnées globales (scène) en coordonnées locales (conteneur de l'objet d'affichage) :

// positionner la forme dans le coin supérieur gauche de la scène, 
// quelle que soit la position de son objet parent.

// créer un Sprite, positionné à x:200 et y:200.
var mySprite:Sprite = new Sprite();
mySprite.x = 200;
mySprite.y = 200;
this.addChild(mySprite);

// tracer un point de référence aux coordonnées 0,0 du Sprite.
mySprite.graphics.lineStyle(1, 0x000000);
mySprite.graphics.beginFill(0x000000);
mySprite.graphics.moveTo(0, 0);
mySprite.graphics.lineTo(1, 0);
mySprite.graphics.lineTo(1, 1);
mySprite.graphics.lineTo(0, 1);
mySprite.graphics.endFill();

// création de l'instance de Shape pour le cercle.
var circle:Shape = new Shape();
mySprite.addChild(circle);

// tracer dans la forme un cercle de rayon 50, avec les coordonnées x:50, y:50 pour le centre.
circle.graphics.lineStyle(1, 0x000000);
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();

// positionner la forme dans le coin supérieur gauche de la scène, aux coordonnées 0. 
var stagePoint:Point = new Point(0, 0);
var targetPoint:Point = mySprite.globalToLocal(stagePoint);
circle.x = targetPoint.x;
circle.y = targetPoint.y;

Inversement, vous pouvez utiliser la méthode localToGlobal() de la classe DisplayObject pour convertir des coordonnées locales en coordonnées de la scène.

Création d'interactions aux actions de glisser-déposer

Il est fréquent qu'un objet doive être déplacé en réponse à une action de glisser-déposer, par exemple pour déplacer un objet avec la souris jusqu'à ce que l'utilisateur relâche le bouton gauche. Il existe deux façons de créer des interactions aux actions de glisser-déposer en ActionScript. Dans les deux cas, deux événements de souris sont utilisés : lorsque le bouton de gauche est pressé (l'objet reçoit alors l'instruction de suivre le curseur de la souris) et lorsqu'il est relâché (l'objet reçoit alors l'instruction de cesser de suivre le curseur de la souris).

La première technique, qui fait appel à la méthode startDrag(), est la plus simple mais la plus limitée. Lorsque le bouton de la souris est pressé, la méthode startDrag() de l'objet à déplacer est appelée. Lorsque le bouton est relâché, c'est à son tour la méthode stopDrag() qui est appelée.

// ce code crée une interaction à une action de glisser-déposer à l'aide de startDrag()
// (deuxième technique) 
// square est un objet d'affichage (par ex. une instance de MovieClip ou de Sprite).

import flash.events.MouseEvent;

// cette fonction est appelée lors de l'appui sur le bouton de la souris.
function startDragging(event:MouseEvent):void
{
    square.startDrag();
}

// cette fonction est appelée lors du relâchement du bouton de la souris.
function stopDragging(event:MouseEvent):void
{
    square.stopDrag();
}

square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

Cette technique souffre toutefois d'une limitation importante : il n'est possible de déplacer qu'un seul élément à la fois avec startDrag(). Si un objet d'affichage est en cours de déplacement avec cette méthode, et si la méthode startDrag() d'un autre objet est appelée, le premier objet cesse immédiatement de suivre la souris. Par exemple, si la fonction startDragging() est modifiée comme ci-dessous, seul l'objet circle sera déplacé, malgré l'appel de la méthode square.startDrag() :

function startDragging(event:MouseEvent):void
{
    square.startDrag();
    circle.startDrag();
}

Étant donné qu'un seul objet à la fois peut être déplacé à l'aide de la méthode startDrag(), la méthode stopDrag() peut être appelée pour tout objet d'affichage, et elle interrompt le déplacement en cours, quel que soit l'objet actuellement déplacé.

Pour déplacer plusieurs objets d'affichage, ou pour éviter tout risque de conflit au cas où plusieurs objets seraient susceptibles d'utiliser startDrag(), il est préférable d'utiliser la technique de suivi de la souris pour créer l'effet de glisser-déposer. Avec cette technique, lorsque le bouton de la souris est pressé, une fonction est enregistrée comme objet écouteur auprès de l'événement mouseMove de la scène. Cette fonction, qui est alors appelée à chaque déplacement de souris, déplace l'objet glissé sur les coordonnées x et y de la souris. Lors du relâchement du bouton de la souris, l'enregistrement de la fonction comme écouteur est annulée, si bien qu'elle n'est plus appelée en cas de mouvement de la souris et que l'objet cesse de suivre celle-ci. Le code suivant illustre cette technique :

// ce code crée une interaction à une action de glisser-déposer à l'aide d'une fonction de suivi de souris
// (deuxième technique) 
// circle est un objet d'affichage (par ex. une instance de MovieClip ou de Sprite).

import flash.events.MouseEvent;

var offsetX:Number;
var offsetY:Number;

// cette fonction est appelée lors de l'appui sur le bouton de la souris.
function startDragging(event:MouseEvent):void
{
    // enregistrer la différence (décalage) entre le point où était
    // le curseur lors de l'appui sur le bouton et les coordonnées x,y
    // du cercle lors de cet appui.
    offsetX = event.stageX - circle.x;
    offsetY = event.stageY - circle.y;
    
    // ordonner à Flash Player d'écouter l'événement mouseMove
    stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}

// cette fonction est appelée lors du relâchement du bouton de la souris.
function stopDragging(event:MouseEvent):void
{
    // ordonner à Flash Player de cesser d'écouter l'événement mouseMove
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}

// cette fonction est appelée à chaque mouvement de souris,
// tant que le bouton gauche reste appuyé.
function dragCircle(event:MouseEvent):void
{
    // déplacement du cercle à l'emplacement du curseur, en préservant
    // le décalage entre l'emplacement du curseur et 
    // l'emplacement de l'objet déplacé.
    circle.x = event.stageX - offsetX;
    circle.y = event.stageY - offsetY;

    // ordonner à Flash Player d'exécuter un rafraîchissement d'écran après cet événement.
    event.updateAfterEvent();
}

circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

Outre le déplacement d'un objet d'affichage avec le curseur de la souris, une autre interaction courante avec le glisser-déposer consiste à amener l'objet déplacé au premier-plan, afin qu'il semble flotter au-dessus des autres objets. Par exemple, supposons deux objets, un cercle et un carré, qui sont tous deux dotés d'une interaction aux actions de glisser-déposer. Si le cercle se trouve sous le carré dans la liste d'affichage, et si vous cliquez sur le cercle et le déplacez vers le carré, il semblera glisser sous le carré, ce qui détruira l'illusion. Il est donc préférable de prévoir qu'en cas de clic sur le cercle celui-ci soit amené en haut de la liste d'affichage, afin de toujours apparaître au-dessus des autres objets.

Le code suivant (qui est une adaptation de l'exemple précédent) crée une interaction de glisser-déposer pour deux objets d'affichage, un cercle et un carré. Lorsque le bouton de la souris est pressé au-dessus de l'un d'eux, cet élément est amené en haut de la liste d'affichage de la scène, afin que l'élément déplacé passe toujours devant les autres. Le code qui a été modifié ou ajouté par rapport à l'exemple précédent apparaît en gras.

// ce code crée une interaction à une action de glisser-déposer à l'aide d'une fonction de suivi de souris
// (deuxième technique) 
// circle et square sont des objets d'affichage (par ex. des instances de MovieClip ou de Sprite).
// instances).

import flash.display.DisplayObject;
import flash.events.MouseEvent;

var offsetX:Number;
var offsetY:Number;
var draggedObject:DisplayObject;

// cette fonction est appelée lors de l'appui sur le bouton de la souris.
function startDragging(event:MouseEvent):void
{
    // mémoriser l'objet à déplacer
    draggedObject = DisplayObject(event.target);
    
    // enregistrer la différence (décalage) entre le point où était
    // le curseur lors de l'appui sur le bouton et les coordonnées x,y
    // de l'objet lors de cet appui.
    offsetX = event.stageX - draggedObject.x;
    offsetY = event.stageY - draggedObject.y;
    
    // déplacer l'objet sélectionné en haut de la liste d'affichage
    stage.addChild(draggedObject);
    
    // ordonner à Flash Player d'écouter l'événement mouseMove
    stage.addEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}

// cette fonction est appelée lors du relâchement du bouton de la souris.
function stopDragging(event:MouseEvent):void
{
    // ordonner à Flash Player de cesser d'écouter l'événement mouseMove
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}

// cette fonction est appelée à chaque mouvement de souris,
// tant que le bouton gauche reste appuyé.
function dragObject(event:MouseEvent):void
{
    // déplacement de l'objet à l'emplacement du curseur, en préservant
    // le décalage entre l'emplacement du curseur et 
    // l'emplacement de l'objet déplacé.
    draggedObject.x = event.stageX - offsetX;
    draggedObject.y = event.stageY - offsetY;
    
    // ordonner à Flash Player d'exécuter un rafraîchissement d'écran après cet événement.
    event.updateAfterEvent();
}

circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

Pour créer un effet plus sophistiqué, par exemple pour un jeu où des jetons ou des cartes passent d'une pile à l'autre, il est possible d'ajouter l'objet déplacé à la liste d'affichage de la scène lorsqu'il est « pris », puis de l'ajouter à une autre liste d'affichage (la « pile » sur laquelle il est déposé) lors du relâchement du bouton de souris.

Enfin, pour obtenir un meilleur effet, vous pouvez aussi appliquer un filtre Ombre portée à l'objet lors du clic (au début du déplacement) et désactiver ce filtre lorsque l'objet est déposé. Pour tous détails sur l'utilisation du filtre Ombre portée et des autres filtres en ActionScript, voir le Filtrage des objets d'affichage.