CODIGO.actionscript » panel 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 Panel de zoom de imágenes en Flex http://www.codigoactionscript.org/panel-de-zoom-de-imagenes-en-flex/ http://www.codigoactionscript.org/panel-de-zoom-de-imagenes-en-flex/#comments Mon, 13 Apr 2009 21:04:16 +0000 admin http://www.codigoactionscript.org/?p=391 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:

PLAIN TEXT Actionscript: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 xmlns:ui="*"                 layout="absolute"                 creationComplete="ini()"             [...] Related posts:
  1. Ejemplo de Zoom con lupa en Flex
  2. Panel de zoom de imágenes en ActionScript 3
  3. Drag and Drop en AS3
]]> 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:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.                 xmlns:ui="*"
  4.                 layout="absolute"
  5.                 creationComplete="ini()"
  6.                 width="505"
  7.                 height="260">
  8.  
  9.     <mx:Script>
  10.         <![CDATA[
  11.             import ZoomFx;
  12.             private var _zoom:ZoomFx;
  13.  
  14.             private function ini():void
  15.             {
  16.                 _zoom=new ZoomFx(this, fotoZoom, panelZoom);
  17.             }
  18.         ]]>
  19.     </mx:Script>
  20.  
  21.     <mx:HBox horizontalCenter="0"
  22.              verticalCenter="0">
  23.         <ui:FotoZoom id="fotoZoom"/>
  24.         <ui:PanelZoom id="panelZoom"/>
  25.     </mx:HBox>
  26.  
  27. </mx:Application>

Este sería el componente que contiene la foto en grande:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
  3.            width="350"
  4.            height="250"
  5.            borderStyle="solid"
  6.            borderThickness="1"
  7.            borderColor="#000000"
  8.            horizontalScrollPolicy="off"
  9.            verticalScrollPolicy="off">
  10.     <mx:Image id="foto"
  11.               scaleContent="false">
  12.         <mx:source>img/Waterfall.jpg</mx:source>
  13.     </mx:Image>
  14.  
  15. </mx:Canvas>

Y este el componente que contiene el panel de preview:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
  3.            width="140"
  4.            height="100"
  5.            borderStyle="solid"
  6.            borderThickness="1"
  7.            borderColor="#000000"
  8.            horizontalScrollPolicy="off"
  9.            verticalScrollPolicy="off">
  10.     <mx:Image id="foto"
  11.               scaleContent="true"
  12.               width="140"
  13.               height="100"
  14.               horizontalCenter="0"
  15.               verticalCenter="0">
  16.         <mx:source>img/Waterfall.jpg</mx:source>
  17.     </mx:Image>
  18.     <mx:Canvas x="0"
  19.                y="0"
  20.                width="70"
  21.                height="50"
  22.                backgroundColor="#FF0000"
  23.                backgroundAlpha="0.5"
  24.                borderStyle="solid"
  25.                borderThickness="1"
  26.                borderColor="#FF0000"
  27.                id="zoomDrag">
  28.     </mx:Canvas>
  29. </mx:Canvas>

Solo quedaría la clase de que controla el efecto:

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.events.Event;
  4.     import flash.events.MouseEvent;
  5.  
  6.     import mx.containers.Canvas;
  7.     import mx.controls.Image;
  8.     import mx.controls.Alert;
  9.     import mx.core.UIComponent;
  10.  
  11.     public class ZoomFx
  12.     {
  13.         private var _stage:UIComponent;
  14.         private var _fotoZoom:UIComponent;
  15.         private var _panelZoom:UIComponent;
  16.         private var _distX:Number;
  17.         private var _distY:Number;
  18.         private var _porcentajeX:Number;
  19.         private var _porcentajeY:Number;
  20.  
  21.         //----------------------------------------------------
  22.         public function ZoomFx(stage:UIComponent, fotoZoom:UIComponent, panelZoom:UIComponent)
  23.         {
  24.             _stage=stage;
  25.             _fotoZoom=fotoZoom;
  26.             _panelZoom=panelZoom;
  27.  
  28.             iniZoomDrag();
  29.         }
  30.  
  31.         private function iniZoomDrag():void
  32.         {
  33.             var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
  34.             drag.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
  35.             drag.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
  36.             drag.addEventListener(MouseEvent.MOUSE_OUT, onStopDrag);
  37.         }
  38.  
  39.         private function onStartDrag(e:Event):void
  40.         {
  41.             var canvas:Canvas=e.target as Canvas;
  42.             canvas.startDrag();
  43.             _stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseDragMove);
  44.         }
  45.  
  46.         private function onStopDrag(e:Event):void
  47.         {
  48.             var canvas:Canvas=e.target as Canvas;
  49.             canvas.stopDrag();
  50.             _stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseDragMove);
  51.         }
  52.  
  53.         private function onMouseDragMove(e:Event):void
  54.         {
  55.             calculaDist();
  56.             mueveVisorZona();
  57.             controlaPosiciones();
  58.         }
  59.  
  60.         //-------------------------------------------------------------
  61.         private function calculaDist():void
  62.         {
  63.             var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
  64.             var foto:Image=_fotoZoom.getChildByName("foto") as Image;
  65.  
  66.             _porcentajeX=100 / (foto.width / _panelZoom.width);
  67.             _porcentajeY=100 / (foto.height / _panelZoom.height);
  68.  
  69.             drag.width=_fotoZoom.width * _porcentajeX / 100;
  70.             drag.height=_fotoZoom.height * _porcentajeY / 100;
  71.  
  72.             _distX=drag.x * 100 / _porcentajeX;
  73.             _distY=drag.y * 100 / _porcentajeY;
  74.  
  75.             _distX=(_distX <0) ? 0 : _distX;
  76.             _distY=(_distY <0) ? 0 : _distY;
  77.         }
  78.  
  79.         private function mueveVisorZona():void
  80.         {
  81.             var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
  82.             var foto:Image=_fotoZoom.getChildByName("foto") as Image;
  83.             foto.x=-_distX;
  84.             foto.y=-_distY;
  85.         }
  86.  
  87.         private function controlaPosiciones():void
  88.         {
  89.             var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
  90.             var foto:Image=_fotoZoom.getChildByName("foto") as Image;
  91.  
  92.             if (drag.x <0)
  93.             {
  94.                 drag.x=0;
  95.             }
  96.             else if (drag.x> _panelZoom.width - drag.width)
  97.             {
  98.                 drag.x=_panelZoom.width - drag.width;
  99.             }
  100.             if (drag.y <_panelZoom.y)
  101.             {
  102.                 drag.y=_panelZoom.y;
  103.             }
  104.             else if (drag.y> _panelZoom.y + _panelZoom.height - drag.height)
  105.             {
  106.                 drag.y=_panelZoom.y + _panelZoom.height - drag.height;
  107.             }
  108.  
  109.             if (foto.x> 0)
  110.             {
  111.                 foto.x=0;
  112.             }
  113.             else if (foto.x <_fotoZoom.width - foto.width)
  114.             {
  115.                 foto.x=_fotoZoom.width - foto.width;
  116.             }
  117.             if (foto.y> 0)
  118.             {
  119.                 foto.y=0;
  120.             }
  121.             else if (foto.y <_fotoZoom.height - foto.height)
  122.             {
  123.                 foto.y=_fotoZoom.height - foto.height;
  124.             }
  125.         }
  126.  
  127.     }
  128. }

Related posts:

  1. Ejemplo de Zoom con lupa en Flex
  2. Panel de zoom de imágenes en ActionScript 3
  3. Drag and Drop en AS3

]]> http://www.codigoactionscript.org/panel-de-zoom-de-imagenes-en-flex/feed/ 4