Home » AS3 »Efectos »Flash » Currently Reading:

Ejemplo de Zoom con lupa en Flash CS3

septiembre 25, 2007 AS3, Efectos, Flash 17 Comments
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.

img

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

  1. var porcentajeX:uint = 100 / (mapaBig.width / (mapaSmall.width - lupa.width / 2));
  2. var porcentajeY:uint = 100 / (mapaBig.height / (mapaSmall.height - lupa.height / 2));
  3. var distX:uint = 0;
  4. 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.

  1. this.addEventListener(MouseEvent.MOUSE_MOVE, lupaMouseMove);
  2. //-----------------------------------------------
  3. function lupaMouseMove(event:MouseEvent):void
  4. {
  5.       calculaDist();
  6.       mueveLupa();
  7.       //
  8.       lupa.x = mouseX - lupa.width / 2;
  9.       lupa.y = mouseY - lupa.height / 2;
  10.       //
  11.       if (lupa.x < mapaSmall.x) {
  12.          lupa.x = mapaSmall.x;
  13.       } else if (lupa.x > mapaSmall.x + mapaSmall.width - lupa.width) {
  14.          lupa.x = mapaSmall.x + mapaSmall.width - lupa.width;
  15.       }
  16.       if (lupa.y < mapaSmall.y) {
  17.          lupa.y = mapaSmall.y;
  18.       } else if (lupa.y > mapaSmall.y + mapaSmall.height - lupa.height) {
  19.          lupa.y = mapaSmall.y + mapaSmall.height - lupa.height;
  20.       }
  21.       //
  22.       mascara.x = lupa.x
  23.       mascara.y = lupa.y
  24. }

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.

  1. function calculaDist():void
  2. {
  3.    distX = (lupa.x - mapaSmall.x) / porcentajeX * 100;
  4.    distY = (lupa.y - mapaSmall.y) / porcentajeY * 100;
  5. }
  6. function mueveLupa():void
  7. {
  8.    mapaBig.x = mascara.x - distX;
  9.    mapaBig.y = mascara.y - distY;
  10. }

Y liso! ^^

Compártelo:

Ejemplo de Zoom con lupa en Flash CS3
Visto 55.747 veces

Currently there are "17 comments" on this Article:

  1. Hernan dice:

    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.

  2. blackdragon dice:

    Siempre con excelentes trabajos Zguillez, felicidades y una vez más me sacas de un apuro… ^^

  3. […] 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. […]

  4. gonato dice:

    No pones donde se debe colocar el código.
    ¿En cuál de todos los clips?
    Saludos.

  5. zguillez dice:

    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 😉

  6. 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

  7. […] 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 […]

  8. carlos dice:

    Hola, podrías activar el link para bajar el .fla de ejemplo? muchas gracias

  9. Dario dice:

    No veo el link para obtener el .fla …
    Alguien lo tiene y lo puede facilitar?

    Gracias

  10. cafu dice:

    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

  11. rodrigo dice:

    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.

  12. yessi dice:

    no veo el link donde esta el fla.

  13. yessi dice:

    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

  14. Alberto dice:

    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.

  15. dario dice:

    Yo tampo encuentro el .fla para bajar

  16. roberto dice:

    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

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com