Home » AS3 »Efectos »Flash » Currently Reading:

Panel de zoom de imágenes en ActionScript 3

octubre 3, 2007 AS3, Efectos, Flash 25 Comments
Panel de zoom de imágenes en ActionScript 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.

El ejemplo es el siguiente:

Arrastra la zona roja del panel para desplazar la imagen

Para realizar este ejemplo necesitaremos la imagen a dos tamaños, una grande que colocaremos dentro de una máscara, y otra pequeña que colocaremos dentro de un MovieClip que utilizaremos como visor.

img

La imagen grande la colocaremos dentro de un clip al que llamaremos “mapaBig“, y su mascara será otro clip al que llamaremos “mascara“.

En cuanto al clip de visor lo llamaremos “visor” y la imagen pequeña “mapaSmall“. Este clip contendrá tambien un botón que situaremos en la parte superior del panel que nos servirá para agarrar y mover el panel, este botón se llamará “botDrag“. Tambien tendremos otro movieclip llamado “zona” formado por un rectángulo de color rojo y un botón invisible con el nombre “botZona“.

Unas vez con la estructura de clips montada iremos a por el código. Todo este irá en el primer fotograma.

Empezaremos creandonos unas funciones para realizar el arrastre de la zona de zoom. Haremos que estas funciones nos sirvan tanto para el drag de la zona como para el drag del panel.

  1. var visor_fx:Boolean = false;
  2. //-----------------------------------------------
  3. visor.botDrag.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
  4. visor.botDrag.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
  5. visor.botDrag.addEventListener(MouseEvent.MOUSE_OUT, onStopDrag);
  6. visor.zona.botZona.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
  7. visor.zona.botZona.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
  8. visor.zona.botZona.addEventListener(MouseEvent.MOUSE_OUT, onStopDrag);
  9. //-----------------------------------------------
  10. function onStartDrag(e:Event):void
  11. {
  12.     var clip:MovieClip = e.target.parent;
  13.     clip.startDrag();
  14.     visor_fx = true;
  15. }
  16. function onStopDrag(e:Event):void
  17. {
  18.     e.target.parent.stopDrag();
  19.     visor_fx = false;
  20. }

Las funciones recuperan como parametro (target.parent) el clip que han de arrastrar dependiendo del clip que lanzó el evento.

También creamos una variable “visor_fx” que nos indica si estamos arrastrando algo en ese momento. Esto lo hacemos para posteriormente crear una función que se ejecute cada vez que movamos el mouse pero que solo ejecute las funciones internas en el caso de estar arrastrando el clip de “zona“.

  1. this.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
  2. //-----------------------------------------------
  3. function MouseMove(e:Event):void
  4. {
  5.     if (visor_fx == true) {
  6.         calculaDist();
  7.         mueveVisorZona();
  8.         controlaPosiciones();
  9.     }
  10. }

Aparte del arrastre haremos que al clicar sobre la imagen pequeña la zona se sitúe directamente en esa posición.

  1. visor.mapaSmall.addEventListener(MouseEvent.MOUSE_DOWN, onPosicionaZona);
  2. //-----------------------------------------------
  3. function onPosicionaZona(e:Event):void
  4. {
  5.     var clip:MovieClip = e.target.parent;
  6.     clip.zona.x = mouseX-clip.x- clip.zona.width/2
  7.     clip.zona.y = mouseY-clip.y- clip.zona.height/2
  8.     calculaDist();
  9.     mueveVisorZona();
  10.     controlaPosiciones();
  11. }

Ahora vamos con las funciones que realizaran el desplazamiento de la imagen grande en función de la posición del clip “zona” sobre la imagen pequeña. Empezaremos creando unas variables:

  1. var porcentajeX:Number = 100 / (mapaBig.width / visor.mapaSmall.width);
  2. var porcentajeY:Number = 100 / (mapaBig.height / visor.mapaSmall.height);
  3. visor.zona.width = mascara.width * porcentajeX / 100;
  4. visor.zona.height = mascara.height * porcentajeY / 100;
  5. var distX:Number = 0;
  6. var distY:Number = 0;

La variable porcentajeX/Y calcula el porcentaje de escalado entre las dos imágenes. Una vez sabemos este porcentaje escalamos el clip “zona” a la misma escala en relación a la imagen pequeña.

También creamos dos variables distX/Y que contendrán la distancia de corrección de la imagen grande en relación al visor, las dejaremos a 0 ya que haremos una función para calcular esa distancia.

function calculaDist():void
{
distX = (visor.zona.x – visor.mapaSmall.x) / porcentajeX * 100;
distY = (visor.zona.y – visor.mapaSmall.y) / porcentajeY * 100;

distX = (distX<0)?0:distX; distY = (distY<0)?0:distY; }[/as] En función de estos valores moveremos la imagen grande bajo la máscara. [as]function mueveVisorZona():void { mapaBig.x = mascara.x - distX; mapaBig.y = mascara.y - distY; }[/as] Solo queda crear una función que controle que al arrastrar no desplacemos el clip de zona fuera del visor, o el visor fuera de la película. [as]function controlaPosiciones():void { //visor if (visor.x<0) { visor.x=0; } else if (visor.x>stage.stageWidth-visor.width) {
visor.x=stage.stageWidth-visor.width;
}
if (visor.y<0) { visor.y=0; } else if (visor.y>stage.stageHeight-visor.height) {
visor.y=stage.stageHeight-visor.height;
}
//zona
if (visor.zona.xvisor.mapaSmall.x+visor.mapaSmall.width-visor.zona.width) {
visor.zona.x=visor.mapaSmall.x+visor.mapaSmall.width-visor.zona.width;
}
if (visor.zona.yvisor.mapaSmall.y+visor.mapaSmall.height-visor.zona.height) {
visor.zona.y=visor.mapaSmall.y+visor.mapaSmall.height-visor.zona.height;
}
//mapaBig
if (mapaBig.x>0) {
mapaBig.x=0;
} else if (mapaBig.x0) {
mapaBig.y=0;
} else if (mapaBig.yarchivo .fla

Compártelo:

Panel de zoom de imágenes en ActionScript 3
Visto 26.544 veces

Currently there are "25 comments" on this Article:

  1. Rafeo dice:

    Bastante bueno Zguillez. Sólo que el link de archivo.fla está roto.

  2. Bleend dice:

    Ammm… No le arreglaste el drag. :(

  3. zguillez dice:

    @Bleend: errr si claro el drag errr *zguillez trata de buscar una excusa coherente…

    Eso lo iba a postear cuando tuviese también arreglados un par de detalles más, como lo de la vuelta al panel con el mouse apretado y tal..

    PD: tambien le quiero meter un controlador de zoom con un slide 😉

  4. pedro dice:

    podrias poner este codigo…para flash8
    gracias
    pedro
    pdt.(o un archivo flash)para la version8

  5. zguillez dice:

    @Pedro: Este ejemplo lo escribí en Actionscript 3, para abrirlo en Flash 8 tendría que traducirlo todo a Actionscript 2… Te recomiendo actualizarte a Flash CS3, podrás trabajar en AS2 y AS3

  6. zguillez dice:

    Aquí tengo un ejemplo empezado en AS2, pero que le faltan algunos detalles
    http://www.cristalab.com/zguillez/flash/as2/lupa/

  7. Lince dice:

    Excelente! Solo una pregunta: ¿Porque el ejemplo no funciona si abres el swf generado a aprtir del fla usando el swf player? necesita estar en un servidor o dentro de flash (ctrl+f12) forzosamente para funcionar?
    Yo lo queria correr desde un cd..

  8. zguillez dice:

    @Lince: Debería funcionarte perfectamente. Asegúrate de que lo estas abriendo con el flash player 9.

  9. Lince dice:

    Si, ese era el problema…Lo estaba abriendo con el reproductor 8…Duuuh :P!

    Excelente trabajo nuevamente!

  10. Mario dice:

    Cuando terminas el ejemplo en AS2, pues estoy interezado en adaptarlo a mi sitio web que está todo hecho en Flash 8 y por ahora no puedo actualizarlo a CS3. En realida es urgente! Gracias.

  11. ThePhantomBRC dice:

    Guillermo, te pido si tubieras la amabilidad de orientarme con como convertir tu codigo AS3 a AS2, o almenos la parte que bloquea clip en la zona para que no se salga, muchas gracias

  12. Tenes como hacer exactamiente lo mismo ejemplo adaptado para lo flex 3?.

    Seria muy bueno y me ayudaria demasiado.

    Muchas Gracias

    Silva Developer
    silva.developer@gmail.com

  13. […] ejemplo es, igual que hice en el post anterior, un ejemplo que he adaptado a Flex desde un ejemplo que hice hace tiempo para Flash. Se trata de un panel donde se ve un zoom de una parte de una […]

  14. ramirus dice:

    Hola, excelente trabajo con el panel es justo el codigo que estaba buscando!! Solo una petición, en un post comentas que trabajabas en un controlador de zoom con un slide para añadirlo al panel, lo añadiste?
    Gracias!!

  15. Luis dice:

    Hola!

    Me agrada bastante esta solución hecha con AS3, pero no puedo descargar el archivo fla el link esta roto, ¿me puedes decir como lo puedo obtener por que me urge un poco para un proyecto escolar?

  16. ramirus dice:

    Hola Luis,

    En el link inferior encontrarás el mismo tutorial con el archivo .fla en correctas condiciones!

    http://www.cristalab.com/tips/panel-de-zoom-de-imagenes-en-actionscript-3-c46306l/

    Saludos

  17. Anibal dice:

    Por favor el mismo archivo en AS2, es que se dejo en su momento parece que lo han borrado. Te juro que lo necesito como agua de mayo,estoy haciendo un mapa que se abre pinchado en cada provincia, pero se ven muy pequeños los nombres y habia pensado en hacer una ventana como lo que esta en este tutorial, pero todo el archivo que tengo esta en AS2, y por culpa de mi ignorancia no tengo ni idea de como hacer varios botones en AS3, por favor lo necesito os juro que estoy desesperado, cualquier ayuda es bienvenida.

    Muchas gracias

  18. Anibal dice:

    Al final no he tenido mas remedio que aventurarme en el mundo del AS3, que por cierto poco tiene que ver con el AS2, o al menos he tenido que empezar por lo que creo que trae mas diferencias “los botones”. He conseguido hacer un par de botones que funcionen pero sigo con bastantes problemas,pero bueno poco a poco.
    Lo que te queria preguntar es porque si cojo este archivo que en la linea de tiempo principal no da ningun problema, porque al meterlo en un MC al pinchar se desplaza el visor, por lo demás va perfecto.
    Si me puedes ayudar te lo agradeceria.

    Saludos a todos

  19. Anibal dice:

    Pues nada yo os sigo contando mi aventura:

    Ya he conseguido que funcione, haciendo una llamada al swf desde la otra escena y asi no da problemas,pero queria hacerte otra pregunta aunque doy por hecho que no va a tener respuesta como las anteriores, pero por probar suerte:

    ¿ hay alguna manera de hacer que el visor empiece en el punto en el que yo quiera y no el la esquina superior izq ? es que yo al hacerlo he puesto un mapa real y justo en esta zona no hay nada.

    Muchas gracias y a ver si hay suerte con la respuesta.
    Un saludo

  20. admin dice:

    Hola Anibal.
    Perdona que no te haya respondido antes, pero ando muy liado estos días y no he ido revisando los comentarios en el blog.
    EL archivo .FLA en AS2 he de tenerlo por algún lado volveré a colgarlo y corregir el link en cuanto pueda.
    Aunque ya veo que te aventuraste con la versión en AS3, bien hecho.
    En cuanto a tu última pregunta, si que se puede hacer.
    El visor es un MovieClip, con lo que puedes acceder a sus propiedades X y Y en cualquier momento y darles valor (por ejemplo al iniciar la aplicación). No te debería dar ningún tipo de problema.

  21. Anibal dice:

    Antes de nada muchas gracias por tu respuesta,al final lo tengo hecho casi todo lo que queria ya que necesitaba hacer un par de cambios para adaptarlo a lo que me pedian.
    Respecto a la pregunta, para posicionar el visor en un punto es fácil, jajajaja si supieras lo que me ha costado, pero lo que no consigo es que el mapa(grande) empiece en el mismo punto en el que yo pongo el visor, el mapa empieza en la esquina superior izq como siempre y hasta que no empiezo a arrastar el visor no detecta donde esta; por lo que supongo que lo que hace que detecte es la funcion OnStartDrag, asi que habia pensado en hacer una funcion para que nada mas empezar ya detecte donde esta el visor, pero es ahi donde me he quedado (no soy capaz).He intentado llamar a las funciones desde el principio pero nada.
    Me esta costando la vida pero si es verdad que estoy aprendiendo a golpes,pero una ayudita siempre es bien recibida jeje
    Muchas gracias otra vez y perdona la parrafada.

  22. admin dice:

    @Anibal
    Lo que propones de la función que al ejecutar posicione el mapa en la posición correcta es justamente lo que tienes que hacer 😉
    No te debe de funcionar por que la ejecutas al iniciar la aplicación con lo que el mapa aun no está accesible. La tendrías que ejecutar en el Complete del Loader que estés utilizando.
    Suerte 😉

  23. victor dice:

    necesito ayuda urgente… estoy desarrollando un header en flash y tengo este codigo pero me salen unos horrores ayuda por favor urgente

    on (release)
    {
    function ()
    {
    \x03 = 2176 % 511 * true;
    return (eval(“\x03”));
    } // End of the function
    var \x01 = -86 + \x04\x05();
    while (\x01 = eval(“\x01”) – 14, eval(“\x01”) == 99)
    {
    \x01 = eval(“\x01”) + 127;
    break;
    } // end while
    if (eval(“\x01”) == 32)
    {
    \x01 = eval(“\x01”) + 67;
    if (false)
    {
    }
    else
    {
    \x01 = eval(“\x01”) + 127;
    } // end else if

    } // end if
    \x01 = eval(“\x01”) + 187;
    if (eval(“\x01”) == 666)
    {
    \x01 = eval(“\x01”) – 338;

    } // end if
    if (eval(“\x01”) == 234)
    {
    \x01 = eval(“\x01”) + 344;

    } // end if
    if (eval(“\x01”) == 226)
    {
    \x01 = eval(“\x01”) + 102;

    } // end if
    \x01 = eval(“\x01”) + 53;
    \x01 = eval(“\x01”) + 359;
    var \x0f = 1;
    \x01 = eval(“\x01”) – 506;
    if (eval(“\x01”) == 762)
    {
    \x01 = eval(“\x01”) + 208;

    } // end if
    if (eval(“\x01”) == 765)
    {
    \x01 = eval(“\x01″) – 3;
    if (!”\x0f”)
    {
    }
    else
    {
    \x01 = eval(“\x01”) + 208;
    } // end else if

    } // end if
    if (eval(“\x01”) == 970)
    {
    \x01 = eval(“\x01”) – 967;

    }
    else
    {
    if (eval(“\x01”) == 3)
    {
    \x01 = eval(“\x01”) – 3;

    } // end if

    } // end else if
    }
    on (rollOver)
    {
    if (_root.link != 1)
    {
    main_menu.item1.gotoAndPlay(“s1”);
    } // end if
    }
    on (releaseOutside, rollOut)
    {
    if (_root.link != 1)
    {
    main_menu.item1.gotoAndPlay(“s2”);
    } // end if
    }

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