Actionscript3.0, Flash

abril 2009

Efecto lupa en Actionscript 3.0

En este ejemplo voy a tratar de explicar como se hace el «Efecto lupa» en Flash, con Actionscript 3.0.

Para simplificar voy a explicar la teoria basándome en una imagen que tengo en un MovieClip el escenario. Por supuesto esto se puede modificar para cargar imágenes externamente o como se necesite.

Los pasos que tenemos que seguir para crear el «efecto lupa» son estos:

-Crear una copia del MovieClip en BitmapData, y ponerla por encima a una escala mayor que el original:

-Poner a la copia una máscara circular, de manera que solo se vea el trozo de imágen tapado por la máscara:

-Añadimos un evento enterframe. Dentro de la función del evento vamos a mover la máscara siguiendo al ratón, y a recolocar la «copia grande»:

En la función del evento tenemos que mover la máscara para que siga al ratón, y recolocar la imagen grande para que el trozo que se vé sea el que corresponde a la imagen pequeña. La función es cuestión es esta:

Adjunto fuentes con todos los materiales, por si queda alguna duda.

Y los archivos fuente:

Descargar fuentes
Exequiel says:

Esta bueno al parecer, o voy a probar y te digo mas. Soy no vato en lo que es programacion de animaciones

javier says:

Excelente el efecto que se muestra , muy interesante , y muy bien..

esedeerre says:

Hola Thomas, lo mas sencillo que puedes hacer, es poner un clip con la lupa en el escenario, llamarlo Lupa_mc, y en la función renderizar hacer que siga al ratón como la máscara

Lupa_mc.x = escenario.mouseX;
Lupa_mc.y = escenario.mouseY;

Thomas says:

hola gracias por esto me sirvio mucho y quedo muy bueno

thomas says:

hola muy bueno pero tengo una duda si uno quiere hacer uan imagen de una lupa para que no salga solo esa bola trasnparente si no que sea una lupa dibujada y salga ahi como le hace uno donde la pone o que

El Pepe says:

Muy bueno che gracias.

Sebastian says:

Si desearas guardar un screenshot de eso se podria? y dejar el efecto, osea guardando el bitmapdata. Saludos

esedeerre says:

@Sebastian

Si se puede guardar. Si estás en FP10 puedes utilizar la función save() de FileReference, y si estás en FP9, utilizar alguna libreria de conversión y guardar la imagen en servidor

Puedes ver un ejemplo aqui:

http://www.esedeerre.com/ejemplo/6/63/guardar-imagenes-en-as3-con-pngencoder-y-base64

Alfredo says:

Me super gusta, creo que està muy claro y muy bueno, felicidades.

Juan says:

Hay alguna forma de llamar a diferentes imagenes y las cargara la pelicula flash?

El carroñas says:

shilo lo acabo de implementar en action script 2 y no me sirvio, gracias. probare con la 4

Antonio says:

me baje el archivo adjunto de fuente pero al momento de usarlo en lo q yo quiero tengo problemas, directament no logro q me funcione, supongo q mi problema es no saber bien q partes de la fuente cambiar, osea yo importo la imagen q me interesa, la convierto en simbolo y despues en q parte de la fuente tengo q usar el nombre de ese simbolo para q funcione???

Maikel Bernal says:

vamos a probar a ver que pasa