Comunidad de diseño web y desarrollo en internet online

Ejemplo sencillo de efecto lupa

Citar            
MensajeEscrito el 30 Abr 2004 04:29 am
Hola amigos, aquí les dejo un ejemplo sencillo de cómo hacer un efecto de lupa o mira

telescópica de rifle o microscopio o...



El archivo fla consta de una capa donde coloco la imagen de tamaño normal, que es la que se vé 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 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 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 está 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.



7.- Regresa a la escena principal (primer nivel)

Si quieres agrega otra capa para escirbir 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 ejemplito.

Recalco que existen formas más optimizadas y mejores de crear esto, pero como soy un principiante,

por el momento, es lo que he podido hacer.



aquí está el zip con el fla





[url]http://www.geocities.com/cusiri/lupa.zip[/url]

(Si no te funciona directo, tendrás que copiar el vínculo y pegarlo en la ventana del browser. Todavía no recibo

respuesta de iespana)

Por cusiri

341 de clabLevel

2 tutoriales

Genero:Masculino  



Ultima edición por cusiri el 01 May 2004 03:22 am, editado 1 vez

Trinidad - Beni - Bolivia

unknown
Citar            
MensajeEscrito el 30 Abr 2004 05:39 am
Oye cusiri



¿Quieres que lo ponga en la sección de tutoriales de Cristalab?

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

unknown
Citar            
MensajeEscrito el 30 Abr 2004 01:34 pm
sería un honor. por supuesto que sí.

Por cusiri

341 de clabLevel

2 tutoriales

Genero:Masculino  

Trinidad - Beni - Bolivia

unknown
Citar            
MensajeEscrito el 02 May 2004 04:48 pm
Tutorial montado :D

http://www.cristalab.com/vertutorial.php?id=16

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

unknown

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.