Efecto lupa con zoom en ActionScript 3
Escrito por: WeeDo en Este es un efecto muy utilizado en varios tipos de desarrollo. Como puede ser en un catálogo de productos, ejemplo clásico si los hay.
Se me ocurrió armar una clase en AS3 para esta utilidad, a modo de simplificar el trabajo.
De paso les dejo una hermosa imagen del calendario Maya. Gran civilización si las hubo!
Mové el mouse sobre la imagen para ver el efecto.
A continuación les dejo la clase completa. Vale destacar los cuatro métodos con namespace en "protected".
Estos métodos pueden ser reescritos si la clase es extendida... De manera tal que se puedan manejar los eventos de progreso de carga, y de la carga completa. Para poder sumarle un preloader tanto a la imagen chica, como a la grande por ejemplo.
-
package weedo.fx {
-
-
import flash.display.DisplayObject;
-
import flash.display.Sprite;
-
import flash.display.Loader;
-
import flash.events.*;
-
import flash.net.URLRequest;
-
import flash.ui.Mouse;
-
-
public class Lupa extends Sprite
-
{
-
private var imgURL:String;
-
private var imgBigURL:String;
-
private var mascara:DisplayObject;
-
private var small:Sprite;
-
private var big:Sprite;
-
private var cargaCompleta:Boolean;
-
-
public function Lupa(_imgURL:String, _imgBigURL:String, _mask:DisplayObject):void
-
{
-
imgURL = _imgURL;
-
imgBigURL = _imgBigURL;
-
mascara = _mask;
-
-
this.mouseChildren = false;
-
this.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
-
this.addEventListener(MouseEvent.ROLL_OUT, onOut);
-
this.addEventListener(MouseEvent.ROLL_OVER, onOver);
-
-
cargarImg();
-
}
-
-
private function cargarImg():void
-
{
-
var loaderImg:Loader = new Loader();
-
loaderImg.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteImg);
-
loaderImg.contentLoaderInfo.addEventListener(Event.INIT, onInitImg);
-
loaderImg.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressImg);
-
loaderImg.load(new URLRequest(imgURL));
-
}
-
private function cargarImgBig():void
-
{
-
var loaderImgBig:Loader = new Loader();
-
loaderImgBig.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteImgBig);
-
loaderImgBig.contentLoaderInfo.addEventListener(Event.INIT, onInitImgBig);
-
loaderImgBig.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressImgBig);
-
loaderImgBig.load(new URLRequest(imgBigURL));
-
}
-
-
protected function onProgressImg(e:ProgressEvent):void
-
{
-
trace("img: "+Math.round((e.bytesLoaded*100)/e.bytesTotal));
-
}
-
protected function onProgressImgBig(e:ProgressEvent):void
-
{
-
trace("imgBig: "+Math.round((e.bytesLoaded*100)/e.bytesTotal));
-
}
-
protected function onInitImg(e:Event):void
-
{
-
trace("termino img");
-
}
-
protected function onInitImgBig(e:Event):void
-
{
-
trace("termino imgBig");
-
}
-
-
private function onCompleteImg(e:Event):void
-
{
-
small = new Sprite();
-
e.target.content.x = -(e.target.content.width*.5);
-
e.target.content.y = -(e.target.content.height*.5);
-
small.addChild(e.target.content);
-
-
addChild(small);
-
cargarImgBig();
-
}
-
private function onCompleteImgBig(e:Event):void
-
{
-
big = new Sprite();
-
e.target.content.x = -(e.target.content.width*.5);
-
e.target.content.y = -(e.target.content.height*.5);
-
big.addChild(e.target.content);
-
big.mask = mascara;
-
big.visible = false;
-
-
addChild(big);
-
addChild(mascara);
-
cargaCompleta = true;
-
}
-
private function onMove(e:MouseEvent):void
-
{
-
if(cargaCompleta){
-
mascara.x = mouseX;
-
mascara.y = mouseY;
-
-
big.x = -((big.width * small.mouseX)/small.width) + small.mouseX;
-
big.y = -((big.height * small.mouseY)/small.height) + small.mouseY;
-
}
-
}
-
private function onOut(e:MouseEvent):void
-
{
-
if(cargaCompleta){
-
big.visible = false;
-
Mouse.show();
-
}
-
}
-
private function onOver(e:MouseEvent):void
-
{
-
if(cargaCompleta){
-
big.visible = true;
-
Mouse.hide();
-
}
-
}
-
-
public function cambiarMascara(_tg:DisplayObject):void
-
{
-
if(cargaCompleta){
-
mascara = _tg;
-
big.mask = mascara;
-
}
-
}
-
-
}
-
}
Para implementar la clase en el IDE de Flash deberían escribir algo así:
-
import weedo.fx.Lupa;
-
-
var sh:Shape = new Shape();
-
sh.graphics.beginFill(0x000000,1);
-
sh.graphics.drawCircle(0, 0, 50);
-
sh.graphics.endFill();
-
-
var lp:Lupa = new Lupa("small.jpg", "big.jpg", sh);
-
lp.x = stage.stageWidth * .5;
-
lp.y = stage.stageHeight * .5;
-
addChild(lp);
En este ejemplo importamos la clase en la primer linea. Luego creamos un Shape circular y por último creamos nuestra lupa con sus 3 parametros.
Primero la imagen pequeña, luego la grande y por último la máscara que usaremos como lupa.
En este caso la máscara es un Shape circular. También podría ser un rectangulo y hasta un movieclip con la forma que querramos.
Ojo que el punto de registro siempre tiene que estar en el medio de nuestra máscara.
Por ejemplo si queremos usar un rectangulo, el código debería ser así:
-
var sh:Shape = new Shape();
-
sh.graphics.beginFill(0x000000,1);
-
sh.graphics.drawRect(-25, -25, 50, 50);
-
sh.graphics.endFill();
Fijense como uso el "-25" para correr el punto de registro.
Bueno espero les sirva, acá les dejo también los archivos del ejemplo:
tincc dijo: