Drag & Drop perfectionné

Question

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...

Ci-dessous le code (qui ne fonctionne pas...)
où 
map_mc = nom de la carte
frida_mc = nom d ela vignette


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);



Auriez-vous une idée lumineuse ?

merci merci !!!!!

siu

BBFUNK01 · Answer

Hello,

et pourquoi tu n'insères pas tes clips vignettes dans le clip carte ? Comme ça au drag and drop de la carte tu n'auras pas de souci ; les clips vignettes suivront la carte... Après à toi de gérer l'agrandissement des vignettes au sein de cette "imbrication".

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

cs_siu · Answer

oui je crois que ça peut marcher ! j'ai fait un test - merci!!!!!
en fait je crois qu'il y a un autre problème : 

- ma scène est plus petite (1000px x 800 px) que mon image de carte (3000px x 2000px): c'est volontaire, je ne veux pas que tout soit visible d'un seul coup d'oeil, mais seulement une région de la carte, pour que, quand la carte se déplace (interpolation classique), l'internaute découvre au fur et à mesure les différentes régions du monde, sur lesquelles les vignettes sont posées.

- dans le .swf, le drag&drop fonctionne mal (?)
quand je clique sur la carte, l'image de la carte se repositionne sur d'autres coordonnées (en son centre je crois, ou sur le centre de la scène... ?). Je peux la déplacer vers droite, haut et bas, mais sur la gauche, ça bloque...

J'ai tenté plusieurs placements de l'image en frame 1'effet est toujours le même.

Si tu veux m'aider plus avant, puis-je t'envoyer le .swf par mail pour que tu te rendes compte ? Parce que je ne sais pas si je suis compréhensible et c'est un peu compliqué à expliquer...

10000 mercis pour tes lumières !
siu

BBFUNK01 · Answer

Hello,

je pense que je ne te serai malheureusement pas d'une grande aide en ce qui concerne l'analyse de ton code, car tu codes en as3 et moi je code en as2, donc ce sera peut-être encore plus délicat pour moi de déceler où ça coince.
Mais ce que tu peux faire c'est mettre la partie de ton code qui semble poser problème dans ton post, comme ça si quelqu'un passe par là et voit une anomalie dans le script il pourra t'orienter dans la correction.

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

cs_siu · Answer

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

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();
}

cs_siu · Answer

... 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 :
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 !!!!!!!!!!!!!!
Modifier/Supprimer le message

BBFUNK01 · Answer

Hello,

tout d'abord je tiens à te préciser que ton animation est horriblement longue à charger ! Pas loin d'une minute pour obtenir l'affichage chez moi, et j'ai pourtant le haut débit (imagine la durée de chargement chez ceux qui ont le bas débit !). Je pense entre autre que c'est dû au poids de tes images : à mon avis tu stockes toutes tes images haute définition dans ton swf, et ceci explique donc cela. A ta place voilà comment je procéderai :
- sur la carte je mettrai des miniatures plutôt que des images haute définition réduites (car elles ont beau être réduites, le poids lui ne l'est pas), des images 65x65 pixels pourraient faire l'affaire par exemple.
- il faudrait donc que tu stockes tes images haute définition en externe afin qu'au clic sur une miniature située sur la carte, cela charge l'image haute définition en rapport, donc -> gain de poids considérable du swf, et : possibilité de charger l'image haute définition où tu veux , pour ce tu peux par exemple créer un clip vide lors du clic sur la miniature et charger dans ce clip (positionné aux coordonnées désirées) l'image voulue. En as2 j'utilise MovieClipLoader(), à voir si en as3 c'est la meilleure solution, mais je crois que le LoadMovie() en as3 est beaucoup plus "complet" qu'en as2.
- Ensuite pour le drag il faut que tu joues sur les coordonnées, en gros rédiger un code conditionnel qui stoppe le drag sur un axe en fonction de la coordonnée maximale définie de ta carte en rapport avec cet axe.

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

cs_siu · Answer

Hello BBFUNK01 !

merci pour ces conseils détaillés 
pour répondre à chacun de ces points : 

- le vignettes sont en png pour cause de coins arrondis et donc une transparence sur les angles (sinon on verrait du blanc sur la carte). Chacune fait en moyenne entre 15 et 20 ko, 72 dpi, 80x80 px.

- pour les images hautes déf, je ne connaissais pas cette fonction... Je suis en AS3, j'ai en effet trouvé un tuto à ICI.
mais si je comprends bien le raisonnement, j'ai alors 2 questions : 

- comment fait-on un lien d'un bouton (vignettes images) placé dans un clip vers un autre clip ? (la vignette est dans un clip, et l'image HD dans un autre vide) - je sais faire un lien d'un bouton vers une autre image d'un même clip, mais pas cet autre type de lien...
- faut-il créer autant de clips vide qu'il y a d'images HD ? s'il n'y a qu'un clip vide, comment est fait le lien vers telle image HD ou telle autre ?


bon, c'est galère ce site 

merci réellement pour ta patience !

aerolyte · Answer

Bonsoir,

Ragarde dans la doc officiel, les propriété de la méthode stradrag();
Tu devrais trouver ce qui t'interresse

Drag & Drop perfectionné

8 réponses

Votre réponse

Discussions similaires