Gracias Gracias:  1
Resultados 1 al 1 de 1

Tema: Creacion de un efecto de lupa zoom en Flash

  1. #1
    Administrador y fundador. Avatar de 3dpoder
    Fecha de ingreso
    Apr 2002
    Mensajes
    15,460

    Flash Creación de un efecto de lupa (zoom) en Flash

    Creación de un efecto de lupa (zoom) en Flash



    Introducción

    Una petición muy común en los foros de Flash es el efecto de una lupa sobre una imagen, una forma vectorial o en general sobre cualquier objeto de Flash; este tutorial, aporte de nuestro amigo cusiri nos mostrara en sencillos pasos las técnicas para crear el solicitado efecto.

    El archivo fla consta de una capa donde coloco la imagen de tamaño normal, que es la que se ve en el escenario. El punto de registro lo he puesto en la esquina superior izquierda.
    Otra capa (encima) con un movie clip, creado de la siguiente manera.

    1. Creo un círculo y le quito el contorno, queda sólo el relleno. Lo convierto a movieclip y le doy un nombre de instancia. Yo le puse casagrande_mc.
    2. Edito el MC. El relleno esta en la capa 1. Agrego otra capa (Capa 2) y en ella coloco la misma imagen de la escena principal y le aumento su escala X y Y en 200%. Debe estar en el centro del MC. Convierto también esta imagen en Mc y le doy un nombre de instancia. Yo le puse lacasota_mc.
    3. En la línea de tiempo cambio el orden de las capas, colocando la Capa 1 encima de la Capa2. Ahora puedes ver el relleno del círculo en la Capa 1.
    4. La Capa 1 donde esta el relleno, la convierto en Máscara.
    5. Agrego una tercera capa encima de la máscara. La Capa 3 debe estar encima de las otras dos.
      Dibujo el aspecto que tendrá la mira. En mi caso, solo dibuje dos líneas dentro del círculo que lo dividen en cuatro sectores y le hice unos lados redondeados. En esta capa (y si quieres en otras más arriba) dibujas la forma que quieres para tu mira o lupa. Puedes hacer otro MC, etc.
    6. Ahora escribimos las acciones.

    Selecciona el MC que creaste en el punto 2 (lacasota_mc) y abre el panel de acciones, ahí escribes lo siguiente:




    onClipEvent (enterFrame) {
    /*casagrande_mc es el nombre de instancia del clip que creaste en el punto 1.*/
    xmove = _root.casagrande_mc._x;
    ymove = _root.casagrande_mc._y;
    _x = (250 - xmove) * 2;
    _y = (225 - ymove) * 2;
    }
    Otra forma es escribiendo el código en una capa del nivel principal y hacer referencia de puntos en vez de colocar simplemente _x y _y. Este código podrías escribirlo debajo y después de la llave de cierre del código del Punto 7.
    Quedaría así:

    _root.onEnterFrame = function () {
    xmove = _root.casagrande_mc._x;
    ymove = _root.casagrande_mc._y;
    /*para indicarle a lacasota_mc que cambie su
    posición X Y según se mueva el ratón en la escena
    principal */
    this.casagrande_mc.lacasota_mc._x = (250 - xmove) * 2;
    this.casagrande_mc.lacasota_mc._y = (225 - ymove) * 2;
    }
    El valor 250 y 225 depende del tamaño del gráfico de tamaño normal que utilices.
    Según el dibujo que tengas, va a ser más o menos la mitad del ancho de tu imagen. En mi ejemplo la casa
    de tamaño normal mide 499.9 (500) de ancho por 302.7 (300) de alto. Lo que hay que tomar en cuenta, es que que el valor, permita que la imagen grande a través de la lupa, se vea cerca de la imagen
    normal.
    Regresa a la escena principal (primer nivel)
    Si quieres agrega otra capa para escribir el siguiente código





    _root.onLoad = function () {
    casagrande_mc.startDrag(true);
    // repito que casagrande_mc es el MC creado en Punto 1
    Mouse.hide();
    }
    Eso es todo. Este es un efecto bastante sencillo pero te dará las pautas para crear diseños donde necesites un efecto lupa, que según tu conveniencia pueden ser más sofisticados y llamativos que este simple ejemplo.
    Recalco que existen formas más optimizadas y mejores de crear esto

    Adjunto esta el archivo con el fla de efecto lupa.
    Archivos adjuntados Archivos adjuntados
    Si vas a subir un trabajo al foro, hazlo adjuntando la imagen, archivo, vídeo o lo que sea, no publicando enlaces de otros sitios. http://www.foro3d.com/f45/forma-correcta-de-insertar-imagenes-y-archivos-en-nuestro-mensaje-98930.html

    |Agradecer cuando alguien te ayuda es de ser agradecido|

Temas similares

  1. XSI Efecto lupa
    Por anarkis en el foro Materiales y Texturizado
    Respuestas: 0
    Último mensaje: 17-02-2010, 10:59
  2. Flash como puedeo hacer el efecto de control de camara y zoom en flash
    Por goncen en el foro Peticiones y Búsquedas
    Respuestas: 0
    Último mensaje: 22-10-2009, 09:18
  3. Creacion del efecto de espejo magico
    Por 3dpoder en el foro Photoshop
    Respuestas: 0
    Último mensaje: 30-09-2008, 02:29
  4. zoom tridimensional en flash
    Por Sebator en el foro Diseño Gráfico y CAD
    Respuestas: 0
    Último mensaje: 22-05-2007, 21:54
  5. Efecto de vidrio de aumento o de lupa
    Por MAOB en el foro Materiales y Texturizado
    Respuestas: 2
    Último mensaje: 31-10-2006, 23:38

Actualmente estos son sus permisos de publicación en el foro.

  • -No puedes crear nuevos temas al no estar registrado o no haber iniciado sesión en el foro.
  • -No puedes responder temas al no estar registrado o no haber iniciado sesión en el foro.
  • -No puedes subir archivos adjuntos al no estar registrado o no haber iniciado sesión en el foro.
  • -No puedes editar tus mensajes al no estar registrado o no haber iniciado sesión en el foro.
  •