Efecto lupa en Actionscript 3.0

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.

Dibujar en un cristal con vaho en Actionscript 3.0

Dibujar en un cristal con vaho en Actionscript 3.0

Etiquetas: addEventListener MOUSE_MOVE drawCircle beginFill endFill

Dibujar en un cristal con vaho en Actionscript 3.0

Este ejemplo muestra como hacer el efecto de "pintar sobre el vaho" en un cristal. Esta es la manera más sencilla que en encontrado de hacerlo, desde el punto de vista de alguien con pocos conocimientos de programación. Para hacer este efecto necesitamos:

-Imagen del cristal con vaho:

Ventana con vaho

-Imagen de cristal sin vaho:

Imagen de cristal sin vaho

-Nociones de AS3 (Sobre todo de la API de dibujo)

Los pasos a seguir serían los siguientes:

-Importar las dos imágenes a Flash, y poner cada una en una capa (la imagen sin vaho por encima de la con vaho), en la posición (0,0)

-Crear un clip vacio y llamarlo "Mascara_mc". Ponerlo en (0,0)

-Hacer que "Mascara_mc" sea la mascara para la imagen sin vaho. Aquí tenemos un pequeño "problema", y es que al estar vacio, no nos va a aplicar bien la máscara. Por ello, antes de ponerlo como máscara, nos metemos dentro de "Mascara_mc" y dibujamos un pequeño cuadrado.

La linea de tiempo nos quedaría asi:

Linea de tiempo en Flash

-Por último, tenemos que programar la escena, para que cuando hagamos click, se dibuje dentro de "Mascara_mc" y se vaya destapando la imagen con vaho.

El código en Actionscript 3.0, y el resultado, son los siguientes: