Home » AS3 »Básico »Flex » Currently Reading:

Ejemplo de Zoom con lupa en Flex

abril 10, 2009 AS3, Básico, Flex 5 Comments
Ejemplo de Zoom con lupa en Flex

Hace un tiempo escribí un ejemplo de zoom sobre una imagen con Flash. Justo ahora me acaban de preguntar como adaptar ese ejemplo a una aplicación Flex.

Adaptar ese ejemplo es fácil, ya que el código actionscript se puede reutilizar prácticamente igual. Lo único que hay que tener en cuenta es que no vamos a trabajar con un MovieClip con una máscara sino con componentes mxml de Flex.

Así es como quedará el ejemplo montado en Flex:


Desplaza el mouse sobre la imagen para mover la lupa

Esta seria nuestra aplicación Flex:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.                 layout="absolute"
  4.                 xmlns:ui="*"
  5.                 creationComplete="ini()">
  6.  
  7.     <mx:Script>
  8.         <!&#91;CDATA[
  9.             import LupaFx;
  10.             private var _lupa:LupaFx;
  11.             private function ini():void
  12.             {
  13.                 _lupa=new LupaFx(this, foto, lupa);
  14.             }
  15.         &#93;]>
  16.     </mx:Script>
  17.     <mx:Image  id="foto" scaleContent="true" horizontalCenter="0" verticalCenter="0" width="350" height="250">
  18.         <mx:source>img/Waterfall.jpg</mx:source>
  19.     </mx:Image>
  20.  
  21.     <ui:Lupa id="lupa"
  22.               x="0"
  23.               y="0"/>
  24.  
  25. </mx:Application>

El componente que utilizaremos como lupa:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
  3.            width="100" height="100" borderStyle="solid" borderThickness="4"
  4.            borderColor="#FF0000" horizontalScrollPolicy="off" verticalScrollPolicy="off">
  5.     <mx:Image id="foto" scaleContent="false" y="0" x="0">
  6.         <mx:source>img/Waterfall.jpg</mx:source>
  7.     </mx:Image>
  8.  
  9. </mx:Canvas>

Y la clase de actionscript que controlará el efecto:

  1. package
  2. {
  3.     import flash.events.MouseEvent;
  4.  
  5.     import mx.core.UIComponent;
  6.  
  7.     public class LupaFx
  8.     {
  9.         private var _stage:UIComponent;
  10.         private var _foto:UIComponent;
  11.         private var _lupa:UIComponent;
  12.         private var _distX:Number;
  13.         private var _distY:Number;
  14.         private var _porcentajeX:Number;
  15.         private var _porcentajeY:Number;
  16.         //----------------------------------------------------
  17.         public function LupaFx(stage:UIComponent, foto:UIComponent, lupa:UIComponent)
  18.         {
  19.             _stage=stage;
  20.             _foto=foto;
  21.             _lupa=lupa;
  22.             stage.addEventListener(MouseEvent.MOUSE_MOVE, lupaMouseMove);
  23.             lupaMouseMove();
  24.         }
  25.         //----------------------------------------------------
  26.         private function lupaMouseMove(event:MouseEvent=null):void
  27.         {
  28.             calculaDist();
  29.             mueveLupa();
  30.  
  31.             _lupa.x=_foto.mouseX + _foto.x - _lupa.width / 2;
  32.             _lupa.y=_foto.mouseY + _foto.y - _lupa.height / 2;
  33.  
  34.             if (_lupa.x < _foto.x)
  35.             {
  36.                 _lupa.x=_foto.x;
  37.             }
  38.             else if (_lupa.x > _foto.x + _foto.width - _lupa.width)
  39.             {
  40.                 _lupa.x=_foto.x + _foto.width - _lupa.width;
  41.             }
  42.             if (_lupa.y < _foto.y)
  43.             {
  44.                 _lupa.y=_foto.y;
  45.             }
  46.             else if (_lupa.y > _foto.y + _foto.height - _lupa.height)
  47.             {
  48.                 _lupa.y=_foto.y + _foto.height - _lupa.height;
  49.             }
  50.         }
  51.         //----------------------------------------------------
  52.         private function calculaDist():void
  53.         {
  54.             _porcentajeX=100 / (_lupa.getChildByName("foto").width / (_foto.width - _lupa.width / 2));
  55.             _porcentajeY=100 / (_lupa.getChildByName("foto").height / (_foto.height - _lupa.height / 2));
  56.  
  57.             _distX=(_lupa.x - _foto.x) / _porcentajeX * 100;
  58.             _distY=(_lupa.y - _foto.y) / _porcentajeY * 100;
  59.         }
  60.         //----------------------------------------------------
  61.         private function mueveLupa():void
  62.         {
  63.             _lupa.getChildByName("foto").x=-_distX;
  64.             _lupa.getChildByName("foto").y=-_distY;
  65.         }
  66.     }
  67. }

Compártelo:

Ejemplo de Zoom con lupa en Flex
Visto 8.576 veces

Currently there are "5 comments" on this Article:

  1. xklibur dice:

    C00l, te quedó muy bien Z ^^

  2. […] ejemplo es, igual que hice en el post anterior, un ejemplo que he adaptado a Flex desde un ejemplo que hice hace tiempo para Flash. Se trata de un […]

  3. gch dice:

    me podria suministrar el flash de lupa, esta buenisimo.

  4. ejopia dice:

    Hola

    He seguido al pie de la letra tu código pero no lo puedo ejecutar. me puedes ayudar??

    lo he probado con aplicació web y de escritorio

    komo se deben nombrar a los archivos??

  5. […] ejemplo es, igual que hice en el post anterior, un ejemplo que he adaptado a Flex desde un ejemplo que hice hace tiempo para Flash. Se trata de un […]

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email

Post destacado

Panel de zoom de imágenes en Flex

13 abr 2009

Este ejemplo es, igual que hice en el post anterior, un ejemplo que he adaptado a Flex desde un ejemplo que hice hace tiempo para Flash. Se trata de un panel donde se ve un zoom de una parte de una imagen. Este es el ejemplo montado en Flex: Y este es el código utilizado para la película principal: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 xmlns:ui="*"                 layout="absolute"                 creationComplete="ini()"                 width="505" …



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com