Efecto lupa en Actionscript 3.0

Etiquetas: BitmapData Bitmap smoothing mask drawCircle

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