CODIGO.actionscript » mascara http://www.codigoactionscript.org Blog de programación en ActionScript. Tips, tutoriales, ejemplos de Adobe Flash, Flex y AIR Fri, 30 Sep 2011 11:25:38 +0000 en hourly 1 http://wordpress.org/?v=3.3 Ejemplo de Zoom con lupa en Flex http://www.codigoactionscript.org/ejemplo-de-zoom-con-lupa-en-flex/ http://www.codigoactionscript.org/ejemplo-de-zoom-con-lupa-en-flex/#comments Sat, 11 Apr 2009 02:46:07 +0000 admin http://www.codigoactionscript.org/?p=379 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:

PLAIN TEXT Actionscript: <?xml version="1.0" [...] Related posts:
  1. Panel de zoom de imágenes en Flex
  2. Ejemplo de Zoom con lupa en Flash CS3
  3. Personalizar componentes de Flex con estilos programáticos
]]> 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:

PLAIN TEXT
Actionscript:
  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.         <![CDATA[
  9.             import LupaFx;
  10.             private var _lupa:LupaFx;
  11.             private function ini():void
  12.             {
  13.                 _lupa=new LupaFx(this, foto, lupa);
  14.             }
  15.         ]]>
  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:

PLAIN TEXT
Actionscript:
  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:

PLAIN TEXT
Actionscript:
  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. }

Related posts:

  1. Panel de zoom de imágenes en Flex
  2. Ejemplo de Zoom con lupa en Flash CS3
  3. Personalizar componentes de Flex con estilos programáticos

]]> http://www.codigoactionscript.org/ejemplo-de-zoom-con-lupa-en-flex/feed/ 4