Efecto lupa en Actionscript 3.0
Etiquetas: BitmapData Bitmap smoothing mask drawCircle
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:
//Creo un pantallazo del clip, lo pongo con una escala == zoomvar 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:
//Le pongo una mascara del tamaño t al contenedormascara.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":
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:
private function renderizar(e:Event):void {
//Calculo el porcentaje que tengo que mover el pantallazovar porcentajeX = clip.mouseX / clip.width;
var porcentajeY = clip.mouseY / clip.height;
//Recoloco el contenedorcontenedor.x = -(contenedor.width - clip.width) * porcentajeX
contenedor.y = -(contenedor.height - clip.height) * porcentajeY
//Muevo la mascaramascara.x = escenario.mouseX;
mascara.y = escenario.mouseY;
}
Adjunto fuentes con todos los materiales, por si queda alguna duda.
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;
@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: