Efecto lupa con zoom en ActionScript 3 View Comments
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 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í:
1 2 3 4 5 6 7 8 9 10 11 | 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í:
1 2 3 4 | 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:
Un lujo hermano salu2
seba.. si tengo alguna duda te pregunto…
muy buena tu pagina y los tuto… ya me vi casi todos…
saludos nos vemos en los raimonds
maxi..
HOLA ….
SOY NUEVO EN ESTO
TENGO 12 AÑOS
ME PARECE MUY COOL ESTO LA VERDD GRACIAS POR LA AYUDA
Hola, que buena web tienes he visto muchas con tutoriales pero esta es la mejo. gracias y espero sigas suviendo tutoriales como estos.
Ha¡ y de ActionScript 3 para principiantes
Gracias, muy bueno, este en especifico no esta muy explicado pero gracias por todos tus tutoriales que me han salvado la vida ya varias veces. Saludos des de Guatemala.