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 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;
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.
- 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.
- 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! ^^
Compártelo:
Visto 63.787 veces
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.
Muy bueno!
Siempre con excelentes trabajos Zguillez, felicidades y una vez más me sacas de un apuro… ^^
[…] 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. […]
No pones donde se debe colocar el código.
¿En cuál de todos los clips?
Saludos.
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 😉
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
[…] 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 […]
Hola, podrías activar el link para bajar el .fla de ejemplo? muchas gracias
No veo el link para obtener el .fla …
Alguien lo tiene y lo puede facilitar?
Gracias
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
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.
no veo el link donde esta el fla.
gracias por compartir tu trabajo
una consulta ¿como se hace para que la lupa cubra todo el alto y ancho de la pantalla?????
hice el mismo mapa pero la pantalla esta en otro tamaño.
gracias
Hola chicos/as. A lo largo de mi flash life he visto multitud de ejemplos de lupa. Ahora me pregunto. Existe una lupa real para flash?? es decir, no tener que hacerlo mediante 2 imágenes sinó que cargando una imagen grande se pueda crear una lupa para poder acercarse más sin perder calidad. Hay gente que tiene problemas de visión que lo agradecería si puede aumentar el tamaño de partes de una imagen mediante una lupa. Otra aplicación sería por ejemplo si los textos son de tamaño pequeño. Sería genial tener una opción que fuese: “utiliza la lupa si tienes problemas de visión). Sería genial!!
Bueno, aqui lo dejo a ver si lo hablamos.
Yo tampo encuentro el .fla para bajar
malisimo, no das el link del fla., no indicas todos los codigos donde se ponen. Esto no es un tutorial es solo para los que entienden