CODIGO.actionscript » componente

Panel de zoom de imágenes en Flex

admin — Mon, 13 Apr 2009 21:04:16 +0000

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"?>
"http://www.adobe.com/2006/mxml"
xmlns:ui="*"
layout="absolute"
creationComplete="ini()"
width="505"
height="260">

[CDATA[
import ZoomFx;
private var _zoom:ZoomFx;

private function ini():void
{
_zoom=new ZoomFx(this, fotoZoom, panelZoom);
}
]]>

"0"
verticalCenter="0">
"fotoZoom"/>
"panelZoom"/>

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

xml version="1.0" encoding="utf-8"?>
"http://www.adobe.com/2006/mxml"
   width="350"
   height="250"
   borderStyle="solid"
   borderThickness="1"
   borderColor="#000000"
   horizontalScrollPolicy="off"
   verticalScrollPolicy="off">
"foto"
   scaleContent="false">
img/Waterfall.jpg

Y este el componente que contiene el panel de preview:

xml version="1.0" encoding="utf-8"?>
"http://www.adobe.com/2006/mxml"
   width="140"
   height="100"
   borderStyle="solid"
   borderThickness="1"
   borderColor="#000000"
   horizontalScrollPolicy="off"
   verticalScrollPolicy="off">
"foto"
   scaleContent="true"
   width="140"
   height="100"
   horizontalCenter="0"
   verticalCenter="0">
img/Waterfall.jpg

"0"
   y="0"
   width="70"
   height="50"
   backgroundColor="#FF0000"
   backgroundAlpha="0.5"
   borderStyle="solid"
   borderThickness="1"
   borderColor="#FF0000"
   id="zoomDrag">

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

package
{
import flash.events.Event;
import flash.events.MouseEvent;

import mx.containers.Canvas;
import mx.controls.Image;
import mx.controls.Alert;
import mx.core.UIComponent;

public class ZoomFx
{
private var _stage:UIComponent;
private var _fotoZoom:UIComponent;
private var _panelZoom:UIComponent;
private var _distX:Number;
private var _distY:Number;
private var _porcentajeX:Number;
private var _porcentajeY:Number;

//----------------------------------------------------
public function ZoomFx(stage:UIComponent, fotoZoom:UIComponent, panelZoom:UIComponent)
{
_stage=stage;
_fotoZoom=fotoZoom;
_panelZoom=panelZoom;

iniZoomDrag();
}

private function iniZoomDrag():void
{
var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
drag.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
drag.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
drag.addEventListener(MouseEvent.MOUSE_OUT, onStopDrag);
}

private function onStartDrag(e:Event):void
{
var canvas:Canvas=e.target as Canvas;
canvas.startDrag();
_stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseDragMove);
}

private function onStopDrag(e:Event):void
{
var canvas:Canvas=e.target as Canvas;
canvas.stopDrag();
_stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseDragMove);
}

private function onMouseDragMove(e:Event):void
{
calculaDist();
mueveVisorZona();
controlaPosiciones();
}

//-------------------------------------------------------------
private function calculaDist():void
{
var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
var foto:Image=_fotoZoom.getChildByName("foto") as Image;

_porcentajeX=100 / (foto.width / _panelZoom.width);
_porcentajeY=100 / (foto.height / _panelZoom.height);

drag.width=_fotoZoom.width * _porcentajeX / 100;
drag.height=_fotoZoom.height * _porcentajeY / 100;

_distX=drag.x * 100 / _porcentajeX;
_distY=drag.y * 100 / _porcentajeY;

_distX=(_distX <0) ? 0 : _distX;
_distY=(_distY <0) ? 0 : _distY;
}

private function mueveVisorZona():void
{
var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
var foto:Image=_fotoZoom.getChildByName("foto") as Image;
foto.x=-_distX;
foto.y=-_distY;
}

private function controlaPosiciones():void
{
var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
var foto:Image=_fotoZoom.getChildByName("foto") as Image;

if (drag.x <0)
{
drag.x=0;
}
else if (drag.x> _panelZoom.width - drag.width)
{
drag.x=_panelZoom.width - drag.width;
}
if (drag.y <_panelZoom.y)
{
drag.y=_panelZoom.y;
}
else if (drag.y> _panelZoom.y + _panelZoom.height - drag.height)
{
drag.y=_panelZoom.y + _panelZoom.height - drag.height;
}

if (foto.x> 0)
{
foto.x=0;
}
else if (foto.x <_fotoZoom.width - foto.width)
{
foto.x=_fotoZoom.width - foto.width;
}
if (foto.y> 0)
{
foto.y=0;
}
else if (foto.y <_fotoZoom.height - foto.height)
{
foto.y=_fotoZoom.height - foto.height;
}
}

}
}

Comparte:

Ejemplo de Zoom con lupa en Flex

admin — Sat, 11 Apr 2009 02:46:07 +0000

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:

xml version="1.0" encoding="utf-8"?>
"http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:ui="*"
creationComplete="ini()">

[CDATA[
import LupaFx;
private var _lupa:LupaFx;
private function ini():void
{
_lupa=new LupaFx(this, foto, lupa);
}
]]>

"foto" scaleContent="true" horizontalCenter="0" verticalCenter="0" width="350" height="250">
img/Waterfall.jpg

"lupa"
x="0"
y="0"/>

El componente que utilizaremos como lupa:

xml version="1.0" encoding="utf-8"?>
"http://www.adobe.com/2006/mxml"
width="100" height="100" borderStyle="solid" borderThickness="4"
borderColor="#FF0000" horizontalScrollPolicy="off" verticalScrollPolicy="off">
"foto" scaleContent="false" y="0" x="0">
img/Waterfall.jpg

Y la clase de actionscript que controlará el efecto:

package
{
import flash.events.MouseEvent;

import mx.core.UIComponent;

public class LupaFx
{
private var _stage:UIComponent;
private var _foto:UIComponent;
private var _lupa:UIComponent;
private var _distX:Number;
private var _distY:Number;
private var _porcentajeX:Number;
private var _porcentajeY:Number;
//----------------------------------------------------
public function LupaFx(stage:UIComponent, foto:UIComponent, lupa:UIComponent)
{
_stage=stage;
_foto=foto;
_lupa=lupa;
stage.addEventListener(MouseEvent.MOUSE_MOVE, lupaMouseMove);
lupaMouseMove();
}
//----------------------------------------------------
private function lupaMouseMove(event:MouseEvent=null):void
{
calculaDist();
mueveLupa();

_lupa.x=_foto.mouseX + _foto.x - _lupa.width / 2;
_lupa.y=_foto.mouseY + _foto.y - _lupa.height / 2;

if (_lupa.x <_foto.x)
{
_lupa.x=_foto.x;
}
else if (_lupa.x> _foto.x + _foto.width - _lupa.width)
{
_lupa.x=_foto.x + _foto.width - _lupa.width;
}
if (_lupa.y <_foto.y)
{
_lupa.y=_foto.y;
}
else if (_lupa.y> _foto.y + _foto.height - _lupa.height)
{
_lupa.y=_foto.y + _foto.height - _lupa.height;
}
}
//----------------------------------------------------
private function calculaDist():void
{
_porcentajeX=100 / (_lupa.getChildByName("foto").width / (_foto.width - _lupa.width / 2));
_porcentajeY=100 / (_lupa.getChildByName("foto").height / (_foto.height - _lupa.height / 2));

_distX=(_lupa.x - _foto.x) / _porcentajeX * 100;
_distY=(_lupa.y - _foto.y) / _porcentajeY * 100;
}
//----------------------------------------------------
private function mueveLupa():void
{
_lupa.getChildByName("foto").x=-_distX;
_lupa.getChildByName("foto").y=-_distY;
}
}
}

Comparte:

Acceder a los itemRenderer de un componente lista en Flex

admin — Sun, 22 Mar 2009 03:45:30 +0000

Este es un tip sencillo pero que me dió algún que otro dolor de cabeza al querer aplicar unos efectos sobre los componentes utilizados como itemRenderes dentro de un componente tipo lista en Flex. Se trata de cómo poder acceder a estos componentes para manipular su contenido a través de Actionscript.

Para acceder al componente del itemRenderer en concreto utilizaremos indexToItemRenderer, pasándole como parámetro el index del ítem que queremos obtener.

El detalle importante que debemos tener en cuenta es que no podemos referenciar un objeto que no sea visible dentro de la zona del scroll, ya que hasta entonces devolvería valor null. Para ello deveremos realizar la comprobación con isItemVisible, y ejecutar las acciones solo sobre los componentes visibles.

var total:uint = tileList.dataProvider.length;
for (var i:uint = 0; i )
{
if (tileList.isItemVisible(tileList.dataProvider[i]) == true)
{
var item:Object = tileList.indexToItemRenderer(i);
// resto de implementación sobre los componentes
}
}

Comparte:

Mostrar una alerta antes del cierre de una aplicación AIR

admin — Tue, 27 Jan 2009 01:59:31 +0000

En este ejemplo mostraré como crear una ventana de alerta cuando le demos al botón de cerrar en una aplicación AIR, teniendo que validar el cierre evitando que se cierre directamente. De esta manera podemos controlar que el usuario cierre la aplicación si haber realizado una operación necesaria, por ejemplo guardar los cambios realizados en el caso de tratarse de una a aplicación que edite documentos.

Lo primero que deberemos hacer es colocar la función a realizar cuando se detecte el evento de cierre de la aplicación (osea, cuando el usuario cierra la aplicación).

"http://www.adobe.com/2006/mxml" layout="absolute" closing="cerrarApp(event)">

Ahora escribiremos la función. El punto importante aquí es como evitar el cierre de la aplicación, ya que el usuario realmente a clicado en el botón de cerrar. Esto lo conseguimos con el método preventDefault() de la clase Event. Con este método conseguimos que el evento no ejecute las funciones por defecto y por lo tanto no se cierra la aplicación. Lo que haremos en su lugar es abrir una ventana de Alert.

public function cerrarApp(e:Event):void
{
e.preventDefault();

Alert.yesLabel = "Si";

Alert.show("¿Realmente quiere salir?","Salir aplicación", Alert.YES | Alert.NO, null, cerrar, null, 2);
}

Con yesLabel decimos que aparezca el texto "Si" en el botón de validar en lugar de "Yes". Y con el 2 al final de los parámetros decimos que el botón seleccionado por defecto sea el segundo, osea el "No".

También le estamos indicando que al clicar sobre cualquiera de los botones se ejecute la función "cerrar" que es la siguiente:

private function cerrar(e:CloseEvent):void
{
if(e.detail == Alert.YES)
{
this.nativeApplication.exit();
}
}

Donde le estamos indicando que si el botón seleccionado es el "Si" entonces cierre la aplicación. En el caso de seleccionar el "No" no se ejecuta nada y por lo tanto la aplicación sigue abierta.

[h3]Segundo ejemplo[/h3]

El código anterior se ejecutaría siempre que le demos al icono de cerrar aplicación. Pero lo interesante es poder controlar cuando queremos mostrar esa advertencia.

Por ejemplo en el caso de tener una aplicación que sea un editor de texto. Si le damos al botón de cerrar la aplicación teniendo cambios sin guardar mostraremos el Alert, pero en el caso de haber guardado los cambios previamente cerraremos directamente la aplicación.

Primero crearemos una variable booleana que controlará si la aplicación se cierra automáticamente o requiere mostrar la advertencia.

private var cierre:Boolean = true;

En la función que se ejecuta al cerrar la aplicación colocaremos un condicional que detecte el estado de esa variable.

private function cerrarApp(e:Event):void
{
e.preventDefault();

if(cierre == false)
{
Alert.yesLabel = "Si";
Alert.show("¿Desea guardar los cambios antes de salir?","Salir aplicación", Alert.YES | Alert.NO | Alert.CANCEL, null, cerrar, null, 3);
}
else
{
this.nativeApplication.exit();
}
}

Lógicamente esa función "cierre" la deberemos controlar con el resto de funciones de la aplicación. Es decir, todas las funciones que realicen cualquier cambio que deba ser guardado deberán colocar esa variable a "false", y la función que realice el guardado de datos deberá colocar la variable a "true".

La función de cierre quedaría asi:

private function cerrar(e:CloseEvent):void
{
if(e.detail == Alert.YES)
{
guardarDatos();
this.nativeApplication.exit();
}
else if(e.detail == Alert.NO)
{
this.nativeApplication.exit();
}
}

De manera que si clicamos "Si" ejecutaríamos la función que nos guarda los datos y cerraríamos después la aplicación, si clisásemos "No" cerraríamos directamente y si clisásemos "Cancel" entonces no se ejecutaría nada y no cerraríamos la aplicación.

Comparte:

Cómo personalizar el icono del panel de Alerta de Flex

Busquedas de palabras en textos con expresiones regulares

admin — Sat, 24 Jan 2009 02:53:54 +0000

Este es un ejemplo de como realizar búsquedas de palabras dentro de cajas de texto haciendo uso de Expresiones Regulares de Actionscript 3.

Lo primero que haremos es crear un patrón con los caracteres de texto que queremos seleccionar. En este caso le indicaremos la palabra desde un TextInput

var patron:RegExp = new RegExp(input.text);

Este patrón nos encontrará la primera cadena de texto que coincida con los caracteres introducidos en el campo de texto. Si al patrón le añadimos el indicador g (global) hará que nos encuentre no solo la primera coincidencia sino todas las que haya en el texto. También le añadiremos el indicador i (ignoreCase) para que no haga distinción entre mayúsculas y minúsculas.

var patron:RegExp = new RegExp(input.text,"gi");

Ahora tendremos que solucionar el detalle de que nos encuentre palabras y no caracteres dentro de otras palabras. Es decir, si buscamos la palabra "mi" no queremos que nos la seleccione dentro de "camino". Para ello utilizaremos grupos de búsqueda. Indicaremos que solo nos interesa cuando despues de la coincidencia haya un espacio, un punto o una coma. Y por el otro lado indicaremos que haya un espacio o que sea inicio de párrafo.

var patron:RegExp = new RegExp("(^| )" + input.text + "[\ .,]","gi");

Utilizando este patrón dentro del método match() de la clase String podremos recuperar todas la concordancias que haya en el texto.

var patron:RegExp = new RegExp("(^| )" + input.text + "[\ .,]","gi");
var busqueda:Array = texto.text.match(patron);
output.text = "Total: " + busqueda.length;

Ahora haremos que las palabras encontradas queden resaltadas en negrita, color rojo y subrayado. Para ello empezaremos escribiendo un estilo CSS, y asignándolo al campo de texto.

var estilo:StyleSheet = new StyleSheet();
estilo.parseCSS(".select{fontWeight:bold; color: #FF0000; text-decoration: underline;}");
texto.styleSheet = estilo;

Con el método replace() de la clase String sustituiremos el contenido del patrón por un String que nos añadirá el tag que asignará el estilo CSS a la palabra. Como en el patrón hemos indicado que nos seleccione la palabra junto a los espacios en blanco o los puntos y comas, deberemos utilizar otro patrón que solo seleccione los caracteres de texto introducidos en el TextInput. Este segundo patrón lo colocaremos dentro de una función recursiva.

texto.htmlText = texto.text.replace(patron,setSpan);

function setSpan(txt:String, ...rest):String
{
var patron:RegExp = new RegExp(input.text,"i");
var tag:String = txt.replace(patron,"$&");
return tag;
}

Ý listo, ya tenemos el ejemplo montado (coloquen una palabra en el TextInput y denle al botón):

Este es el código completo:

var estilo:StyleSheet = new StyleSheet();
estilo.parseCSS(".select{fontWeight:bold; color: #FF0000; text-decoration: underline;}");
texto.styleSheet = estilo;

boton.addEventListener(MouseEvent.CLICK, buscaPalabra);

function buscaPalabra(e:MouseEvent=null):void
{
var patron:RegExp = new RegExp("(^| )" + input.text + "[\ .,]","gi");
var busqueda:Array = texto.text.match(patron);
output.text = "Total: " + busqueda.length;
texto.htmlText = texto.text.replace(patron,setSpan);
}
function setSpan(txt:String, ...rest):String
{
var patron:RegExp = new RegExp(input.text,"i");
var tag:String = txt.replace(patron,"$&");
return tag;
}

buscaPalabra();

Y aquí el archivo .FLA para descargar. (archivo CS4)

Comparte:

Personalizar componentes de Flex con estilos programáticos

admin — Sat, 20 Dec 2008 23:45:04 +0000

Como ampliación a los tips anteriores sobre personalización de componentes en Flex, "Importar diseño desde Photoshop a Flex" y "Personalizar botones de aplicaciones Flex con Actionscript", explicaré un sistema que nos da mcha libertad a la hora de personalizar nuestras aplicaciones: Los estilos programáticos.

Un estilo programático es simplemente un estilo vinculado a una clase de actionscript con la que dibujamos el gráfico a través de código.

Para ello crearemos dentro de nuestro proyecto una clase de actionscript que extienda de ProgrammaticSkin, la llamaremos por ejemplo EstiloBoton:

package clases.estilos
{
import mx.skins.ProgrammaticSkin;

public class EstiloBoton extends ProgrammaticSkin
{

}
}

Ahora lo que deberemos hacer es sobrescribir la función updateDisplayList de la clase ProgrammaticSkin. Dentro de esta nueva función dibujaremos con la API de dibujo de Flash los gráficos que queramos para el botón (para este ejemplo dibujaré un circulo de diferente color para cada estado del botón):

protected override function updateDisplayList(w:Number, h:Number):void
{
graphics.clear();

switch (name)
{
case "upSkin":
graphics.beginFill(0xFF0000);
break;
case "overSkin":
graphics.beginFill(0xFF4400);
break;
case "downSkin":
graphics.beginFill(0xFF8800);
break;
case "disableSkin":
graphics.beginFill(0xCCCCCC);
break;
}
graphics.drawEllipse(0,0,w,h);
graphics.endFill();
}

Ahora solo queda asignar este estilo al botón:

[CDATA[
import clases.estilos.EstiloBoton;

private var ico1:Class = EstiloBoton;
private var ico2:Class = EstiloBoton;
private var ico3:Class = EstiloBoton;
private var ico4:Class = EstiloBoton;

private function ini():void
{
boton1.setStyle("upSkin", ico1);
boton1.setStyle("overSkin", ico2);
boton1.setStyle("downSkin", ico3);
boton1.setStyle("disableSkin", ico4);
}
]]>

En caso de querer asignar el estilo a todos los componentes a través de CSS podemos hacerlo con la directiva ClassReference:

Button {
upSkin: ClassReference('clases.estilos.EstiloBoton');
overSkin: ClassReference('clases.estilos.EstiloBoton');
downSkin: ClassReference('clases.estilos.EstiloBoton');
disableSkin: ClassReference('clases.estilos.EstiloBoton');
}

Y listo ^^

Comparte:

Personalizar botones de aplicaciones Flex con Actionscript

admin — Sat, 20 Dec 2008 23:41:00 +0000

Este tip es una continuación a tip escrito por Mx en Cristalab sobre como personalizar botones (y componentes en general) de Flex.

En ese tip, se muestra como podemos utilizar gráficos de Photoshop para sustituir los gráficos estándar del componente. Ella mostró la forma de hacerlo desde los menús de Flex Builder y el resultado de ese proceso es la generación de un archivo CSS como, por ejemplo, este:

Button {
upSkin: Embed("img/ico1.png");
overSkin: Embed("img/ico2.png");
downSkin: Embed("img/ico3.png");
disableSkin: Embed("img/ico4.png");
}

Con esto cambiaremos el aspecto de TODOS los componentes botón de nuestra aplicación. Pero.. ¿que pasa si queremos cambiar el aspecto de un botón en concreto? por ejemplo para un botón de "Play" o de "Stop" en un reproductor de vídeo.

Para hacer eso, podemos asignar otro "estilo" a ese botón en concreto a través de actionscritp.

Para ello abriremos un tag y ahí incrustaremos los gráficos dentro de variables tipo Class, y asignaremos el nuevo estilo al botón a través de setStyle().

[CDATA[
[Embed("img/ico2_1.png")]
private var ico1:Class;

[Embed("img/ico2_2.png")]
private var ico2:Class;

[Embed("img/ico2_3.png")]
private var ico3:Class;

[Embed("img/ico2_4.png")]
private var ico4:Class;

private function ini():void
{
boton1.setStyle("upSkin", ico1);
boton1.setStyle("overSkin", ico2);
boton1.setStyle("downSkin", ico3);
boton1.setStyle("disableSkin", ico4);
}
]]>

De esta manera, todos los componentes botón tendrán el estilo definido desde el archivo CSS menos nuestro botón "boton1" que tendrá el estilo definido en el actionscript.

Comparte:

Cargar XML en un componente List en Actionscript 3

admin — Thu, 23 Oct 2008 15:01:20 +0000

Este es un ejemplo de clase que extiende el componente List de Flash y le añade la posibilidad de cargar el contenido desde un archivo XML externo.

Este ejemplo de clase surguió a partir de optimizar un clase que me mostró penHolder en Cristalab. Aqui pueden ver su codigo y el post original.

Cargar XML en un componente List en Actionscript 3

Basicamente mi aporte fue hacer que la clase extendiese de List para no tener que crear una instancia del componente y pasarla como parametro a otra clase, ya que nuestra intención es crear un mismo componete List pero que contenga unos metodos ampliados, en este caso que contewnga un metodo para cargar los datos desde un archivo XML.

package
{
import fl.controls.List;
import fl.data.DataProvider;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.Event;
//------------------------------------
public class FillList extends List
{
   private var _xml:XML;
   //------------------------------------
   public function FillList():void { }
   //------------------------------------
   public function setData(url:String):void
   {
      var request:URLRequest = new URLRequest(url);
      var loader:URLLoader = new URLLoader();
      loader.load(request);
      loader.addEventListener(Event.COMPLETE, xmlLoaded);
   }
   private function xmlLoaded(e:Event):void
   {
      _xml = new XML(e.target.data);
      dataProvider = new DataProvider(_xml);
   }
   //------------------------------------
}
}

Para crear la instacia colocariamos este codigo enb la clase Main:

package
{
import flash.display.MovieClip;
import fl.controls.List;
import FillList;
//------------------------------------
public class Main extends MovieClip
{
   private var bofhList:FillList;
//------------------------------------
   public function Main()
   {
      bofhList = new FillList();
      bofhList.setData("datos.xml");
      bofhList.setSize(150,200);
      bofhList.move(10,10);
      addChild(bofhList);
   }
//------------------------------------
}
}

Comparte: