zooms multiples et progressifs + drag sur une image

Question

Bonjour tout le monde,

J'essaye de faire un zoom (et dézoom) progressif qui se fait tant qu'on appuie sur un bouton. Quand on relache le bouton, on a la possibilité de naviguer dans l'image puis de reprendre le zoom ou dézoom autant de fois qu'on le veut.
Chose importante (et qui me fait m'arracher les cheveux depuis quelques jours) : le zoom, quelle que soit la position de l'image, doit se faire depuis le centre de la scène.

Mon problème est le suivant : après avoir fait un drag sur l'image, quand on refait un zoom, il y a comme de petits décalages qui créent des sautes d'image.
Le problème pourrait peut-être venir du fait que à l'arrêt (décidé par l'utilisateur donc) du scale ou du drag, on n'a pas forcément des chiffres ronds pour les coordonnées.
J'ai essayé avec Math.ceil /Math.floor mais on a toujours des problemes d'arrondi d'un côté ou de l'autre... (sinon on déforme l'image et ça devient très vie n'importe quoi)
Je ne vois pas du tout quoi faire...

Si quelqu'un à une idée pour m'aider..?
ça serait formidable Javascript:Insert_Emoticon('/imgs2/smile.gif');
Et merci par avance!

Voici mon code :




_root.Conteneur.createEmptyMovieClip("cible", 7);

ml = new MovieClipLoader();

ml.onLoadInit = function() {
_root.Conteneur._width = _root.Conteneur.cible._width;
_root.Conteneur._height = _root.Conteneur.cible._height;

//initialisation de l'echelle de l'image importée à 80%
Conteneur._xscale = Conteneur._yscale=80;

//je place Conteneur au centre de la scène (qui fait 600*600px)
_root.Conteneur._x = (600-(_root.Conteneur._width))/2;
_root.Conteneur._y = (600-(_root.Conteneur._height))/2;

//attache les btn + et -
_root.attachMovie("BoutonPlus", "ZoomBTN", 3, {_x:200, _y:30});
_root.ZoomBTN._xscale = _root.ZoomBTN._yscale=50;
_root.attachMovie("btnMoins", "DezoomBTN", 4, {_x:250, _y:30});
_root.DezoomBTN._xscale = _root.DezoomBTN._yscale=50;

// La fonction qui agrandit Conteneur
function agrandissement() {
onEnterFrame = function () {

if (_root.Conteneur._xscale<100) {
_root.Conteneur._xscale = Conteneur._yscale += 1;
_root.Conteneur._x = (600-_root.Conteneur._width)/2;
_root.Conteneur._y = (600-_root.Conteneur._height)/2;
} else if (Conteneur._xscale>=100) {
delete onEnterFrame;
} 
_root.ZoomBTN.onReleaseOutside = function() {
delete onEnterFrame;

};
_root.ZoomBTN.onRelease = function() {
delete onEnterFrame;
};
};
}
//La fonction qui reduit Conteneur
function reduction() {
onEnterFrame = function () {
if (_root.Conteneur._xscale>20) {
_root.Conteneur._xscale = Conteneur._yscale -= 1;
_root.Conteneur._x = (600-_root.Conteneur._width)/2;
_root.Conteneur._y = (600-_root.Conteneur._height)/2;
} else if (Conteneur._xscale>=20) {
delete onEnterFrame;
} 
_root.DezoomBTN.onReleaseOutside = function() {
delete onEnterFrame;
};
_root.DezoomBTN.onRelease = function() {
delete onEnterFrame;
};
};
}
_root.ZoomBTN.onPress = function() {
agrandissement();
};
_root.DezoomBTN.onPress = function() {
reduction();
};


//Pour bouger Cible
Conteneur.cible.onPress = function() {
startDrag(this);
};
Conteneur.cible.onRelease = function() {
stopDrag();
};
};

//chargement de mon image dans Cible
ml.loadClip("image1.jpg", Conteneur.cible);

labobinette94 · Answer

Bonjour tout le monde, 

J'essaye de faire un zoom (et dézoom) progressif qui se fait tant qu'on appuie sur un bouton. 
Quand on relache le bouton, on a la possibilité de naviguer dans l'image puis de reprendre le zoom ou dézoom autant de fois qu'on le veut. 
Chose importante (et qui me fait m'arracher les cheveux depuis quelques jours) : le zoom, quelle que soit la position de l'image, doit se faire depuis le centre de la scène. 

Mon problème est le suivant : après avoir fait un drag sur l'image, quand on refait un zoom, il y a comme de petits décalages qui créent des sautes d'image. Le problème pourrait peut-être venir du fait que à l'arrêt (décidé par l'utilisateur donc) du scale ou du drag, on n'a pas forcément des chiffres ronds pour les coordonnées. 

J'ai essayé avec Math.ceil /Math.floor mais on a toujours des problemes d'arrondi d'un côté ou de l'autre... (sinon on déforme l'image et ça devient très vie n'importe quoi) Je ne vois pas du tout quoi faire... Si quelqu'un à une idée pour m'aider..? ça serait formidable

Voici mon code :

_root.Conteneur.createEmptyMovieClip("cible", 7);

ml = new MovieClipLoader();

ml.onLoadInit = function() {
_root.Conteneur._width = _root.Conteneur.cible._width;
_root.Conteneur._height = _root.Conteneur.cible._height;

//initialisation de l'echelle de l'image importée à 80%
Conteneur._xscale = Conteneur._yscale=80;

//je place Conteneur au centre de la scène (qui fait 600*600px)
_root.Conteneur._x = (600-(_root.Conteneur._width))/2;
_root.Conteneur._y = (600-(_root.Conteneur._height))/2;

//attache les btn + et -
_root.attachMovie("BoutonPlus", "ZoomBTN", 3, {_x:200, _y:30});
_root.ZoomBTN._xscale = _root.ZoomBTN._yscale=50;
_root.attachMovie("btnMoins", "DezoomBTN", 4, {_x:250, _y:30});
_root.DezoomBTN._xscale = _root.DezoomBTN._yscale=50;

// La fonction qui agrandit Conteneur
function agrandissement() {
onEnterFrame = function () {

if (_root.Conteneur._xscale<100) {
_root.Conteneur._xscale = Conteneur._yscale += 1;
_root.Conteneur._x = (600-_root.Conteneur._width)/2;
_root.Conteneur._y = (600-_root.Conteneur._height)/2;
} else if (Conteneur._xscale>=100) {
delete onEnterFrame;
} 
_root.ZoomBTN.onReleaseOutside = function() {
delete onEnterFrame;

};
_root.ZoomBTN.onRelease = function() {
delete onEnterFrame;
};
};
}
//La fonction qui reduit Conteneur
function reduction() {
onEnterFrame = function () {
if (_root.Conteneur._xscale>20) {
_root.Conteneur._xscale = Conteneur._yscale -= 1;
_root.Conteneur._x = (600-_root.Conteneur._width)/2;
_root.Conteneur._y = (600-_root.Conteneur._height)/2;
} else if (Conteneur._xscale>=20) {
delete onEnterFrame;
} 
_root.DezoomBTN.onReleaseOutside = function() {
delete onEnterFrame;
};
_root.DezoomBTN.onRelease = function() {
delete onEnterFrame;
};
};
}
_root.ZoomBTN.onPress = function() {
agrandissement();
};
_root.DezoomBTN.onPress = function() {
reduction();
};


//Pour bouger Cible
Conteneur.cible.onPress = function() {
startDrag(this);
};
Conteneur.cible.onRelease = function() {
stopDrag();
};
};

//chargement de mon image dans Cible
ml.loadClip("image1.jpg", Conteneur.cible);

Zooms multiples et progressifs + drag sur une image

1 réponse

Votre réponse

Discussions similaires