EFECTO DE LUPA CON FLASH

por jmx en Action Script, Tutoriales 4 de December de 2006 15:50 pm 20

Hola nuevamente con ustedes amigos y amigas. En esta ocasin tengo para ustedes un tutorial mas el cual consta de un sensacional Efecto De Lupa, el efecto es algo simple y sencillo de realizar ya que este solamente consta de dos Clips De Pelcula y en uno de los clips hacer una mascara, el cual servir como efecto de lupa. Tambin es necesario importar una Imagen a la biblioteca. Comenzamos?. Primero crear un documento de dimensiones que correspondan a la imagen a importar en esta ocasin el documento ser de 499*337 pxeles de ancho y alto respectivamente. El color de fondo no importa ya que la imagen cubriara todo el espacio del documento.

Insertar un smbolo (ctrl. + F8), llamarlo imagen-real y de comportamiento Clip de pelcula. Como ven estos dos pasos es de lo ms sencillo de realizar.

Una vez en el smbolo importar (ctrl. + R) una imagen al escenario, despus de esto colocar la imagen en coordenadas X = 0.0 y Y = 0.0.

En este paso crear un nuevo smbolo (ctrl. + F8) nombrarlo imagen-amplificada, y darle como comportamiento Clip de pelcula. Para que el trabajo salga de la mejor forma es necesario seguir al pie de la letra los siguientes pasos ya que las coordenadas como la amplificacin de la imagen estn fuertemente ligadas a la programacin action scrip.

En el smbolo imagen-amplificada es prcticamente en donde se desarrollara el total del efecto. Comenzar por nombrar lupa a la capa y despus disear la lupa que servir como pantalla para hacer el trabajo de aumentar la imagen. Lo importante de este efecto es el tamao del crculo, aqu se dibujo un crculo de tamao 45 * 45 pxeles, y el total de ancho y alto de la lupa es de 68.8 * 69.2 colocar el diseo en coordenadas X = -44.0 y Y = -20.0.

Insertar una capa por debajo de la primera y nombrarla mascara, en esta capa dibujar un circulo de45 * 45 pxeles, y colocarlo en coordenadas X = -20.0 y Y = -20.0. ya que este es el espacio que deja el diseo anterior.

Insertar una capa mas por debajo de las anteriores nombrarla imagen, y en ella arrastrar desde la biblioteca el smbolo imagen-real. Las coordenadas en las cuales quede la imagen no importan ya que en el siguiente paso se corregirn estas.

Aqu es necesario poner un nombre de instancia al Clip de pelcula, el cual va hacer zoom. Hacer visible el panel de Transformar (ctrl. + T) y aumentar a 200 % la imagen despus de lo anterior colocar la imagen en coordenadas X = 0.0 y Y = 0.0.

Seleccionar la imagen y abrir el panel de Acciones Clip de pelcula e insertar el siguiente cdigo. onClipEvent (enterFrame) { xmove = _root.cursor._x; ymove = _root.cursor._y; _x = (-3 xmove) * 2 _y = (-3 ymove) * 2 }

Por ultimo hacer clic en la capa mascara con ayuda del botn derecho del ratn, y luego seleccionar la opcin Mscara para transformar la capa en mscara valga la rebusnancia.

Para concluir el tutorial regresar a la escena para hacer unos cuantos ajustes. Primero cambiar el nombre a la capa por el de real, despus arrastrar desde la biblioteca el Clip de pelcula imagen-realcolocar el smbolo en coordenadas X = 0.0 y Y = 0.0.

Insertar un capa por encima (arriba), nombrarla lupa y en esta arrastrar desde la biblioteca el Clip de pelcula imagenamplificada, escribir como nombre de instancia cursor colocar el smbolo encoordenadas X = -44.0 y Y = -20.0.

Ahora seleccionar el fotograma de la capa lupa y abrir el panel de Acciones Fotograma y luego escribir el siguiente cdigo. Con esto se da por concluido el tutorial. _root.onLoad = function() {

cursor.startDrag(true); Mouse.hide(); };

Efecto de Lupa El archivo fla consta de una capa donde coloco la imagen de tamao 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 crculo y le quito el contorno, queda slo el relleno. Lo convierto a movieclip y le doy un nombre de instancia. Yo le puse casagrande_mc. 2. Edito el MC. El relleno est 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 tambin esta imagen en Mc y le doy un nombre de instancia. Yo le puse lacasota_mc. 3. En la lnea de tiempo cambio el orden de las capas, colocando la Capa 1 encima de la Capa2. Ahora puedes ver el relleno del crculo en la Capa 1. 4. La Capa 1 donde est el relleno, la convierto en Mscara. 5. Agrego una tercera capa encima de la mscara. La Capa 3 debe estar encima de las otras dos. Dibujo el aspecto que tendr la mira. En mi caso, solo dibuje dos lneas dentro del crculo que lo dividen en cuatro sectores y le hice unos lados redondeados. En esta capa (y si quieres en otras ms 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 cdigo en una capa del nivel principal y hacer referencia de puntos en vez de colocar simplemente _x y _y. Este cdigo podras escribirlo debajo y despus de la llave de cierre del cdigo del Punto 7. Quedara as: _root.onEnterFrame = function () { xmove = _root.casagrande_mc._x; ymove = _root.casagrande_mc._y; /*para indicarle a lacasota_mc que cambie su posicin X Y segn se mueva el ratn 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 tamao del grfico de tamao normal que utilices. Segn el dibujo que tengas, va a ser ms o menos la mitad del ancho de tu imagen. En mi ejemplo la casa de tamao 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 travs 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 cdigo _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 diseos donde necesites un efecto lupa, que segn tu conveniencia pueden ser ms sofisticados y llamativos que este simple ejemplito. Recalco que existen formas ms optimizadas y mejores de crear esto
Ejemplo de Zoom con lupa en Flash CS3

Posted by admin | as3,efectos,flash | Tuesday 25 September 2007 2:18 am

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 imgenes, una pequea y otra ms grande que ocultaremos dentro de una mscara. Esta mscara la moveremos para crear el efecto de lupa.

Desplaza el mouse sobre la imagen para mover la lupa Colocaremos la imagen pequea dentro de un MovieClip que se llame "mapaSmall" y la imagen grande dentro de otro que se llame "mapaBig". La mscara que ocultar el mapa grande ser otro MovieClip con el nombre "mascara", y la lupa la llamaremos "lupa" y ser un clip de igual tamao que el contorno de la mscara.

Una vez montados los clips empecemos con el cdigo: PLAIN TEXT Actionscript: 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 relacin a la pequea. Las variables distX/Y nos indican la distancia de correccin para que la zona de la imagen grande situada bajo el mouse coincida con la zona de la imagen pequea. Por defecto colocaremos estos valores a 0. Ahora crearemos una funcin que se ejecute cada vez que movamos el mouse. PLAIN TEXT Actionscript: 1. 2. 3. 4. 5. 6. 7. 8. 9. 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;

10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. }

// 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 funcin moveremos el MovieClip "lupa" en relacin a la posicin del mouse, controlaremos que el clip no salga de la pantalla, y haremos que la posicin de la mscara sea la misma que la lupa. En esta funcin tambin haremos una llamada a dos funciones. Una que actualizaran las variables distX/Y que variaran segn la posicin de la lupa y del porcentaje de ampliacin de las imgenes, y otra que har que la imagen grande se mueva segn estas variables. PLAIN TEXT Actionscript: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 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! ^^

Flash: Efecto lupa

Para poder realizar el efecto lupa se necesitar de la ayuda de ActionScript y el uso de mscaras. Lo primero que habr que hacer es crear tres capas en la lnea de tiempo principal:
y y y y

En la inferior de ellas debers incluir el cdigo ActionScript (aparece al final de la pgina). La del medio ser la que site el clip en el que va a actuar la lupa, a ste se le deber poner el nombre de masked_mc . En la capa superior ir el clip que har de mscara y habr que llamarlo lupa_mc . Todos los clips debern tener su origen en la esquina superior izquierda.

Mecanismo del efecto

y

Lo primero de todo habr que duplicar el clip masked_mc . Reescala la copia y llmala ampliado_mc , por el valor almacenado en la variable factor, que en el caso de que sea 2, equivaldr a 200% de zoom.

y y

Indica que ampliado_mc ser enmascarado por el clip de la segunda capa lupa_mc , as slo se ver a travs de la superficie de ste. Incluye en la pelcula el clip marco_mc , la parte visible de la lupa. Pero, para eso habr que tener el clip en la biblioteca con las opciones de vinculacin como Exportar para ActionScript , y Exportar en primer fotograma . En Identificador se deber escribir marco . Para incluir el movieclip habr que utilizar el attachMovie , y as quedar por encima del clip ampliado_mc , que se habr creado dinmicamente con anterioridad. Por ltimo, haz arrastrable el clip lupa_mc y haz que, segn se mueva, se ejecute la funcin generar_efecto_lupa() que recalcula la posicin del clip ampliado_mc para producir el efecto. Tambin har que el marco_mc siga el movimiento de lupa_mc .

Cdigo de la primera capa

// almacenamos en variables la posicin del clip // que va ser ampliado var x0:Number = masked_mc._x; var y0:Number = masked_mc._y; // valores que restringen el arrast de la lupa // tb se emplean para calcular el efecto dentro // de la funcin generar_efecto_lupa() var izda:Number = masked_mc._x-lupa_mc._width*0.5; var dcha:Number = izda+masked_mc._width; var arriba:Number = masked_mc._y-lupa_mc._height*0.5; var abajo:Number = arriba+masked_mc._height; // factor de ampliacin, 2 equivale al 200% var factor:Number = 2; // creamos el clip ampliado var ampliado_mc:MovieClip = masked_mc.duplicateMovieClip(ampliado, this.getNextHighestDepth()); // reescalamos segn factor ampliado_mc._width *= factor; ampliado_mc._height *= factor; // enmascaramos el clip ampliado ampliado_mc.setMask(lupa_mc); // adjuntamos el marco a la escena var marco_mc:MovieClip = this.attachMovie(marco, marco, this.getNextHighestDepth()); // recolocamos la lupa y el marco en su posicin inicial marco_mc._x = lupa_mc._x=x0; marco_mc._y = lupa_mc._y=y0; // funcin que genera el efecto function generar_efecto_lupa() { // se basa en el cambio de posicin // del clip lupa_mc cuando arrastramos marco_mc._y = lupa_mc._y; marco_mc._x = lupa_mc._x; ampliado_mc._x = ((lupa_mc._x-izda)*-masked_mc._width*(factor1)/masked_mc._width)+x0; ampliado_mc._y = ((lupa_mc._y-arriba)*-masked_mc._height*(factor1)/masked_mc._height)+y0; } // cuando detectamos movimiento de ratn creamos el efecto

lupa_mc.onMouseMove = function():Void { generar_efecto_lupa(); }; // arrastramos la lupa dentro del rea // definida previamente lupa_mc.onPress = function():Void { startDrag(lupa_mc, false, izda, arriba, dcha, abajo); }; lupa_mc.onRelease = function():Void { stopDrag(); }; lupa_mc.onReleaseOutside = lupa_mc.onRelease;