Hacer scroll en una imagen con el mouse en Flash

En este tip mostraré un código para los que necesitan hacer el scroll de una imagen por medio del movimiento del mouse, esto es útil en el manejo de mapas, exploración de imágenes, y varias aplicaciones mas.

Primero pondremos este código en el primer frame de la película que sera para lograr el efecto de deslizamiento de la imagen explicado en este tip.

Código :

function mover(x,y, aceleracion) { 
_root.show.foto.onEnterFrame = function() { 
this._x += (x-this._x)/aceleracion; 
this._y += (y-this._y)/aceleracion; 
if (Math.abs(x-this._x)<0.5 && Math.abs(y-this._y)<0.5 ) { 
this._x = x; 
this._y = y; 
delete this.onEnterFrame; 
} 
}; 
}

Después crearemos un cuadrado con relleno normal, lo seleccionaremos y lo convertiremos en clip (F con el punto de registro en la parte superior izquierda (esto es muy importante en cada uno de los clips que crearemos, verificar que el punto de registro sea el que se indica para cada uno de ellos) al clip que acabamos de crear le daremos el nombre de instancia show (recordar el nombre de instancia de los clips para poder hacer referencia y no perdernos, por que sera un poquito confuso)

A este clip le asignamos estas acciones (que después explicare con detalle)

Código :

onClipEvent (mouseMove){
if (this.hitTest(_root._xmouse, _root._ymouse, true)){
_root.mover( -((foto._width-btn._width) /btn._width) * _xmouse,-((foto._height -btn._height) /btn._height) * _ymouse,7);
}
}

Seleccionamos el clip show y le damos doble clip, accederemos dentro de este y encontraremos el cuadrado, lo seleccionamos y lo convertimos en clip de nuevo, si de nuevo, es para generar otro clip dentro del clip show que es el que hará el efecto.

Después de haberlo convertido en clip le asignaremos el nombre de instancia btn, posterior a esto, generaremos otras dos capas en la parte de abajo.

Después en la segunda capa copiamos el keyframe de la primera y lo pegamos y en la tercera importamos una imagen a la cual convertimos en clip también (f y le asignamos el nombre de instancia foto, quedando en este orden:

1. Capa, el cuadrado convertido en clip
   
2. Capa la copia del keyframe del cuadrado, con lo cual tendremos dos cuadrados
   
3. La imagen importada convertida en clip

A el clip ftoo lo seleccionamos y le asignamos en acciones (f9) este código

Código :

onClipEvent (load){
this._x=-(this._width/2)+(_parent.btn._width/2);
this._y=-(this._height/2)+(_parent.btn._height/2);
}

Que hará que la imagen se centre de inicio. Después de esto seleccionamos la segunda capa y damos click derecho, seleccionando la opción mascara del menú.

Seleccionamos el clip de la primera capa y le damos efecto de alpha 0 para que sea transparente.

Vamos a la película principal y listo, debe quedar algo como esto:



Ahora la parte de explicación. El código que hace las maravillas, y lo demás es solo adorno, es este:

Código :

onClipEvent (mouseMove){
[code]if (this.hitTest(_root._xmouse, _root._ymouse, true)){[/code]
_root.mover( -((foto._width-btn._width) /btn._width) * _xmouse,-((foto._height -btn._height) /btn._height) * _ymouse,7);
}
}

Al detectar que se mueve el mouse onClipEvent (mouseMove) hace una detección si el puntero del mouse hace contacto con este clip if (this.hitTest(_root._xmouse, _root._ymouse, true)){ hace el cálculo de esta manera a grandes rasgos, una regla de tres, si el cuadro pequeño se mueve 1 el grande se moverá 2 dependiendo del tamaño de la imagen, por eso se hace una equivalencia, y cabe notar que se le resta el ancho del cuadrado para que no salga del área total, y siempre se mantenga una proporción dentro de lo visible, esto se puede hacer inmediato sin llamar a la función, solo que con la función el efecto de easing lo hace mucho mas atractivo

Cualquier error que se me haya pasado por favor comentarlo aquí para hacer la corrección.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.