Discussion :

[siu.territories]

Bonjour à tous,

Je voudrais faire un site constitué de :

1- un fond qui comprend une carte du monde : elle est visible partiellement, se déplace (interpolation classique) et est manipulable par l'internaute de manière à ce qu'il puisse se déplacer dedans (drag&drop).

2- sur cette carte se trouvent des vignettes cliquables qui donnent lieu à leur agrandissement (lien vers une autre image du scénario) - les vignettes doivent aussi suivre le mouvement de la carte...

Les premières étapes de ce scénario sont réussies, excepté le fait d'accrocher les vignettes à la carte : lorsque l'internaute 'drag&drop' la carte, il faudrait que les vignettes suivent le mouvement de la carte, de manière à ce qu'elles se trouvent toujours sur le même endroit de la carte...

voir en PJ:
- screen1 = vignettes bien placées sur la carte
- screen2 - vignettes mal placées après drag&drop sur la carte

Auriez-vous une idée ?

merci merci !!!!!

siu

[Romain D.]

Au drop, tu peux repositionner tes images en fonction des nouvelles coordonnées x et y de ta map.

Tu définis 2 variables tmpX et tmpY qui représente la position de ta carte avant le déplacement puis tu fais :

Code :

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

1
2
image.x = image.x + (carte.x - tmpX);
image.y = image.y + (carte.y - tmpY);

[siu.territories]

c'est très gentil mais je m'y connais très mal en code flash - j'avais repiqué un code juste pour faire le drag&drop sur la carte...
crois-tu pouvoir me donner un exemple de ce que ça donne en combinant avec le code appliqué aux vignettes ?
peut-être que le code ci-dessous n'est pas le plus adapté ?

mille mercis!

"map_mc" designe l'occurrence du symbole clip de la carte

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
stop()
 
map_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragArea);
map_mc.addEventListener(MouseEvent.MOUSE_UP, dropArea);
 
function dragArea(e:MouseEvent):void{
    var bounds:Rectangle = new Rectangle(
stage.stageWidth - map_mc.width,
stage.stageHeight - map_mc.height,
map_mc.width - stage.stageWidth,
map_mc.height - stage.stageHeight
);
    map_mc.startDrag(false, bounds);
}
 
function dropArea(e:MouseEvent):void{
    map_mc.stopDrag();
}

[siu.territories]

...
bon je repose la question différemment : comment définit-on le code d'une variable pour créer : "2 variables tmpX et tmpY" ?

merci de votre aide précieuse....
je rame...
...
...

[Romain D.]

déclaration de variables :

Code :

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

1
2
var tmpX:int;
var tmpY:int;

[siu.territories]

J'ai donc placé le code ci-dessous -
résultat :
- la vignette image (frida_mc) censée suivre le drag&drop de la carte se positionne à un autre endroit que celui que j'ai défini, coimme si le code lui avait indiqué d'autres coordonnées...
- la vignette-image ne suit pas le drag&drop de la carte (map_mc)... elle reste statique...

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
stop()
 
map_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragArea);
map_mc.addEventListener(MouseEvent.MOUSE_UP, dropArea);
 
function dragArea(e:MouseEvent):void{
    var bounds:Rectangle = new Rectangle(
                                stage.stageWidth - map_mc.width,
                                stage.stageHeight - map_mc.height,
                                map_mc.width - stage.stageWidth,
                                map_mc.height - stage.stageHeight
                           &nbsp:wink:;
    map_mc.startDrag(false, bounds);
}
 
function dropArea(e:MouseEvent):void{
    map_mc.stopDrag();
}
 
var tmpX:int;
var tmpY:int;
frida_mc.x = frida_mc.x + (map_mc.x - tmpX);
frida_mc.y = frida_mc.y + (map_mc.y - tmpY);

[siu.territories]

hello,

j'ai enfin trouvé un autre code, qui me permet de mieux gérer le drag&drop :

cartes et vignettes sont dans un même clip
le code est appliqué sur l'ensemble du clip
ce qui permet aux vignettes de suivre le drag&drop de la carte

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
map_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragStart);
map_mc.addEventListener(MouseEvent.MOUSE_UP, dragStop);
 
//// functions /////
function dragStart (evt:MouseEvent) {
    evt.currentTarget.startDrag();
}
function dragStop (evt:MouseEvent) {
    evt.currentTarget.stopDrag();
}

[siu.territories]

... mais

un nouveau pb : en cliquant sur une vignette située très à l'est de la carte, la nouvelle image est mal positionnée =
l'image de la carte reste à l'endroit où l'internaute s'est positionné sur la carte... et comme je ne peux pas anticiper les coordonnées exactes de l'endroit où l'utilisateur s'est en dernier lieu positionné, il est vain que je place la vignette agrandie sur ces supposées coordonnées...

bon je crains que ce ne soit pas claire, le mieux est de voir sur ce lien :
http://a.mydlarz.free.fr

par ailleurs, si quelqu'un a une idée pour que le drag&drop s'arrête quand les limites de la cartes sont atteintes, wellcome !!!!!!!!!!!!!!