Efecto de Lupa Con Flash

5/12/2018 Efecto de Lupa Con Flash - slidepdf.com

http://slidepdf.com/reader/full/efecto-de-lupa-con-flash 1/13

EFECTO DE LUPA CON FLASHpor jmx en Action Script , Tutoriales 4 de December de 2006 15:50 pm

20 Hola nuevamente con ustedes amigos y amigas. En esta ocasióntengo para ustedes un tutorial mas el cual consta de unsensacional Efecto De Lupa, el efecto es algo simpley sencillo de realizar ya que este solamente consta de dos ClipsDe Película y en uno de los clips hacer una mascara, el cualservirá como efecto de lupa. También es necesario importaruna Imagen a la biblioteca. ¿Comenzamos?.

Primero crear un documento de dimensiones que correspondan ala imagen a importar en esta ocasión el documento seráde 499*337 píxeles de ancho y alto respectivamente. El colorde fondo no importa ya que la imagen cubriara todo el espaciodel documento.

Insertar un símbolo (ctrl. + F8), llamarlo imagen-real y decomportamiento Clip de película. Como ven estos dos pasos esde lo más sencillo de realizar.



Una vez en el símbolo importar (ctrl. + R) una imagen alescenario, después de esto colocar la imagen en coordenadas X= 0.0 y Y = 0.0.

En este paso crear un nuevo símbolo (ctrl. + F8)nombrarlo imagen-amplificada, y darle comocomportamiento Clip de película.Para que el trabajo salga de la mejor forma es necesario seguir alpie de la letra los siguientes pasos ya que las coordenadas comola amplificación de la imagen están fuertemente ligadas a laprogramación action scrip.



En el símbolo imagen-amplificada es prácticamente en dondese desarrollara el total del efecto. Comenzar por nombrar lupa ala capa y después diseñar la lupa que servirá como pantalla parahacer el trabajo de aumentar la imagen. Lo importante de esteefecto es el tamaño del círculo, aquí se dibujo un círculo detamaño 45 * 45 píxeles, y el total de ancho y alto de la lupa esde 68.8 * 69.2 colocar el diseño 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 píxeles, y colocarloen coordenadas X = -20.0 y Y = -20.0. ya que este es elespacio que deja el diseño anterior.



Insertar una capa mas por debajo de las anterioresnombrarla imagen, y en ella arrastrar desde la biblioteca elsímbolo imagen-real. Las coordenadas en las cuales quede laimagen no importan ya que en el siguiente paso se corregiránestas.

Aquí es necesario poner un nombre de instancia al Clip depelícula, el cual va hacer zoom. Hacer visible el panelde Transformar (ctrl. + T) y aumentar a 200 % la imagendespués 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 depelícula e insertar el siguiente código.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 botónderecho del ratón, y luego seleccionar la opción Máscara paratransformar la capa en máscara valga la rebusnancia.

Para concluir el tutorial regresar a la escena para hacer unos

cuantos ajustes. Primero cambiar el nombre a la capa por elde real, después arrastrar desde la biblioteca el Clip depelícula imagen-realcolocar el símbolo en coordenadas X =0.0 y Y = 0.0.



Insertar un capa por encima (arriba), nombrarla lupa y en estaarrastrar desde la biblioteca el Clip de película imagen-amplificada, escribir como nombre de instancia cursor colocarel símbolo encoordenadas X = -44.0 y Y = -20.0.

Ahora seleccionar el fotograma de la capa lupa y abrir el panelde Acciones Fotograma y luego escribir el siguiente código.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 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 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.

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

Recalco que existen formas más optimizadas y mejores de crear esto

Ejemplo de Zoom con lupa en Flash CS3

y 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 esteefecto es muy sencillo, únicamente hemos de tener dos imágenes, una pequeña y otra másgrande que ocultaremos dentro de una máscara. Esta máscara la moveremos para crear el efectode 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 imagengrande 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 lallamaremos "lupa" y será un clip de igual tamaño que el contorno de la máscara.

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

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 tantopor 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 grandesituada bajo el mouse coincida con la zona de la imagen pequeña. Por defecto colocaremos estosvalores a 0.

Ahora crearemos una función que se ejecute cada vez que movamos el mouse.

PLAIN TEXT

Actionscript:

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, controlaremosque el clip no salga de la pantalla, y haremos que la posición de la máscara sea la misma que lalupa.

En esta función también haremos una llamada a dos funciones. Una que actualizaran las variablesdistX/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.

PLAIN TEXT

Actionscript:

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! ^^

Flash: Efecto lupa Para poder realizar el efecto lupa se necesitará de la ayuda de ActionScript y el uso demáscaras.

Lo primero que habrá que hacer es crear tres capas en la línea de tiempo principal:

y En la inferior de ellas deberás incluir el código ActionScript (aparece al final de

la página).y La del medio será la que sitúe el clip en el que va a actuar la lupa, a éste se le

deberá poner el nombre de masked_mc.

y En la capa superior irá el clip que hará de máscara y habrá que llamarlo lupa_mc.

y Todos los clips deberán 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

llámalaampliado_mc, por el valor almacenado en la variable factor, que en el

caso de que sea 2, equivaldrá a 200% de zoom.



y Indica que ampliado_mc será enmascarado por el clip de la segunda

capa lupa_mc, así sólo se verá a través de la superficie de éste.

y Incluye en la película el clip marco_mc, la parte visible de la lupa. Pero, para esohabrá que tener el clip en la biblioteca con las opciones de vinculacióncomo Exportar para ActionScript, y Exportar en primer fotograma. En

Identificador se deberá escribir marco.

y

Para incluir el movieclip habrá que utilizar el attachMovie, y así quedará porencima del clipampliado_mc, que se habrá creado dinámicamente con

anterioridad.y Por último, haz arrastrable el clip lupa_mc y haz que, según se mueva, se ejecute

la funcióngenerar_efecto_lupa() que recalcula la posición del

clip ampliado_mc para producir el efecto. También hará que el marco_mc siga el

movimiento de lupa_mc.

Código de la primera capa

// almacenamos en variables la posición del clip// que va ser ampliadovar 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 función 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 ampliación, 2 equivale al 200%var factor:Number = 2;// creamos el clip ampliadovar ampliado_mc:MovieClip = masked_mc.duplicateMovieClip(´ampliadoµ,this.getNextHighestDepth());

// reescalamos según factorampliado_mc._width *= factor;ampliado_mc._height *= factor;// enmascaramos el clip ampliadoampliado_mc.setMask(lupa_mc);// adjuntamos el marco a la escenavar marco_mc:MovieClip = this.attachMovie(´marcoµ, ´marcoµ,this.getNextHighestDepth());// recolocamos la lupa y el marco en su posición inicialmarco_mc._x = lupa_mc._x=x0;marco_mc._y = lupa_mc._y=y0;// función que genera el efectofunction generar_efecto_lupa() {

// se basa en el cambio de posición// del clip lupa_mc cuando arrastramosmarco_mc._y = lupa_mc._y;marco_mc._x = lupa_mc._x;ampliado_mc._x = ((lupa_mc._x-izda)*-masked_mc._width*(factor-1)/masked_mc._width)+x0;ampliado_mc._y = ((lupa_mc._y-arriba)*-masked_mc._height*(factor-1)/masked_mc._height)+y0;}// cuando detectamos movimiento de ratón creamos el efecto



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

};lupa_mc.onRelease = function():Void {stopDrag();};lupa_mc.onReleaseOutside = lupa_mc.onRelease;

Documents

Efecto de Lupa Con Flash