Efecto de zoom (acercamiento) a un objeto con Actionscript

Muchas veces nos es necesario hacer un efecto de zoom a ciertos clips o imágenes, por ejemplo cuando tenemos mapas, entornos que muestran opciones más pequeñas conforme se van acercando a ella, etc. Realizar este efecto es muy útil y ayuda a la usabilidad de nuestra aplicación.

En este caso en específico explicaré sólo el método de acercamiento por medio del click del mouse a un lugar en específico del clip.

Lo que necesitaremos será el clip a trabajar, dentro del cual podremos poner lo que queramos, imágenes, dibujos, etc. Luego le asignamos un nombre de instancia (en este caso mapa) y sólo resta copiar este código en el primer frame de la película principal.

Código :

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! Ya puede usarse, sólo prueba dando click encima del clip.

Ahora procederé a explicar el código.

Incremento es la variable que determina el tamaño del acercamiento, en este caso lo incrementa en un 200% puede ser modificable a nuestro antojo.

Esta porción de código es parte de este tip con la diferencia que incrementa dos variables más, ancho y alto, las cuales se encargarán de modificar el ancho y el alto del clip, haciendo la misma función que las variables de columna y fila y la misma comprobación, si se ha cumplido, para poder eliminar el enterframe.

Código :

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;

}

};

};

La siguiente parte es la importante, lo primero que hará será detectar si el mouse ha sido presionado.

Código :

onMouseDown =function(){

Esto hará la comprobación por medio de la cual verificará si las coordenadas del mouse en el momento que se presionó están sobre el clip, lo cual indicará que se ha echo click sobre él.

Código :

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

Después de eso se calculará el tamaño de la película con el zoom:

Código :

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

que es donde interviene la variable incremento, la cual, reitero, podremos manejar a nuestro antojo.

Luego haremos el cálculo de la nueva posición del clip, ya que si lo dejamos en esa posición, se nos moverá hacia la derecha y hacia abajo, lo cual nos desubica, para lo cual se emplea la siguiente ecuación:

Código :

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

Y por último le mandamos a la función los parámetros y ella se encargará del resto.

Código :

zoom(x,y,Ancho,Alto,3);

Nota: es importante que al crear el clip, el punto de registro sea a la izquierda arriba.

Espero les sirva.

 

Tweet