CODIGO.actionscript » mxml 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 Asignar una clase ActionScript 3 a un itemRenderer en Flex http://www.codigoactionscript.org/asignar-una-clase-actionscript-3-a-un-itemrenderer-en-flex/ http://www.codigoactionscript.org/asignar-una-clase-actionscript-3-a-un-itemrenderer-en-flex/#comments Wed, 04 Mar 2009 00:05:15 +0000 admin http://www.codigoactionscript.org/?p=352 En este =http://www.cristalab.com/tipsTip[/url] voy a explicar un sistema para poder controlar la funcionalidad de un componente usado como itemRenderer en cualquier componente de tipo lista desde una clase de ActionScript 3.

Supongamos que en nuestra aplicación Flex tenemos un compomente TileList al que le hemos asignado otro componente como itemRenderer:

PLAIN TEXT Actionscript: <mx:TileList id="myTileList">        <mx:itemRenderer>         <mx:Component>                      <mx:myItemRenderer/>         </mx:Component>     </mx:itemRenderer> </mx:TileList>

Este itemRenderer será otro archivo MXML al que queremos asignarle una clase AS3 para poder [...] Related posts:

  1. Acceder a los itemRenderer de un componente lista en Flex
  2. Clase de ActionScript 3 para añadir sombras a MovieClips
  3. Clase de Actionscript 3 para arrays multidimensionales
]]> En este =http://www.cristalab.com/tipsTip[/url] voy a explicar un sistema para poder controlar la funcionalidad de un componente usado como itemRenderer en cualquier componente de tipo lista desde una clase de ActionScript 3.

Supongamos que en nuestra aplicación Flex tenemos un compomente TileList al que le hemos asignado otro componente como itemRenderer:

PLAIN TEXT
Actionscript:
  1. <mx:TileList id="myTileList">   
  2.     <mx:itemRenderer>
  3.         <mx:Component>         
  4.             <mx:myItemRenderer/>
  5.         </mx:Component>
  6.     </mx:itemRenderer>
  7. </mx:TileList>

Este itemRenderer será otro archivo MXML al que queremos asignarle una clase AS3 para poder manejarlo, para ello le añadiremos un tag y definiremos la clase:

PLAIN TEXT
Actionscript:
  1. <mx:Script>
  2.     <![CDATA[
  3.         import com.proyecto.MyItemRendererClass;
  4.         private var _this:MyItemRendererClass = new MyItemRendererClass(this);
  5.     ]]>
  6. </mx:Script>

El único detalle a tener en cuenta es que la clase reciba correctamente el contenido del objeto "data" del dataProvider. Eso se lo tenemos que pasar una vez el itemRenderer esté creado, de manera que en el evento creationComplete del componente haremos un setter a la clase:

PLAIN TEXT
Actionscript:
  1. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"creationComplete="_this.data = data">

Con lo que la clase para controlar el itemRenderer comenzaría siendo así:

PLAIN TEXT
Actionscript:
  1. package com.proyecto
  2. {
  3.     public class MyItemRendererClass
  4.     {
  5.         private var _main:Object;
  6.         private var _data:Object;
  7.         //------------------------------------------------------------------------
  8.         public function MyItemRendererClass(m:Object)
  9.         {
  10.             _main = m;
  11.         }   
  12.         public function set data(d:Object):void
  13.         {
  14.             _data = d;
  15.             init();
  16.         }
  17.         //------------------------------------------------------------------------
  18.         public function init():void
  19.         {
  20.             /* etc.. */
  21.         }
  22.         //------------------------------------------------------------------------
  23.     }
  24. }

Related posts:

  1. Acceder a los itemRenderer de un componente lista en Flex
  2. Clase de ActionScript 3 para añadir sombras a MovieClips
  3. Clase de Actionscript 3 para arrays multidimensionales

]]> http://www.codigoactionscript.org/asignar-una-clase-actionscript-3-a-un-itemrenderer-en-flex/feed/ 2 Comunicación entre módulos cargados con ModuleLoader en Flex http://www.codigoactionscript.org/comunicacion-entre-modulos-cargados-con-moduleloader-en-flex/ http://www.codigoactionscript.org/comunicacion-entre-modulos-cargados-con-moduleloader-en-flex/#comments Fri, 31 Oct 2008 01:18:23 +0000 admin http://www.codigoactionscript.org/?p=223 En este =http://www.cristalab.com/tipstip[/url] mostraré como comunicarse con módulos cargados dentro de una película Flex principal. Los módulos son pequeñas películas MXML que creamos para luego incorporar dentro de otro MXML principal, de igual manera que un componente pero en este caso se genera un archivo .SWF externo independiente, lo que resulta útil ya que podemos compartir módulos entre diferentes películas.

Para colocar un módulo dentro de una película principal existen dos opciones, y con una nos encontraremos un pequeño problema al intentar comunicarnos.

La primera forma es como si de un componente [...] Related posts:

  1. Asignar una clase ActionScript 3 a un itemRenderer en Flex
  2. Panel de zoom de imágenes en Flex
  3. Comunicación entre clases Actionscript 3 con EventDispatcher
]]> En este =http://www.cristalab.com/tipstip[/url] mostraré como comunicarse con módulos cargados dentro de una película Flex principal. Los módulos son pequeñas películas MXML que creamos para luego incorporar dentro de otro MXML principal, de igual manera que un componente pero en este caso se genera un archivo .SWF externo independiente, lo que resulta útil ya que podemos compartir módulos entre diferentes películas.

Para colocar un módulo dentro de una película principal existen dos opciones, y con una nos encontraremos un pequeño problema al intentar comunicarnos.

La primera forma es como si de un componente se tratase, osea definiríamos el namespace, por ejemplo, xmlns:modules="*", y lo colocaríamos con ese tag:

PLAIN TEXT
Actionscript:
  1. <modules:module id="modulo"/>

Si este módulo tuviese una función actionscript pública llamada setTexto(t:String); que le asignase el valor a una variable privada podríamos acceder a ella sin problema desde la película MXML principal.

PLAIN TEXT
CODE:
  1. private function setModuleText():void
  2. {
  3.     modulo.setTexto("texto")
  4. }

Ahora bien, también podríamos haber cargado el módulo con el componente ModuleLoader. De esta manera hubiésemos enlazado directamente al archivo .SWF generado al publicar el módulo:

PLAIN TEXT
Actionscript:
  1. <mx:ModuleLoader id="modulo" url="module.swf"/>

Cargarlo de esta manera es útil ya que nos permite intercambiar un modulo por otro dentro del mismo componente reasignando el parámetro URL. Al enlazar directamente al SWF nos permite incorporar módulos generados desde otras películas, incluso desde otros servidores.

El problema es que al colocar el módulo con ModuleLoader nos saltará un error al intentar acceder a sus funciones públicas.

1061: Llamada a un método setTexto posiblemente no definido mediante una referencia con tipo estático mx.modules:ModuleLoader.

¿Cómo lo podemos solucionar? Deberemos hacer que ese módulo implemente una Interface que disponga de esa función pública a la que queremos acceder.

Crearíamos esta sencillo archivo de interface, al que llamaríamos IModule.as:

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     public interface IModule
  4.     {
  5.         function setTexto(t:String):void
  6.     }
  7. }

Para hacer que el módulo implemente esta interface le incluiremos el parámetro en el tag de definición:

PLAIN TEXT
CODE:
  1. <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" implements="IModule">

Y de esta manera deberemos asignar la definición de tipo a la instancia del módulo para llamar a la función que implementa la interface:

private function setModuleText():void
{
var mod:IModule = modulo.child as IModule;
mod.setTexto("texto");
}

Ahora si tenemos acceso a las funciones públicas del módulo :)

Este es todo el código completo por si alguien quiere darle un vistazo:

module.mxml
PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" implements="IModule">   
  3.     <mx:Script>
  4.         <![CDATA[
  5.             [Bindable]
  6.             private var _texto:String;
  7.            
  8.             public function setTexto(t:String):void
  9.             {
  10.                 _texto = t;
  11.             }   
  12.         ]]>
  13.     </mx:Script>   
  14.     <mx:Label verticalCenter="0" left="20" right="20" textAlign="center" id="textoInput" text="{_texto}"/> 
  15. </mx:Module>

Main.mxml
PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:modules="*" layout="absolute">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             private function setModuleText1():void
  6.             {
  7.                 modulo1.setTexto("texto1")
  8.             }
  9.             private function setModuleText2():void
  10.             {
  11.                 var mod:IModule = modulo2.child as IModule;
  12.                 mod.setTexto("texto2");
  13.             }
  14.         ]]>
  15.     </mx:Script>
  16.     <mx:VBox horizontalCenter="0" verticalCenter="0" horizontalAlign="center"> 
  17.         <modules:module id="modulo1"/>
  18.         <mx:ModuleLoader id="modulo2" url="module.swf"/>       
  19.         <mx:Button label="Button1" click="setModuleText1()"/>
  20.         <mx:Button label="Button2" click="setModuleText2()"/>      
  21.     </mx:VBox> 
  22. </mx:Application>

IModule.as
PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     public interface IModule
  4.     {
  5.         function setTexto(t:String):void
  6.     }
  7. }

Related posts:

  1. Asignar una clase ActionScript 3 a un itemRenderer en Flex
  2. Panel de zoom de imágenes en Flex
  3. Comunicación entre clases Actionscript 3 con EventDispatcher

]]> http://www.codigoactionscript.org/comunicacion-entre-modulos-cargados-con-moduleloader-en-flex/feed/ 1