Ejemplo de Zoom con lupa en Flash CS3

Este es un ejemplo de lupa sobre un mapa realizado en Flash CS3 y actionscript 3. Hacer este efecto es muy sencillo, únicamente hemos de tener dos imágenes, una pequeña y otra más grande que ocultaremos dentro de una máscara. Esta máscara la moveremos para crear el efecto de lupa.

Colocaremos la imagen pequeña dentro de un MovieClip que se llame "mapaSmall" y la imagen grande dentro de otro que se llame "mapaBig".

La máscara que ocultará el mapa grande será otro MovieClip con el nombre "mascara", y la lupa la llamaremos "lupa" y será un clip de igual tamaño que el contorno de la máscara.



Una vez montados los clips empecemos con el código:

Primero de todo crearemos una serie de variables

Código :

var porcentajeX:uint = 100 / (mapaBig.width / (mapaSmall.width - lupa.width / 2));
var porcentajeY:uint = 100 / (mapaBig.height / (mapaSmall.height - lupa.height / 2));
var distX:uint = 0;
var distY:uint = 0;

Las variables porcentajeX/Y definen que tanto por ciento está ampliada la imagen grande en relación a la pequeña.

Las variables distX/Y nos indican la distancia de corrección para que la zona de la imagen grande situada bajo el mouse coincida con la zona de la imagen pequeña. Por defecto colocaremos estos valores a 0.

Ahora crearemos una función que se ejecute cada vez que movamos el mouse.

Código :

this.addEventListener(MouseEvent.MOUSE_MOVE, lupaMouseMove);
//-----------------------------------------------
function lupaMouseMove(event:MouseEvent):void
{
      calculaDist();
      mueveLupa();
      //
      lupa.x = mouseX - lupa.width / 2;
      lupa.y = mouseY - lupa.height / 2;
      //
      if (lupa.x < mapaSmall.x) {
         lupa.x = mapaSmall.x;
      } else if (lupa.x > mapaSmall.x + mapaSmall.width - lupa.width) {
         lupa.x = mapaSmall.x + mapaSmall.width - lupa.width;
      }
      if (lupa.y < mapaSmall.y) {
         lupa.y = mapaSmall.y;
      } else if (lupa.y > mapaSmall.y + mapaSmall.height - lupa.height) {
         lupa.y = mapaSmall.y + mapaSmall.height - lupa.height;
      }
      //
      mascara.x = lupa.x
      mascara.y = lupa.y
}

En esta función moveremos el MovieClip "lupa" en relación a la posición del mouse, controlaremos que el clip no salga de la pantalla, y haremos que la posición de la máscara sea la misma que la lupa.

En esta función también haremos una llamada a dos funciones. Una que actualizaran las variables distX/Y que variaran según la posición de la lupa y del porcentaje de ampliación de las imágenes, y otra que hará que la imagen grande se mueva según estas variables.

Código :

function calculaDist():void
{
   distX = (lupa.x - mapaSmall.x) / porcentajeX * 100;
   distY = (lupa.y - mapaSmall.y) / porcentajeY * 100;
}
function mueveLupa():void
{
   mapaBig.x = mascara.x - distX;
   mapaBig.y = mascara.y - distY;
}

Y liso!

Descargar el archivo .fla

 

Tweet