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:
|
1 2 3 4 5 6 7 8 9 10 |
//Creo un pantallazo del clip, lo pongo con una escala == zoom var myBitmapData:BitmapData = new BitmapData(clip.width, clip.height); myBitmapData.draw(clip); var bmp:Bitmap = new Bitmap(myBitmapData); bmp.smoothing = true; contenedor.addChild(bmp); contenedor.scaleX = contenedor.scaleY = zoom; addChild(contenedor); |
-Poner a la copia una máscara circular, de manera que solo se vea el trozo de imágen tapado por la máscara:
|
1 2 3 4 5 6 7 |
//Le pongo una mascara del tamaño t al contenedor mascara.graphics.beginFill(0x000000, 1); mascara.graphics.drawCircle(0, 0, t); contenedor.mask = mascara; addChild(mascara); |
-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»:
|
1 2 3 |
addEventListener(Event.ENTER_FRAME,renderizar) |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
private function renderizar(e:Event):void { //Calculo el porcentaje que tengo que mover el pantallazo var porcentajeX = clip.mouseX / clip.width; var porcentajeY = clip.mouseY / clip.height; //Recoloco el contenedor contenedor.x = -(contenedor.width - clip.width) * porcentajeX contenedor.y = -(contenedor.height - clip.height) * porcentajeY //Muevo la mascara mascara.x = escenario.mouseX; mascara.y = escenario.mouseY; } |
Adjunto fuentes con todos los materiales, por si queda alguna duda.
Y los archivos fuente:
Descargar fuentes
COMENTARIOS
Esta bueno al parecer, o voy a probar y te digo mas. Soy no vato en lo que es programacion de animaciones
Excelente el efecto que se muestra , muy interesante , y muy bien..
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;
hola gracias por esto me sirvio mucho y quedo muy bueno
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
Muy bueno che gracias.
Si desearas guardar un screenshot de eso se podria? y dejar el efecto, osea guardando el bitmapdata. Saludos
@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:
Me super gusta, creo que està muy claro y muy bueno, felicidades.
Hay alguna forma de llamar a diferentes imagenes y las cargara la pelicula flash?
shilo lo acabo de implementar en action script 2 y no me sirvio, gracias. probare con la 4
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???
vamos a probar a ver que pasa
DEJA TU COMENTARIO