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.
Desplaza el mouse sobre la imagen para mover la 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:
var porcentajeY:uint = 100 / (mapaBig.height / (mapaSmall.height - lupa.height / 2));
var distX:uint = 0;
var distY:uint = 0;
Primero de todo crearemos una serie de variables. 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.
//-----------------------------------------------
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.
{
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! ^^
Post relacinonados:
November 30th, 1999 at 12:00 am
Hace tiempo habÃa intentado en AS2 hacer un efecto asÃ, calculando la imagen resultante pÃxel a pÃxel. Pero quedaba distorcionado (malas ecuaciones) y era lento (AS2).
DeberÃa intentar en AS3 a ver si logro que funcione.
Por cierto, el efecto no es perfecto. Tiene un pequeño corrimiento, pero es mÃnimo.
November 30th, 1999 at 12:00 am
Muy bueno!
November 30th, 1999 at 12:00 am
Siempre con excelentes trabajos Zguillez, felicidades y una vez más me sacas de un apuro... ^^
November 30th, 1999 at 12:00 am
[...] Este ejemplo es del estilo de "Zoom con lupa", aunque en esta ocasión es un zoom sobre una imagen con un panel de visualización al estilo de Photoshop. [...]
November 30th, 1999 at 12:00 am
No pones donde se debe colocar el código.
¿En cuál de todos los clips?
Saludos.
November 30th, 1999 at 12:00 am
El código está en el primer frame.
Si tienes alguna duda puedes bajarte el archivo .fla y verlo, el link está al final del post
April 10th, 2009 at 6:13 pm
Hola,
Ejemplo muy bueno.
Estoy haciendo uno proyecto que necesita y solo falta este recurso, exactamente igual.
Tenes como tu ayudarme en la adaptacion para adobe flex 3.
Muchas Gracias,
Silva Developer
silva.developer@gmail.com
April 10th, 2009 at 9:46 pm
[...] un tiempo escribí un ejemplo de zoom sobre una imagen con Flash. Justo ahora me acaban de preguntar como adaptar ese ejemplo a una aplicación [...]
June 8th, 2009 at 7:56 am
Hola, podrías activar el link para bajar el .fla de ejemplo? muchas gracias
June 15th, 2009 at 5:54 pm
No veo el link para obtener el .fla ...
Alguien lo tiene y lo puede facilitar?
Gracias
November 28th, 2009 at 4:14 pm
bueno el programa esta legal si pe
esta elegante
xvre kiero saver kien lo iso para ke me ayude en un proyecto aki le dejo mi msn escorpio_alberto12@hotmail.com
February 12th, 2010 at 11:43 am
hola oye estoy medio torpe todavia para estas cosas, me podrias mandar el archivo? Este ejemplo de zoom es el mejor que he visto en internet y la vdd me gustaria usarlo, te lo agradezco.