mapas de imagenes

Zoom de imagen en flash con mouse y easing

varias veces nos es necesario hacer zoom a ciertos clips o imagenes, util en varias opciones, tales como mapas, entornos que muestran opciones mas pequeñas conforme se van acercando a ella, etc. lo demas depende de tu imaginación,

bueno en este caso en especifico sera solo de acercamiento por medio del click del mouse a un lugar en espifico del clip

lo que necesitaremos sera el clip a manejar(dentro del cual podremos poner lo que queramos, imagenes, dibujos,etc)

asignarle un nombre de instancia (en este caso mapa)

y copiar este codigo en el primer frame de la pelicula principal

incremento = 2;
function zoom(x,y,ancho,alto, aceleracion) {
mapa.onEnterFrame = function() {
this._x += (x-this._x)/aceleracion;
this._y += (y-this._y)/aceleracion;
this._width += (ancho-this._width)/aceleracion;
this._height+= (alto-this._height)/aceleracion;
if (Math.abs(x-this._x)<0.5 && Math.abs(y-this._y)<0.5 && Math.abs(ancho-this._width)<0.5 && Math.abs(alto-this._height)<0.5) {
this._x = x;
this._y = y;
this._width = ancho;
this._height = alto;
delete this.onEnterFrame;
}
};
};
onMouseDown =function(){
if (mapa.hitTest(_xmouse,_ymouse)){
Alto = incremento*mapa._height;
Ancho = incremento*mapa._width;
x = _xmouse-((_xmouse-mapa._x) * incremento);
y= _ymouse-((_ymouse-mapa._y) * incremento);
zoom(x,y,Ancho,Alto,3);
}
};

y listo !! puede usarse , prueba solo dando click encima de el clip

ahora procedere a explicar el codigo

incremento es la variable que determina el tamaño dela cercamiento en este caso lo incrementa en un 200% puede ser modificable a entero antojo

despuesviene la funcion de zoom que es la encargada de posicionarlo y acercarlo con el efecto easing, esta funcion recibe, cinco parametros en el siguiente orden, columna, fila , ancho, largo,aceleracion

son los nuevos parametros que tendra el clip, estan bastantes claros el unico ,que necesita explicacion es el de aceleracion, el cual es la rapidez de asing de trnaicion entre las nuevas posiciones y tamaños del clip

entre mas pequeño mas rapido, entre mas grande el numero mas tardado, pero tambien mas fluido, en este caso recomiendo 3

this._x += (x-this._x)/aceleracion;
this._y += (y-this._y)/aceleracion;

this._width += (ancho-this._width)/aceleracion;
this._height+= (alto-this._height)/aceleracion;

lo que hace en la primera parte es determinar la columna actual, restarle la columna final, asi obteniendo al distancia aun por recorrer, y la divide entre aceleracion, para asi partirla y determinar la nuevaposicion x, es de aqui que entre mas grande el numero , mas partes resultantes, y por lo tanto mas lento pero mas fluido, y en la segunda hace lo mismo con columna, con ancho y con largo,

if (Math.abs(x-this._x)<0.5 && Math.abs(y-this._y)<0.5 && Math.abs(ancho-this._width)<0.5 && Math.abs(alto-this._height)<0.5) {
this._x = x;
this._y = y;
this._width = ancho;
this._height = alto;
delete this.onEnterFrame;
}

en esta parte comprueba que todas las opciones, tanto como columna,fila,ancho y largo, la diferencia entre la actual y la final, sea menor a un pixel, en cuyo caso de cumplirse las opciones , asigna los valores finales (por aquello de los decimales) y borra el enterframe , dando por terminado el trayecto

onMouseDown =function(){

esto determina que si se presiona el mouse se ejecute esta funcion

if (mapa.hitTest(_xmouse,_ymouse)){

con esta comprobacion determina que cuando se presiono el mouse, existia area de contacto entre el clip y el puntero del mouse

Alto = incremento*mapa._height;
Ancho = incremento*mapa._width;

determina los nuevos valores del clip multiplicando el incremento porel alto y el largo, guardandolo en las variables correspondiente

x = _xmouse-((_xmouse-mapa._x) * incremento);
y= _ymouse-((_ymouse-mapa._y) * incremento);

esta parte es la interesante,

primero obtenemos la posiion absoluta del puntero del mouse, donde damos click,

despues le restamos el resultado de restar la posicion del mapa de la posicion absoluta de el puntero del mouse y multiplicarla por el incremento, esto nos dara cuantos pixeles crecio de esa posicion a la orilla del clip, asi al restarlo nos dala nueva posicion correcta de el clip.
y solo nos quedara mandar los parametros a la funcion Zoom , que se encargara de aumentarla y moverla por medio de un efecto de asing y listo

espero les sea de ayuda, tiene muchisimo que modificar y modificar , pero por el momento esto es la base del concepto de zoom que yo manejo

*actualizacion de ultimo momento , para la funcion zoom aout solo se invierte multipliccion por division en cuatro puntos y es exactamente igual aqui esta donde se debe hacer las modificaciones

Alto = mapa._height/incremento;
Ancho = mapa._width/incremento;
x = _xmouse- ((_xmouse-mapa._x) / incremento);
y= _ymouse- ((_ymouse-mapa._y) / incremento);
zoom(x,y,Ancho,Alto,3);

y el zoom in esta modificado y mas optimizado

PD.- el posicionamiento de el clip, debe estar en la parte SUPERIOR IZQUIERDA cuando se declara como clip y listo