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:

  1.  
  2. //Creo un pantallazo del clip, lo pongo con una escala == zoom
  3. var myBitmapData:BitmapData = new BitmapData(clip.width, clip.height);
  4. myBitmapData.draw(clip);
  5. var bmp:Bitmap = new Bitmap(myBitmapData);
  6. bmp.smoothing = true;
  7. contenedor.addChild(bmp);
  8. contenedor.scaleX = contenedor.scaleY = zoom;
  9. 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. //Le pongo una mascara del tamaño t al contenedor
  3. mascara.graphics.beginFill(0x000000, 1);
  4. mascara.graphics.drawCircle(0, 0, t);
  5. contenedor.mask = mascara;
  6. addChild(mascara);
  7.  

-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. addEventListener(Event.ENTER_FRAME,renderizar)
  3.  

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. private function renderizar(e:Event):void {
  3. //Calculo el porcentaje que tengo que mover el pantallazo
  4. var porcentajeX = clip.mouseX / clip.width;
  5. var porcentajeY = clip.mouseY / clip.height;
  6. //Recoloco el contenedor
  7. contenedor.x = -(contenedor.width - clip.width) * porcentajeX
  8. contenedor.y = -(contenedor.height - clip.height) * porcentajeY
  9. //Muevo la mascara
  10. mascara.x = escenario.mouseX;
  11. mascara.y = escenario.mouseY;
  12. }
  13.  

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

Comentarios:
El Pepe dijo:
Muy bueno che gracias.
Exequiel dijo:
Esta bueno al parecer, o voy a probar y te digo mas. Soy no vato en lo que es programacion de animaciones
javier dijo:
Excelente el efecto que se muestra , muy interesante , y muy bien..
thomas dijo:
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
esedeerre dijo:

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 dijo:
hola gracias por esto me sirvio mucho y quedo muy bueno
Sebastian dijo:
Si desearas guardar un screenshot de eso se podria? y dejar el efecto, osea guardando el bitmapdata. Saludos
esedeerre dijo:

@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 dijo:
Me super gusta, creo que està muy claro y muy bueno, felicidades.
Dejar un comentario:
Tu nombre (obligatorio):

E-mail (obligatorio, no se mostrará):

Web: