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 |
//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 |
//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 |
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 |
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