CODIGO.actionscript » Avanzado

Cómo encriptar textos en Actionscript 3

admin — Mon, 07 Dec 2009 15:41:18 +0000

En muchas ocasiones tenemos información que debemos guardar y que no queremos que sea accesible directamente por el usuario. Por ejemplo, archivos de configuración de aplicaciones AIR o archivos de texto con variables. La solución es escriptar ese texto para que no sea entendible si el usuario accede a él directamente.

Para encriptar un texto en actionscript 3 lo primero que hacemos es descargarnos esta librería que nos permitirá utilizar varios algoritmos de encriptación.

http://ascrypt3.riaforge.org/

Ahora nos crearemos una clase que utilice el cifrado en TEA. Este algoritmo requiere de un texto clave que tendrá que ser el mismo a la hora de encriptar y a la hora de desencriptar.

package com.cristalab.utils.security
{
import com.meychi.ascrypt3.TEA;
//-------------------------------------------------------------
public class EncryptUtils
{
internal static const ENCRYPTION_KEY:String = "mi_contraseña_de_encriptado";
//-------------------------------------------------------------
public static function encryptString(s:String):String
{
var tea:TEA = new TEA();
var encryptedString:String = tea.encrypt(s, ENCRYPTION_KEY);
return encryptedString;
}
public static function decryptString(s:String):String
{
var tea:TEA = new TEA();
var decryptedString:String = tea.decrypt(s, ENCRYPTION_KEY);
return decryptedString;
}
}
}

La utilización de esta clase para encriptar texto sería:

import com.cristalab.utils.security;
var texto:String = "Lo que sea";
var texto_encriptado:String = EncryptUtils.encryptString(texto);

Y para desencriptar:

var texto:String = EncryptUtils.decryptString(texto_encriptado);

En esta clase de ejemplo la palabra clave para codificar esta añadida dentro de la misma clase, pero podríamos haber creado la clase haciendo que ese String le viniese como parámetro y así utilizar diferentes keys para diferentes proyectos. Lo que ha de estar claro es que para desencriptar un texto deberemos utilizar el mismo key que utilizamos para encriptarlo.

Comparte:

Programación orientada a objetos: Herencia de clases.

admin — Mon, 02 Feb 2009 00:49:59 +0000

La herencia de clases es uno de los conceptos básicos de la programación orientada a objetos. Decir que una clase hereda de otra quiere decir que esa clase obtiene los mismos métodos y propiedades de la otra clase. Permitiendo de esta forma añadir a las características heredadas las suyas propias.

Supongamos que tenemos una clase "Persona" con los métodos y propiedades básicas de una objeto persona como podrian ser "caminar" o "hablar", podríamos tener otras clases como "Guillermo" o "Elder" que comparten todas las características de una "Persona" pero que añaden características propias. Por lo que "Guillermo" y "Elder" pueden realizar las

mismas funciones que puede realizar una "Persona" y además cada una puede realizar las suyas propias, por ejemplo, "Guillermo" sabe nadar pero "Elder" no, y "Elder" sabe bailar reggeton pero "Guillermo" no.

En terminos de programación estaríamos diciendo que "Guillermo" y "Elder" son dos clases especializadas que heredan o extienden de la superclase "Persona".

Tipos de herencia de clases

Existen dos tipos de herencia:

Herencia por especialización
Herencia por generalización

En realidad la herencia es la misma, esta es una diferenciación puramente conceptual sobre la forma en que se a llegado a ella.

Una herencia por especialización es la que se realiza cuando necesitamos crear una clase nueva que disponga de las mismas características que otra pero que le añada funcionalidades. Por ejemplo si tenemos una clase que genera un botón simple, y necesitamos crear un botón que sea igual que el anterior pero que además añada un efecto al ser clicado.

La herencia por generalización es la que realizamos cuando tenemos muchas clases que comparten unas mismas funcionalidades y por homogeneizar las partes comunes se decide crear una clase que implemente toda esa parte común y se dejan solo las partes especificas en cada clase. Por ejemplo si tenemos clases para dibujar formas geométricas todas ellas

disponen de las mismas propiedades (un color de fondo, color de linea, etc..), todas estas características pueden estar en una clase general de la que hereden todas las clases concretas, evitando tener que escribir todo ese código común en todas ellas.

Herencia de clases en Actionscript

En Actionscript definimos que una clase hereda de otra con la sentencia "extends".

public class Guillermo extends Persona

Public, private o protected

Una consideración a tener en cuenta de la herencia es que una clase no hereda la propiedades o métodos privados, con lo que no tendrán acceso a ellas. Si necesitamos heredar propiedades o métodos que no queremos que sean accesibles desde fuera de las clases las definiremos como protected.

Sobreescritura de métodos

Una característica muy importante que permite la herencia es que podemos hacer que una clase implemente de manera diferente un método heredado. Haciendo que dos clases que heredan de la misma clase y heredan los mismos métodos se comporten de maneras diferentes.

Por ejemplo, unas clases de dibujo de figuras geométricas pueden heredar de una clase general la función "dibujar". Todas las clases dispondrán de esa función, pero cada clase la implementará de diferente manera y por lo tanto dibujará una figura diferente.

Para sobrescribir un método de la superclase utilizaremos la sentencia override en la definición del método.

//función de la superclase
public function traza():void
{
trace("superclase");
}

//función de la subclase
override public function traza():void
{
trace("subclase");
}

De esta manera al ejecutar la función "traza()" desde una subclase obtendremos el texto "subclase" sobrescribiendo las acciones del método de la subclase (no obtendríamos el texto "superclase").

En el caso de no querer sobrescribir por completo toda la implementación del método de la superclase, si no que lo que queremos es ampliarlo, podemos acceder a la implementación de la superclase con el operador "super".

//función de la subclase
override public function traza():void
{
super.traza();
trace("subclase");
}

En este caso, se ejecutaría la implementación del método en la superclase (obtendriamos el texto "superclase") y luego el de la subclase (obtendríamos también el texto "subclase").

Esto también lo podemos realizar en el constructor de la clase. Es bastante probable que una clase esté definiendo valores dentro de su constructor, de manera que al ser extendida nos interese que esas definiciones se continúen realizando. En este caso deberemos realizar una llamada al constructor de la superclase a través del operador "super".

package
{
public class A
{
protected var variable:uint;

public function A(n:uint)
{
variable = n;
}
}
}

package
{
import A;

public class B extends A
{
public function B(n:uint)
{
super(n); //ejecuta el contructor de la clase A, enviandole el parámetro
}
}
}

En el caso de que queramos asegurarnos de que una propiedad o método no pueda ser sobrescrita por otra clase la definiremos como final.

//función de la subclase que no permitirá ser sobreescrita
public final function traza():void
{
trace("subclase");
}

Ejemplo del uso de herencia de clases:

Veamos un sencillo ejemplo práctico: Crearemos un par de clases muy simples para dibujar un cuadrado o un círculo.

Lógicamente el primer paso es pensar que características compartirán tanto los cuadrados y los círculos.

Ambos son elementos gráficos que tienen propiedades que definen su tamaño (size), si disponen de relleno o solo de línea (fill), el color de relleno (bgColor), el grosor de linea (borderSize) y el color de la linea (borderColor).
Tambien ambás dispondrán de una función que permitirá actualizar el gráfico en caso de modificar sus propiedades.
Por último amb´s dispondran de la método que dibujará el gráfico. Lógicamente esta será la función que cada clase implementará de forma diferente.

Así que lo que haremos es crear una superclase "Grafico" que disponga de todas las propiedades mencionadas anteriormente, y dejaremos la implementación del método "dibuja()" a las subclases "Cuadrado" y "Circulo".

Empecemos escribiendo la interface de métodos públicos que deberán disponer todos los objetos que extiendan de "Grafico". En este caso serán todos los setters y getters para las propiedades, y el método para actualizar el gráfico.

package org.cristalab.graphics
{
public interface IGrafico
{
function get size():uint
function set size(n:uint):void
function get fill():Boolean
function set fill(n:Boolean):void
function get bgColor():uint
function set bgColor(n:uint):void
function get borderSize():uint
function set borderSize(n:uint):void
function get borderColor():uint
function set borderColor(n:uint):void
function update():void
}
}

Escribiremos la superclase "Grafico" que implementará la interface "IGrafico" y definirá todos los setters y getters de las propiedades.

Las propiedades las definiremos como "portected" para que sean privadas pero heredables.

El constructor de la clase recibirá todos los parámetros necesarios para definir las propiedades (les asignaremos valores por defecto por si se crea una instancia sin pasarle parámetros). Y realizará una llamada a la función "dibuja()" que es la que creará el gráfico.

package org.cristalab.graphics
{
import flash.display.Shape;
import flash.display.Sprite;
import org.cristalab.graphics.IGrafico;
//------------------------------------------------------------------------
public class Grafico extends Sprite implements IGrafico
{
protected var _size:uint;
protected var _fill:Boolean;
protected var _bgColor:uint;
protected var _borderSize:uint;
protected var _borderColor:uint;
//------------------------------------------------------------------------
public function Grafico(size:uint = 10, fill:Boolean = true, bgColor:uint = 0x000000, borderSize:uint = 0, borderColor:uint = 0x000000)
{
_size = size;
_fill = fill;
_bgColor = bgColor;
_borderSize = borderSize;
_borderColor = borderColor;
dibuja();
}
//------------------------------------------------------------------------
public function get size():uint
{
return _size;
}
public function set size(n:uint):void
{
_size = n;
}
//------------------------------------------------------------------------
public function get fill():Boolean
{
return _fill;
}
public function set fill(n:Boolean):void
{
_fill = n;
}
//------------------------------------------------------------------------
public function get bgColor():uint
{
return _size;
}
public function set bgColor(n:uint):void
{
_bgColor = n;
}
//------------------------------------------------------------------------
public function get borderSize():uint
{
return _borderSize;
}
public function set borderSize(n:uint):void
{
_borderSize = n;
}
//------------------------------------------------------------------------
public function get borderColor():uint
{
return _borderColor;
}
public function set borderColor(n:uint):void
{
_borderColor = n;
}
//------------------------------------------------------------------------
public function update():void
{
this.graphics.clear();
dibuja();
}
//------------------------------------------------------------------------
protected function dibuja():void
{
Throw.newError("clase abstracta");
}
//------------------------------------------------------------------------
}
}

Como hemos dicho, la clase "Grafico" no implementa el método "dibuja()" ya que eso depende de cada subclase, con lo que si intentamos crear una instancia de "Grafico" nos lanzará un error. Lo único que hacemos es definir que todas las subclases hereden el método y cada una lo implenete a su manera.

Escribamos ahora la clase "Cuadrado".

Esta clase extendrá de la clase "Grafico" e implementará la interface "IGrafico". Por lo tanto heredará todas las propiedades y métodos de la superclase marcados como public o protected, con lo que no necesitaremos definir las protiedades ni los setter y getters, pero dispondrá de ellos.

El constructor de esta clase recibirá como parámetros los valores del objeto a crear, y deberemos pasarselos al constructor de la superclase para que asigne los valores y ejecute la función de dibujar. Como hemos mencionado esto lo haremos utilizando la sentencia super();

Ahora solo nos quedará sobreescribir el método "dibuja()" para que se dibuje lo que nos interese en función de la clase actual, en este caso queremo sdibujar un cuadrado. Utilizaremos un override para sobrescribir el método.

package org.cristalab.graphics
{
import org.cristalab.graphics.IGrafico;
import org.cristalab.graphics.Grafico;
import flash.display.Shape;
import flash.display.Sprite;
//------------------------------------------------------------------------
public class Cuadrado extends Grafico implements IGrafico
{
//------------------------------------------------------------------------
public function Cuadrado(size:uint = 10, fill:Boolean = true, bgColor:uint = 0x000000, borderSize:uint = 0, borderColor:uint = 0x000000)
{
super(size, fill, bgColor, borderSize, borderColor);
}
//------------------------------------------------------------------------
override protected function dibuja():void
{
if (_fill == true)
{
this.graphics.beginFill(_bgColor);
}
if (_borderSize != 0)
{
this.graphics.lineStyle(_borderSize, _borderColor);
}
this.graphics.drawRect(0, 0, _size, _size);
if (_fill == true)
{
this.graphics.endFill();
}
}
//------------------------------------------------------------------------
}
}

Haremos lo mismo para la clase "Circulo". Únicamente deberemos implementar de diferente manera el método "dibuja".

package org.cristalab.graphics
{
import org.cristalab.graphics.IGrafico;
import org.cristalab.graphics.Grafico;
import flash.display.Shape;
import flash.display.Sprite;
//------------------------------------------------------------------------
public class Circulo extends Grafico implements IGrafico
{
//------------------------------------------
public function Circulo(size:uint = 10, fill:Boolean = true, bgColor:uint = 0x000000, borderSize:uint = 0, bordeColor:uint = 0x000000)
{
super(size, fill, bgColor, borderSize, borderColor);
}
//------------------------------------------------------------------------
override protected function dibuja():void
{
if (_fill == true)
{
this.graphics.beginFill(_bgColor);
}
if (_borderSize != 0)
{
this.graphics.lineStyle(_borderSize, _borderColor);
}
var radio:uint = Math.round(_size / 2);
this.graphics.drawCircle(radio, radio, radio);
if (_fill == true)
{
this.graphics.endFill();
}
}
//------------------------------------------------------------------------
}
}

A partir de aquí iremos creando tantas clases como gráficos diferentes nos interese dibujar, incluso podemos extender estas subclases en otras subclases, por ejemplo para crear objetos más complejos pero que su base sea un cuadrado o un circulo.

Comparte:

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:

Ordenar elementos de un Vector en Actionscript 3

admin — Thu, 22 Jan 2009 16:54:29 +0000

En este ejemplo explicaré como ordenar elementos internos de un objeto de clase Vector en Actionscript 3. Para ordenar los elementos en realidad se realiza de igual manera que en un Array. Únicamente deberemos escribir una función que compare lo elementos según el orden que nos interese.

El valor que nos ha de devolver la función que realiza la comparación deberá ser:

1: Si el primer valor es superior al segundo
-1: si el primer valor es inferior al segundo
0: Si los valores son iguales

De manera que si creamos un Vector con 10 numero aleatorios:

var vector:Vector. = new Vector.();
for (var i:int = 0; i <10; i++)
{
vector.push(Math.random() * 100);
}
trace(vector); //25,19,69,95,57,78,59,86,2,97

Si ahora lo quisiésemos ordenar de forma ascendente haríamos lo siguiente:

function ascendente(x:uint, y:uint):int
{
return (x>= y)?1 :-1;
}
vector.sort(ascendente);
trace(vector); //2,19,25,57,59,69,78,86,95,97

Y lo mismo para ordenarlo de forma descendente:

function descendente(x:uint, y:uint):int
{
return (x )?1 :-1;
}
vector.sort(descendente);
trace(vector); //97,95,86,78,69,59,57,25,19,2

Comparte:

Editar cadenas de texto utilizando expresiones regulares

admin — Sat, 10 Jan 2009 18:26:28 +0000

La clase String dispone de un método replace() que nos permite reemplazar parte del texto por otro. Esto nos puede resultar muy útil no solo para editar campos de texto grandes, si no para realizar simples acciones de programación.

Un ejemplo podría ser utilizar este método para saber el ID del botón que ejecutó una acción. Por ejemplo, tenemos una serie de botones con un nombre secuencial que todos ejecutan la misma acción, pero que debe pasar como parámetro el numero de la secuencia para ejecutar la acción de manera diferente.

boton1.addEventListener(MouseEvent.CLICK, onClickBoton);
boton2.addEventListener(MouseEvent.CLICK, onClickBoton);
boton3.addEventListener(MouseEvent.CLICK, onClickBoton);
//etc..

function onClickBoton(e:Event):void
{
var id:uint = uint(e.target.name.replace(RegExp(/boton/), ""));
trace("me clicó el botón numero " + id);
}

Dando uso de las expresiones regulares se crea un patrón que le dice al método replace() que sustituya el texto "boton" del nombre del botón por nada, con lo que nos quedamos solo con el numero de la secuencia... A partir de ahi ejecutamos las acciones que queramos.

Otro ejemplo de uso práctico de método es editar partes de direcciones URL. Por ejemplo, tenemos una serie de archivos XML situados en diferentes carpetas con la misma estructura:

http://www.dominio.com/usuarios/1320/datos/archivo.xml

http://www.dominio.com/usuarios/1321/datos/archivo.xml

http://www.dominio.com/usuarios/1322/datos/archivo.xml

etc..

En este caso podríamos tener un URL genérica de acceso global definiendo que esa carpeta en concreto será variable:

private var _xmlURL:String = "http://www.dominio.com/usuarios/#id#/datos/archivo.xml"

Y para utilizar esta url, unicamente sustituiremos el nombre de la carpeta por la que necesitemos en cada llamada.

_urlRequest.url = Global.getXmlURL().replace(RegExp(/#id#/), _id);

Espero les sea útil

Comparte:

Ordenar los elementos de un ArrayCollection en Flex

admin — Sat, 10 Jan 2009 18:24:08 +0000

En el siguiente tip mostraré como ordenar un ArrayCollection en Flex. Esto nos puede ser necesario a la hora de mostrar su contenido. Para mostrar esto utilizaré como ejemplo los resultados (hasta este momento) de las votaciones de los premios Cristalab 2008.

Supongamos que tenemos este ArrayCollection:

public var premioPopular:ArrayCollection = new ArrayCollection([
{claber: "Eldervaz", votos: 6},
{claber: "Freddie", votos: 13},
{claber: "XKlibur", votos: 3},
{claber: "TheParrot", votos: 7},
{claber: "M@U", votos: 1},
{claber: "Mariux", votos: 4},
{claber: "JaLeRu", votos: 1},
{claber: "Pley", votos: 1},
]);

Y asignamos este ArrayCollection a un componente PieChart para mostrar los resultados:

width="25%" horizontalCenter="0" verticalCenter="0">
text="Claber más Popular" fontWeight="bold" fontSize="18"/>
width="100%" height="100%">
"legend1" dataProvider="{pie1}"/>
"pie1" dataProvider="{premioPopular}" showDataTips="true" width="150" height="150">

"votos" nameField="claber"/>

Daría este resultado:

Como podemos ver, los resultados aparecen en el orden en que están colocados dentro del ArrayCollection. Pero de esta manera en el Legend no sabemos quien es el que obtuvo más votos.

En este caso podríamos haber ordenado el ArrayCollection manualmente, pero para casos más complejos nos resultaría más fácil ordenarlo por código. Para ello utilizaremos la clase SortField y la clase Sort.

Crearemos una instancia de la clase SortField, y le pasaremos como propiedad el nombre del parámetro que queremos ordenar del ArrayCollection. También indicaremos si el parámetro a ordenar es un dato numérico o no.

var sortField:SortField = new SortField();
sortField.name = "votos";
sortField.numeric = true;

También crearemos una instancia de la clase Sort y le pasaremos referencia del objeto SortField creado. Aqui ejecutaremos el método reverse() para que la ordenación de elementos sea de mayor a menor (por defecto es de nemor a mayor).

var sort:Sort = new Sort();
sort.fields = [sortField];
sort.reverse();

Ahora pasaremos este objeto al ArrayCollection, y ejecutaremos el método refresh() que hará que el Array se ordene segun los parámetros indicados.

premioPopular.sort = sort;
premioPopular.refresh();

Este es es resultado:

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:

Comunicación entre módulos cargados con ModuleLoader en Flex

admin — Fri, 31 Oct 2008 01:18:23 +0000

En este tip 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:

"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.

private function setModuleText():void
{
modulo.setTexto("texto")
}

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:

"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:

package
{
public interface IModule
{
function setTexto(t:String):void
}
}

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

"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

xml version="1.0" encoding="utf-8"?>
"http://www.adobe.com/2006/mxml" layout="absolute" implements="IModule">

[CDATA[
[Bindable]
private var _texto:String;

public function setTexto(t:String):void
{
_texto = t;
}
]]>

"0" left="20" right="20" textAlign="center" id="textoInput" text="{_texto}"/>

Main.mxml

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

[CDATA[
private function setModuleText1():void
{
modulo1.setTexto("texto1")
}
private function setModuleText2():void
{
var mod:IModule = modulo2.child as IModule;
mod.setTexto("texto2");
}
]]>

"0" verticalCenter="0" horizontalAlign="center">
"modulo1"/>
"modulo2" url="module.swf"/>
Button label="Button1" click="setModuleText1()"/>
Button label="Button2" click="setModuleText2()"/>

IModule.as

package
{
public interface IModule
{
function setTexto(t:String):void
}
}

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:

Acceder a funciones en MovieClips de películas .swf externas

admin — Wed, 01 Oct 2008 01:00:15 +0000

Cuando creamos aplicaciones complejas es probable que las construyamos a partir de cargar módulos creados en pequeñas películas .swf externas cargadas dentro de un Loader en la película principal. Estas pequeñas películas contendrán clips con clases asociadas que dispondrán de funciones públicas que nos interesará ejecutar desde la película principal. En este tip explicaré precisamente eso, cómo acceder a las funciones públicas de la clase asignada a un MovieClip de la librería de un archivo .swf externo desde la película principal.

Para mostrar el proceso utilizaré un ejemplo muy simplificado. Tendremos una película swfClipA.fla en cuya biblioteca tendrá un MovieClip al que le hemos asignado una clase, en este caso la clase se llama ClipA que estará dentro del package clases.

Para simplificar al máximo este ejemplo únicamente haremos que la clase de este clip le coloque un angulo de rotación aleatorio y coloque este valor dentro de una variable, y contendrá una función publica que devuelve dicho valor.

package clases
{
import flash.display.MovieClip;

public class ClipA extends MovieClip
{
private var angulo:uint;

public function ClipA()
{
this.rotation = Math.round(Math.random() *360);
angulo = this.rotation;
}
public function getAngulo():uint
{
return angulo;
}
}
}

Ahora bien, imaginemos que tenemos una película principal en la que cargamos este archivo swfClipA.swf. Esta sería la clase asignada a la película principal:

package clases
{
import flash.display.Loader;
import flash.display.MovieClip;
import flash.net.URLRequest;
import flash.events.Event;

public class Main extends MovieClip
{
private var _swf:MovieClip;

public function Main()
{
var loader:Loader = new Loader();
var request:URLRequest = new URLRequest("swfClipA.swf");
loader.load(request);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCargado);
}
private function onCargado(e:Event):void
{
_swf = addChild(e.target.content) as MovieClip;
}
}
}

Y ahora desde esta película principal acceder a la función pública del MovieClip interno del archivo externo. Lo único que tenemos que hacer es buscar la ruta de esa clase dentro del clip cargado.

Para ello realizaremos una búsqueda dentro del clip cargado y seleccionaremos cual de ellos está creado con la clase que nos interesa interactuar. Una vez encontrada podremos acceder sin problema a sus funciones públicas.

for (var i:uint = 0; i <_swf.numChildren; i++)
{
var clip:MovieClip = _swf.getChildAt(i) as MovieClip;
if (clip.constructor == ClipA)
{
var _clipA:MovieClip = clip;
}
trace(_clipA.getAngulo());
}

Comparte: